sessionzurb-foundationsession-cookieszurb-foundation-6

Make Close Button Session Persistent


I'm using Foundation 6 to make my websites frontend. Above the header of my website I want to show a promotionbar, which should be closeable / dismisable.

Therefore I'm using a close-button, coming out of the box with Foundation, to hide / dismis the promotionbar.

Now I want, that if the user closes / hides the promotionbar, that (for the rest of the session) the bar will not be shown anymore.

As the closebutton just "hides" the element, the bar will be shown again if I go to another subpage (for example, coming from a blogpost -> going back to the frontpage).

Is there a simple way to keep the bar hidden, after I've clicked on the closebutton for the rest of the session?

If the user stops by another day, the bar should be shown again.

https://foundation.zurb.com/sites/docs/close-button.html

Thank you in advance!


Solution

  • Thank you @daniel-ruf - I've solved it the following way if anybody is looking for a solution

    1. Give the promotionbar an unique ID (id="promotionbar")
    2. Add a class to the promotionbar (class="hider")
    3. Add display:none, to the class via CSS File (.hider {display:none;})
    4. Add onClick action the closebutton

      button class="close-button" data-close="" onclick="promotionhide()">×

    5. in App.js add

      var cacheKeyNoPromo = 'promotionhide';

      var nopromo = readFromCache(cacheKeyNoPromo); if (!nopromo) { document.getElementById("promotionbar").classList.remove("hider"); }

      var promotionhide = function() { writeToCache(cacheKeyNoPromo, true, 24 * 60 * 60 * 1000 /* 1D */); document.getElementById("promotionbar").classList.add("hider"); };

    works for me.