我的代码中有 2 个可选择 on/off 的公告栏，如何启用它们并从一个过渡到另一个？

Question

我在 Shopify 部分创建了 2 个公告栏。我可以 select 任一个，而且它们工作得很好。但是，我想让它们都在从一个到另一个的同一栏过渡中启用。

这是两个公告栏。我是否需要添加某种转换代码才能使 .show_announcement 转换为 .show_announcement2？

    {%- if section.settings.show_announcement -%}
  {%- if section.settings.home_page_only == false or template.name == 'index' -%}

    {%- if section.settings.link == blank -%}
      <div class="announcement-bar">
    {%- else -%}
      <a href="{{ section.settings.link }}" >
    {%- endif -%}

        <p class="announcement-bar__message">{{ section.settings.text | escape }}</p>

    {%- if section.settings.link == blank -%}            
      </div>
    {%- else -%}
      </a>
    {%- endif -%}

  {%- endif -%}
{%- endif -%}

{%- if section.settings.show_announcement2 -%}
  {%- if section.settings.home_page_only == false or template.name == 'index' -%}

    {%- if section.settings.link2 == blank -%}
      <div class="announcement-bar">
    {%- else -%}
      <a href="{{ section.settings.link2 }}" >
    {%- endif -%}

        <p class="announcement-bar__message2">{{ section.settings.text2 | escape }}</p>

    {%- if section.settings.link2 == blank -%}            
      </div>
    {%- else -%}
      </a>
    {%- endif -%}

  {%- endif -%}
{%- endif -%}


<style>
  .announcement-bar {
    background-color: {{ section.settings.announcement_bar_color }};
    text-align: center;
    text-decoration: none;   
    display: inline-block;
    margin-bottom: 0;    
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
  }
  .announcement-bar__message {
    background-color: {{ section.settings.announcement_bar_color }};
    text-align: center;
    font-size: inherit;
    font-weight: 700;
    padding: 5px;
    margin: 0;
    color: {{ section.settings.announcement_bar_text_color }};
  }
  .announcement-bar2 {
    background-color: {{ section.settings.announcement_bar_color2 }};
    text-align: center;
    text-decoration: none;   
    display: inline-block;
    margin-bottom: 0;    
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
  } 
  .announcement-bar__message2 {
    background-color: {{ section.settings.announcement_bar_color2 }};
    text-align: center;
    font-size: inherit;
    font-weight: 700;
    padding: 5px;
    margin: 0;
    color: {{ section.settings.announcement_bar_text_color2 }};
  }
  
</style>

{% schema %}
{
  "name": "Announcement bar",
  "settings": [
    {
      "type": "checkbox",
      "id": "home_page_only",
      "label": "Home page only",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_announcement",
      "label": "Show announcement",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_announcement2",
      "label": "Show announcement 2",
      "default": false
    },
    {
      "type": "color",
      "id": "announcement_bar_color",
      "label": "Background color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "announcement_bar_text_color",
      "label": "Text color",
      "default": "#ffffff"
    },
    {
      "type": "text",
      "id": "text",
      "label": "Announcement text 1",
      "default": "Announce something here"
    },
    {
      "type": "url",
      "id": "link",
      "label": "Announcement link 1"
    },
    {
      "type": "color",
      "id": "announcement_bar_color2",
      "label": "Background color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "announcement_bar_text_color2",
      "label": "Text color",
      "default": "#ffffff"
    },
    {
      "type": "text",
      "id": "text2",
      "label": "Announcement text 2",
      "default": "Announce something here"
    },
    {
      "type": "url",
      "id": "link2",
      "label": "Announcement link 2"
    }
  ]
}
{% endschema %}

Answer 1

像这样

{%- if section.settings.show_announcement -%}
  {%- if section.settings.home_page_only == false or template.name == 'index' -%}

    <div class="my-slider">

    {%- if section.settings.link == blank -%}
      <div class="announcement-bar">
    {%- else -%}
      <div><a href="{{ section.settings.link }}" >
    {%- endif -%}

        <p class="announcement-bar__message">{{ section.settings.text | escape }}</p>

    {%- if section.settings.link == blank -%}            
      </div>
    {%- else -%}
      </a></div>
    {%- endif -%}

    {%- if section.settings.link2 == blank -%}
      <div class="announcement-bar">
    {%- else -%}
      <div><a href="{{ section.settings.link2 }}" >
    {%- endif -%}

        <p class="announcement-bar__message2">{{ section.settings.text2 | escape }}</p>

    {%- if section.settings.link2 == blank -%}            
      </div>
    {%- else -%}
      </a></div>
    {%- endif -%}


    </div>
  {%- endif -%}
{%- endif -%}


<style>
  .announcement-bar {
    background-color: {{ section.settings.announcement_bar_color }};
    text-align: center;
    text-decoration: none;   
    display: inline-block;
    margin-bottom: 0;    
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
  }
  .announcement-bar__message {
    background-color: {{ section.settings.announcement_bar_color }};
    text-align: center;
    font-size: inherit;
    font-weight: 700;
    padding: 5px;
    margin: 0;
    color: {{ section.settings.announcement_bar_text_color }};
  }
  .announcement-bar2 {
    background-color: {{ section.settings.announcement_bar_color2 }};
    text-align: center;
    text-decoration: none;   
    display: inline-block;
    margin-bottom: 0;    
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
  } 
  .announcement-bar__message2 {
    background-color: {{ section.settings.announcement_bar_color2 }};
    text-align: center;
    font-size: inherit;
    font-weight: 700;
    padding: 5px;
    margin: 0;
    color: {{ section.settings.announcement_bar_text_color2 }};
  }
  
</style>

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script type="text-/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>


<script>
  $('.my-slider').slick();

</script>

{% schema %}
{
  "name": "Announcement bar",
  "settings": [
    {
      "type": "checkbox",
      "id": "home_page_only",
      "label": "Home page only",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_announcement",
      "label": "Show announcement",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_announcement2",
      "label": "Show announcement 2",
      "default": false
    },
    {
      "type": "color",
      "id": "announcement_bar_color",
      "label": "Background color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "announcement_bar_text_color",
      "label": "Text color",
      "default": "#ffffff"
    },
    {
      "type": "text",
      "id": "text",
      "label": "Announcement text 1",
      "default": "Announce something here"
    },
    {
      "type": "url",
      "id": "link",
      "label": "Announcement link 1"
    },
    {
      "type": "color",
      "id": "announcement_bar_color2",
      "label": "Background color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "announcement_bar_text_color2",
      "label": "Text color",
      "default": "#ffffff"
    },
    {
      "type": "text",
      "id": "text2",
      "label": "Announcement text 2",
      "default": "Announce something here"
    },
    {
      "type": "url",
      "id": "link2",
      "label": "Announcement link 2"
    }
  ]
}
{% endschema %}

我的代码中有 2 个可选择 on/off 的公告栏，如何启用它们并从一个过渡到另一个？

I have 2 announcement bars in my code that are on/off selectable, how can I enable both of them and transition from one to the other?

html

css

if-statement

liquid

shopify