2

We want to solve a pop-up or a so-called "header info" about the cookie plugin "Cookies". We have assigned and created the cookie accordingly. It appears as soon as we set (initial set) a cookie via globals or change the text of "globalheaderinfo.headerInfo".

Actual state: The cookie appears as soon as it is set or the text is changed. But as soon as I switch from the Home e.g. to the Contact page (by clicking on Contact page in the navigation) the cookie disappears.

Target state: The cookie must not be closed until I have clicked on the Close button.

Craft-Version: 3.7.28

Cookies-Plugin-Version: 1.1.15

Here our Code:

{% if getCookie('Header') %}
  {% set checkCookieHeader = getCookie('Header') %}
  {% if checkCookieHeader != globalheaderinfo.headerInfo %}
    <div class="header-info"> 
      {{ globalheaderinfo.headerInfo }}
    </div>
    {% do 'Header' | setCookie( globalheaderinfo.headerInfo, now | date_modify("+1 year").timestamp) %}  
  {% endif %}
{% else %}
  {% set checkCookieHeader = getCookie('Header') %}
  <div class="header-info"> 
    {{ globalheaderinfo.headerInfo }}
  </div>
{% do setCookie('Header', globalheaderinfo.headerInfo, now | date_modify("+1 year").timestamp) %}
{% endif %}

1 Answer 1

1

Here's how I approach what I think you're trying to do. I have a global Notice setup, which includes a lightswitch field called showNotice, a heading called noticeTitle and a text field called noticeText.

Note I only check for the existence of the cookie. I'm not interested in the value, which is what you seem to be doing here: {% if checkCookieHeader != globalheaderinfo.headerInfo %}

Some cleaned up code from one of my sites:

{# Only show the notice at all if it's turned on in the CP #}
{% if notice.showNotice %}

{# Header bar shows all the time but the View button within shows only when the cookie has been set - controlled via CSS #}
<div id="notice-headerbar">
    <a href="#" id="notice-viewbutton" class="{{ not getCookie('noticed') ? 'hidden' }}">View</a>
    <h2>{{ notice.noticeTitle }}</h2>
</div>

{# The notice itself is only shown if the cookie has NOT been set. Controlled by CSS #}
<div id="noticeholder" style="display: {{ getCookie('noticed') ? 'none' : 'block' }}">
    <section id="noticetext">
        <a href="#" id="closenotice">&times;</a>                
        <p>{{ notice.popupNoticeText }}</p>
    </section>
</div>
{% endif %}

If they hit the close button, I set the cookie using Javascript. There's also the option to show the notice again by clicking the View button.

$('#closenotice').click(function(e) { 
    $('#noticeholder').slideUp();
    Cookies.set('noticed', 'yes');
    e.preventDefault();
    $('#notice-openbutton').removeClass('hidden').fadeIn();           
});
$('#notice-viewbutton').click(function(e) { 
    $('#noticeholder').slideDown();
    e.preventDefault();
    $(this).fadeOut();
});
1
  • Thank you Clive for your answer. It works now that when I change the entry via navigation, the info stays. But when I close it, it reappears on the next page. {% if globalheaderinfo.showHeaderNotice %} <div class="header-info" id="noticeholder" style="display: {{ getCookie('noticed') ? 'none' : 'block' }}"> {{ globalheaderinfo.headerInfo }} </div> {% endif %} $(document).ready(function() { $('#closenotice').click(function(e) { $('#noticeholder').slideUp(); Cookies.set('noticed', 'yes'); e.preventDefault(); }); })
    – ChuckLean
    Jan 20 at 9:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.