Shopify Question posted in
The Shopify help center can be found here.

Shopify Liquid – Keep Anouncement Bar Closed

I have created a custom Announcement Bar with a Close Button on our Shopify Website.
The following script code closes the bar:

<script>
$( document ).ready(function() {

if ($('.announcement-bar').length){

$( '.x' ).click(function() {
    $(".announcement-bar").remove();
    $("body").addClass("no-announcement-bar");
});
}
});
</script>

Problem is I need it to stay closed if the user decides to refresh the page, or open other pages on the website. The Announcement Bar keeps coming back up.
And I want to implement a theme setting checkbox something like:

{%- if section.settings.show_everytime == false -%}
then don't show the bar after close
{%- else -%}
show bar everytime

I have an idea how to implement this, but don’t know how to do the script to manage the click event with this If statement.

Any help appreciated.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Got it working with the following code. WARNING: Might be a bit messy, lol. Within my Announcement-Bar.liquid file, just before {% shema %}:

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

{%- if section.settings.show_again == true -%}
   <script>
     $( document ).ready(function() {

     if ($('.announcement-bar').length){

       $( '.x' ).click(function() {
       $(".announcement-bar").remove();
       $("body").addClass("no-announcement-bar");
      });
     }
    });
   </script>
{%- else -%}
  <script>
    $(document).ready(function() {
    if ($('.announcement-bar').length) {

    if (localStorage.getItem('barDismissed')) {
        $(".announcement-bar").remove();
        $("body").addClass("no-announcement-bar");
    } else {
        $('.x').click(function() {
            $(".announcement-bar").remove();
            $("body").addClass("no-announcement-bar");
            localStorage.setItem('barDismissed', true);
        });  
       }
      }
     });
    </script>
  {%- endif -%}

    Any tips on how to maybe make the

    localStorage.setItem('barDismissed', true);

    expire after a certain amount of time, or maybe using cookies? How would I implement this?

    I have tried replacing localStorage to Cookies, but to now avail. Or maybe force the announcement when a change is made. The reason for this, is we might give important notice info on the Announcement and need to have visitors see this info.

    Or would it be easier to create a minimize button, to not fully close the bar, but instead just minimize it, so visitors can open it again?

    Thoughts, please.


  2. 0

    The idea your presented is not going to work due to 2 reasons.

    1. Liquid is a server side templating language and you cannot re-render it after some user interaction. Like after closing Announcement bar in your scenario.
    2. Theme settings are global and for option configurations fro admin. You cannot save the end user preferences in your theme settings.

    {%- if section.settings.show_everytime == false -%}

    This will not show the announcement section for any user.

    So now a possible solution is to save information on client side, that will be the browser in this case. You can use browser storage or cookies.

    Example code using Local Storage

    <script>
$(document).ready(function() {
    if ($('.announcement-bar').length) {

        if (localStorage.getItem('barDismissed')) {
            $(".announcement-bar").remove();
            $("body").addClass("no-announcement-bar");
        } else {
            $('.x').click(function() {
                $(".announcement-bar").remove();
                $("body").addClass("no-announcement-bar");
                localStorage.setItem('barDismissed', true);
            });  
        }
    }
});
</script>

    This checks if barDismissed property exists in Local Storage, then hide the Announcement bar. If not then show the announcement bar and if user closes, then save the preference.

    You can adjust the code to use Session Storage or Cookies.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search