Shopify Liquid - 保持公告栏关闭

Question

我在我们的 Shopify 网站上创建了一个带有关闭按钮的自定义公告栏。 以下脚本代码关闭栏：

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

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

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

如果用户决定刷新页面或打开网站上的其他页面，我需要它保持关闭状态。公告栏不断恢复。 我想实现一个主题设置复选框，例如：

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

我知道如何实现这一点，但不知道如何使用该 If 语句执行脚本来管理点击事件。

任何帮助表示赞赏。

Answer 1

由于两个原因，您提出的想法不会奏效。

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>

这会检查Local Storage 中是否存在barDismissed 属性，然后隐藏公告栏。如果没有，则显示公告栏，如果用户关闭，则保存首选项。

您可以调整代码以使用Session Storage 或Cookies。

Answer 2

用下面的代码让它工作。警告：可能有点乱，哈哈。 在我的 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);

在一定时间后过期，或者可能使用 cookie？ 我将如何实现它？

我尝试将 localStorage 替换为 Cookie，但现在可以使用。 或者可能在进行更改时强制宣布。这样做的原因是我们可能会在公告中提供重要的通知信息，并且需要让访问者看到这些信息。

或者创建一个最小化按钮是否更容易，而不是完全关闭栏，而是将其最小化，以便访问者可以再次打开它？

请考虑一下。