Shopify Liquid - Держите панель объявлений закрытой

Question

Я создал настраиваемую панель объявлений с кнопкой закрытия на нашем веб-сайте Shopify. Следующий код сценария закрывает панель:

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

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

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

Проблема в том, что мне нужно, чтобы он оставался закрытым, если пользователь решает обновить sh страницу или открыть другие страницы на веб-сайте. Панель объявлений продолжает расти. И я хочу реализовать флажок настройки темы, например:

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

У меня есть идея, как это реализовать, но я не знаю, как сделать сценарий для управления событием щелчка с помощью этого оператора If.

Любая помощь приветствуется.

Answer 1

Получил работу с помощью следующего кода. ВНИМАНИЕ: может быть немного неряшливо, лол. В моем файле Announcement-Bar.liquid, непосредственно перед {% 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 -%}

Любые советы о том, как, возможно, сделать

localStorage.setItem('barDismissed', true);

истекшим через определенное время, или может быть, используя куки? Как мне это реализовать?

Я попытался заменить localStorage на файлы cookie, но теперь это помогло. Или, может быть, принудительно объявить о внесении изменений. Причина этого в том, что мы можем предоставить важную информацию для уведомления об объявлении, и посетители должны видеть эту информацию.

Или было бы проще создать кнопку свертывания, чтобы не полностью закрыть панель, а вместо этого просто сверните его, чтобы посетители могли открыть его снова?

Мысли, пожалуйста.

Answer 2

Представленная вами идея не сработает по 2 причинам.

1. Liquid - это язык шаблонов на стороне сервера, и вы не можете повторно отрендерить его после некоторого взаимодействия с пользователем. Как после закрытия панели объявлений в вашем сценарии.
2. Настройки темы являются глобальными и предназначены для настройки параметров для администратора. Вы не можете сохранить настройки конечного пользователя в настройках вашей темы.

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

Это будет не показывать раздел объявлений для любого пользователя.

Итак, теперь одним из возможных решений является сохранение информации на стороне клиента, которым в данном случае будет браузер. Вы можете использовать хранилище браузера или файлы cookie.

Пример кода с использованием локального хранилища

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

Это проверяет, существует ли свойство barDismissed в Local Storage , затем скройте панель объявлений. Если нет, то отобразите панель объявлений и, если пользователь закрывается, сохраните настройки.

Вы можете настроить код для использования Session Storage или Cookies .