Closed Cart Message Back After Refresh - Help

Store Design
1

Hey guys,

We have added a message on the cart drawer with a “X” close button.

It works perfectly but if a customer either refreshes their browser or goes onto a new page, the message reappears in the cart drawer and it needs to be closed again by them.

How can we get it so that after it’s closed, it either never displays again or it won’t show for “n” amount of days etc.?

The code is below attached below and here is the preview link: https://eyx9yppnykxbodoq-22594233.shopifypreview.com

All support is greatly appreciated!

Many thanks,

George


  

  
  [PICK AND MIX](https://proteinpackage.co.uk/collections/frontpage
) 10+ INDIVIDUAL PRODUCTS WHICH HAVE THE {% render 'flair-product-badges', product: item.product, flair_layout: 'Cart Inline' %} TAG FOR UP TO 15% OFF. [FULL BOXES](https://proteinpackage.co.uk/collections/boxes
) ARE ALREADY DISCOUNTED.
  

  


.pick-and-mix-cart #close {
    float:right;
    display:inline-block;
    padding:0px;
}

Screenshot 2022-08-25 at 16.07.24 (1) (1).png
Screenshot 2022-08-25 at 16.07.24 (1) (1).png766×170 16.9 KB

2

Hi @George_Greenhil ,

You can use Window localStorage to store the date when the close button is clicked and then check to display it. Refer https://www.w3schools.com/jsref/prop_win_localstorage.asp

It will include the following steps:

  • Step 1: Catch the close button click event to pass the variable to localStorage.

  • Step 2: Check the localStorage variable condition, if it is met, it will be displayed on load, otherwise will add an event to remove it.

It will require you to have experience in Javascript, if it is difficult, you can hire an expert for it.

Hope it helps!