zz-shopify-components 0.36.1-beta.10 → 0.36.1-beta.11

package/assets/zz-components.css

@@ -522,6 +522,17 @@ body.zz-dialog-open {
   display: none;
   /* Chrome/Safari/Edge */
 }
+
 .zz-hidden {
   display: none !important;
 }
+
+/* 时间线 进度线 */
+.flex-layout-widget:not(:last-child) .timeline-step::after {
+  content: " ";
+  position: absolute;
+}
+
+.timeline-step {
+  position: relative;
+}

package/blocks/zz-accessories-item.liquid

@@ -65,6 +65,10 @@
       {% else %}
       href="javascript:void(0);"
     {% endif %}
+    {% if block.settings.btn_id contains '151-page' %}
+      data-visibility-rule="country_exclude"
+      data-visibility-countries="United States"
+    {% endif %}
   >
     {{ block.settings.btn_text }}
   </a>

package/blocks/zz-button-v2.liquid

@@ -9,7 +9,6 @@
       "label": "按钮文字",
       "default": "按钮"
     },
- 
     {
       "type": "select",
       "id": "function_type",
@@ -270,6 +269,17 @@
 
 
   <script>
+    {% if block.settings.custom_class == 'us-hide' %}
+      (() => {
+        const currentBlock = document.getElementById('shopify-block-{{ block.id }}')
+        if (currentBlock) {
+          console.log('us-hide',currentBlock)
+          currentBlock.setAttribute('data-visibility-rule', 'country_exclude')
+          currentBlock.setAttribute('data-visibility-countries', 'United States')
+        }
+      })()
+    {% endif %}
+    
     document.addEventListener('DOMContentLoaded', (event) => {
       const btn = document.getElementsByClassName('{{ btn_class }}')
       if(btn && btn[0]) {

package/blocks/zz-content-description.liquid

@@ -33,6 +33,12 @@
       ],
       "default": "400"
     },
+    {
+        "type": "checkbox",
+        "id": "italic",
+        "label": "是否斜体 (Italic)",
+        "default": false
+    },
     {
       "type": "header",
       "content": "PC Settings"
@@ -229,6 +235,7 @@
   mobile_text_align: block.settings.mobile_text_align,
   pc_font_line_height: block.settings.pc_font_line_height,
   mobile_font_line_height: block.settings.mobile_font_line_height,
+  italic: block.settings.italic,
   separate_display: block.settings.separate_display,
 %}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-shopify-components",
-  "version": "0.36.1-beta.10",
+  "version": "0.36.1-beta.11",
   "description": "Reusable Shopify components for theme projects",
   "keywords": [
     "shopify",

package/sections/zz-FAQ.liquid

@@ -30,6 +30,17 @@
   #shopify-section-{{ section.id }} .tw-daisy-collapse:last-child {
     border-bottom: none;
   }
+  #shopify-section-{{ section.id }} .row_content strong {
+    color: {{ section.settings.collapsible_highlight_color }};
+  }
+  #shopify-section-{{ section.id }} .row_content ul {
+    list-style: disc;
+    padding-left: 1.5em;
+    margin: 0;
+  }
+  #shopify-section-{{ section.id }} .row_content li {
+    display: list-item;
+  }
 
   @media screen and (min-width: 1024px) {
     #shopify-section-{{ section.id }} {
@@ -46,31 +57,50 @@
   {% if section.settings.is_exposure != false %}
     data-track-zz-exposure="true"
   {% endif %} 
-  data-zz-module-name="faq-id"
+  data-zz-module-name="faq"
   class="faq-custom max-lg:tw-px-[20px] lg:tw-mx-auto lg:tw-w-[95.3125vw] xl:tw-w-[1220px] fade-in-box">
-  {% render 'content-h2',
+  {% render 'zz-h2',
     title_color: section.settings.title_color,
     title: section.settings.title,
     title_mb: section.settings.title_mb,
-    class_name: 'tw-text-center lg:tw-text-[60px] xl:tw-text-[60px]'
+    class_name: 'faq-title tw-text-center lg:tw-text-[60px] xl:tw-text-[60px]'
   %}
   <div class="zz-faq-list tw-mt-[30px] lg:tw-mt-[5vw] xl:tw-mt-[64px] tw-px-[16px] tw-pb-[20px] lg:tw-px-[3.75vw] lg:tw-py-[4.6875vw] xl:tw-px-[48px] xl:tw-py-[60px] tw-rounded-[10px] lg:tw-rounded-[16px]">
     <div class="tw-daisy-join tw-daisy-join-vertical tw-w-full ">
-      {% for block in section.blocks %}
-        <div class="tw-daisy-collapse collapse-arrow tw-daisy-join-item tw-border-b tw-border-[#170B01]/15">
-          <input type="radio" name="my-accordion-{{ section.id }}" value="{{ forloop.index }}" {% if forloop.first %}checked data-last-checked="true"{% endif %} style="cursor: pointer;" /> 
-          <div class="tw-daisy-collapse-title tw-py-[20px] tw-pl-0 tw-pr-[40px] tw-text-[13px] lg:tw-text-[16px] tw-font-medium tw-leading-[1.5] lg:tw-leading-[30px]"
-          style="color:{{ section.settings.collapsible_title_color }}">
-            {{ block.settings.heading }}
+      {% if section.settings.faq_metaobjects != blank %}
+        {% for faq_item in section.settings.faq_metaobjects.faq_item.value %}
+          <div class="tw-daisy-collapse collapse-arrow tw-daisy-join-item tw-border-b {% if section.settings.collapsible_arrow_style == 'light' %} tw-border-[#ffffff]/15 {% else %} tw-border-[#000000]/15 {% endif %}">
+            <input type="radio" name="my-accordion-{{ section.id }}" value="{{ forloop.index }}" {% if forloop.first %}checked data-last-checked="true"{% endif %} style="cursor: pointer;" /> 
+            <div class="tw-daisy-collapse-title tw-py-[20px] tw-pl-0 tw-pr-[40px] tw-text-[13px] lg:tw-text-[16px] tw-font-medium tw-leading-[1.5] lg:tw-leading-[30px]"
+            style="color:{{ section.settings.collapsible_title_color }}">
+              {{ faq_item.title.value }}
+            </div>
+            <div class="tw-p-0 tw-pr-[40px] tw-daisy-collapse-content">
+              <div class="row_content tw-pb-[1rem] tw-text-[13px] lg:tw-text-[16px] tw-leading-[1.5] lg:tw-leading-[30px]"
+              style="color:{{ section.settings.collapsible_content_color }}">
+                {{ faq_item.description | metafield_tag }}
+              </div>
+            </div>
           </div>
-          <div class="tw-p-0 tw-pr-[40px] tw-daisy-collapse-content">
-            <div class="tw-pb-[1rem] tw-text-[13px] lg:tw-text-[16px] tw-leading-[1.5] lg:tw-leading-[30px]"
-            style="color:{{ section.settings.collapsible_content_color }}">
-              {{ block.settings.row_content }}
+        {% endfor %}
+      {% else %}
+        {% for block in section.blocks %}
+          <div class="tw-daisy-collapse collapse-arrow tw-daisy-join-item tw-border-b {% if section.settings.collapsible_arrow_style == 'light' %} tw-border-[#ffffff]/15 {% else %} tw-border-[#000000]/15 {% endif %}">
+            <input type="radio" name="my-accordion-{{ section.id }}" value="{{ forloop.index }}" {% if forloop.first %}checked data-last-checked="true"{% endif %} style="cursor: pointer;" /> 
+            <div class="tw-daisy-collapse-title tw-py-[20px] tw-pl-0 tw-pr-[40px] tw-text-[13px] lg:tw-text-[16px] tw-font-medium tw-leading-[1.5] lg:tw-leading-[30px]"
+            style="color:{{ section.settings.collapsible_title_color }}">
+              {{ block.settings.heading }}
+            </div>
+            <div class="tw-p-0 tw-pr-[40px] tw-daisy-collapse-content">
+              <div class="row_content tw-pb-[1rem] tw-text-[13px] lg:tw-text-[16px] tw-leading-[1.5] lg:tw-leading-[30px]"
+              style="color:{{ section.settings.collapsible_content_color }}">
+                {{ block.settings.row_content }}
+              </div>
             </div>
           </div>
-        </div>
-      {% endfor %}
+        {% endfor %}
+      {% endif %}
+      
     </div>
   </div>
 </div>
@@ -126,7 +156,7 @@ document.addEventListener('DOMContentLoaded', () => {
     {
        "type": "color",
       "id": "content_bg_color",
-      "default": "#001630",
+      "default": "#191919",
       "label": "内容背景色"
     },
     {
@@ -145,6 +175,12 @@ document.addEventListener('DOMContentLoaded', () => {
       "default": "#FFFFFF",
       "label": "标题颜色"
     },
+    {
+      "type": "metaobject",
+      "id": "faq_metaobjects",
+      "label": "FAQ 元数据列表(Richtext)",
+      "metaobject_type": "faq_richtext_list"
+    },
     {
       "type": "select",
       "id": "collapsible_arrow_style",
@@ -160,13 +196,19 @@ document.addEventListener('DOMContentLoaded', () => {
       "id": "collapsible_title_color",
       "label": "折叠行标题颜色",
       "default": "#FFFFFF",
-    },
-       {
+    },   
+    {
       "type": "color",
       "id": "collapsible_content_color",
       "label": "折叠行内容颜色",
       "default": "#666666",
     },
+    {
+      "type": "color",
+      "id": "collapsible_highlight_color",
+      "label": "折叠行内容颜色高亮颜色",
+      "default": "#ffffff",
+    },
     {
       "type": "header",
       "content": "t:sections.all.padding.section_padding_heading"

package/sections/zz-flex-layout-section.liquid

@@ -216,6 +216,12 @@
       "id": "visibility_countries",
       "label": "国家/Market 列表",
       "info": "支持国家ISO码与国家选择器中国家配置"
+    },
+    {
+      "type": "checkbox",
+      "id": "hide_site_footer",
+      "label": "隐藏全站 Footer",
+      "default": false
     }
   ],
   "blocks": [
@@ -293,6 +299,12 @@
       {% endunless %}
     }
   }
+
+  {% if section.settings.hide_site_footer %}
+    .footer {
+      display: none !important;
+    }
+  {% endif %}
 </style>
 {% liquid
   assign current_iso_code = localization.country.iso_code

package/sections/zz-navigation-tab-v3.liquid

@@ -9,6 +9,13 @@
       "label": "背景颜色",
       "default": "#000000"
     },
+    {
+      "type": "number",
+      "id": "mobile_top_offset",
+      "label": "移动端顶部偏移（px）",
+      "default": 50,
+      "info": "移动端导航栏吸顶时距离页面顶部的距离。"
+    },
     {
       "type": "number",
       "id": "show_after_scroll_vh",
@@ -116,7 +123,7 @@
   <div class="zz-navigation-pc-tab max-lg:tw-hidden lg:tw-h-[64px] tw-flex tw-items-center tw-justify-between tw-max-w-[1660px] lg:tw-px-[20px] tw-w-full tw-mx-auto">
     <img 
       class="zz-navigation-pc-logo tw-w-[134px] tw-h-[12px]"
-      src="{{ section.settings.icon | image_url: width: 200 }}" alt="{{ section.settings.icon.alt }}" width="134" height="12">
+      src="{{ section.settings.icon | image_url: width: 1000 }}" alt="{{ section.settings.icon.alt }}" width="134" height="12">
     <div class="zz-navigation-pc-item-box tw-flex tw-items-center  tw-overflow-x-scroll tw-ml-[40px] tw-pr-[60px]">
       {%- if section.blocks.size > 0 -%}
         {% for block in section.blocks %}
@@ -139,7 +146,7 @@
 
     </div>
     {% if section.settings.btn_text != blank %}
-      <div class="tw-flex-shrink-0 tw-relative">
+      <div class="tw-flex-shrink-0 tw-relative" {% if section.settings.tab_tracking_category == '151' %}data-visibility-rule="country_exclude" data-visibility-countries="United States"{% endif %}>
       {%- if section.blocks.size > 0 -%}
         <div class="cover-box tw-absolute tw-top-0 tw-left-[-50px] tw-w-[50px] tw-h-full">&nbsp;</div>
           
@@ -164,8 +171,8 @@
   <div class="mb-navigation-box-item zz-navigation-mb-item-box tw-flex tw-items-center tw-gap-[24px] tw-pr-[120px]  tw-h-[52px] tw-overflow-x-scroll">
     {%- if section.blocks.size == 0 -%}
       <img 
-        class="zz-navigation-mb-logo tw-w-[134px] tw-h-[12px]"
-        src="{{ section.settings.icon | image_url: width: 200 }}" alt="{{ section.settings.icon.alt }}" width="134" height="12">
+        class="zz-navigation-mb-logo tw-w-[134px] tw-h-[12px] tw-object-contain"
+        src="{{ section.settings.icon | image_url: width: 1000 }}" alt="{{ section.settings.icon.alt }}" width="134" height="12">
     {%- endif -%}
     {% for block in section.blocks %}
       <div 
@@ -181,7 +188,7 @@
       </div>
     {% endfor %}
   </div>
-  <div class="tw-flex-shrink-0 tw-relative">
+  <div class="tw-flex-shrink-0 tw-relative" {% if section.settings.tab_tracking_category == '151' %}data-visibility-rule="country_exclude" data-visibility-countries="United States"{% endif %}>
     {%- if section.blocks.size > 0 -%}
     <div class="cover-box tw-absolute tw-top-0 tw-left-[-40px] tw-w-[40px] tw-h-full">&nbsp;</div>
     {%- endif -%}
@@ -201,6 +208,7 @@
     document.addEventListener('DOMContentLoaded', (event) => {
       const isDesktop = window.innerWidth > 1024;
       const currentSection = document.getElementById('shopify-section-{{section.id}}');
+      const mobileTopOffset = {{ section.settings.mobile_top_offset | default: 50 }};
       
       // 滚动显示逻辑
       const showAfterVh = {{ section.settings.show_after_scroll_vh | default: 0 }};
@@ -301,8 +309,7 @@
               if(isDesktop) {
                 currentSection.style.top = iptipsBoxHeight + 'px';
               } else {
-                // 后期移动端要加上导航栏的高度 50
-                currentSection.style.top = iptipsBoxHeight  + 50 + 'px';
+                currentSection.style.top = iptipsBoxHeight + mobileTopOffset + 'px';
               }
               
             } else {
@@ -310,7 +317,7 @@
                if(isDesktop) {
                 currentSection.style.top = '0px';
                } else {
-                currentSection.style.top = '50px';
+                currentSection.style.top = mobileTopOffset + 'px';
                }
             }
           } else {
@@ -442,7 +449,7 @@
    @media screen and (max-width: 1024px) {
     #shopify-section-{{ section.id }} {
       z-index: 499;
-      top: 50px;
+      top: {{ section.settings.mobile_top_offset | default: 50 }}px;
     }
     #shopify-section-{{ section.id }} .{{ btn_class }} {
       height: 28px;
@@ -478,4 +485,4 @@
   }
 
  
-</style>
+</style>

package/snippets/zz-spoke.liquid

@@ -23,7 +23,7 @@
   logo_alt: 图标 alt
 {% endcomment %}
 
-{% if pc_video != blank or pc_image != black %}
+{% if force_media or pc_video != blank or pc_image != blank %}
   {% assign only_content = false %}
   {% assign class_name = class_name
     | default: 'tw-w-[162px] tw-h-[271px] lg:tw-w-[351px] lg:tw-h-[550px]'
@@ -60,7 +60,7 @@
   {% if only_content == false %}
     {% comment %} 视频/图片 {% endcomment %}
     <div
-      class='zz-spoke-block-media tw-w-full {{media_class}}'
+      class='zz-spoke-block-media tw-relative tw-w-full {{media_class}}'
     >
       {% if pc_video != blank %}
         {% render 'zz-video',
@@ -81,6 +81,17 @@
           mb_width: 480
         %}
       {% endif %}
+      {% if logo != blank %}
+        <div class='tw-absolute tw-left-[50%] -tw-translate-x-[50%] tw-bottom-[10px] tw-z-[1] {{ logo_class }}'>
+          {% render 'zz-img',
+            pc_image: logo,
+            mb_image: logo,
+            image_alt: logo_alt,
+            pc_width: 120,
+            mb_width: 120
+          %}
+        </div>
+      {% endif %}
       {% comment %}
         {% if user_intro != blank %}
           <div class='tw-absolute tw-left-0 tw-right-0 tw-bottom-0  lg:tw-top-0'>
@@ -119,7 +130,7 @@
       </div>
     {% endif %}
   </div>
-  {% if logo != blank %}
+  {% if only_content and logo != blank %}
     <div class='tw-absolute tw-left-[50%] -tw-translate-x-[50%] tw-bottom-[10px] {{ logo_class }}'>
       {% render 'zz-img',
         pc_image: logo,