Cookie-Plugin: Why does Cookies get closing by change entry via navigation / menu?

Question

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 %}

Answer 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();
});