zz-shopify-components 0.25.1-beta.8 → 0.26.0

package/assets/zz-modal.js

@@ -80,7 +80,7 @@
       .panel-inner {
         transform-origin: center center;
         transform: translateY(8px) scale(0.98);
-        max-height: var(--zz-modal-max-height, 100vh);
+        max-height: var(--zz-modal-max-height, 85vh);
       }
     }
 
@@ -195,6 +195,11 @@
       this._closeBtn = shadow.querySelector('[data-zz-modal-close]');
       this._slotHeader = shadow.querySelector('slot[name="header"]');
       this._slotFooter = shadow.querySelector('slot[name="footer"]');
+      this._closeIconPath = shadow.querySelector('.close-btn svg path');
+
+      if (!this._closeIconPath) return;
+      const color = this.getAttribute('close-icon-color') || 'currentColor';
+      this._closeIconPath.setAttribute('stroke', color);
     }
 
     connectedCallback() {

package/blocks/zz-flex-layout-block.liquid

@@ -262,6 +262,12 @@
       "type": "header",
       "content": "统计相关"
     },
+    {
+      "type": "text",
+      "id": "module_name",
+      "label": "模块名称",
+      "info": "用于定位到本模块，可多个section使用同一名称"
+    },
    {
       "type": "text",
       "id": "module_id",
@@ -643,6 +649,9 @@
 </style>
 
 <div 
+  {% if block.settings.module_name != blank %}
+    data-zz-module-name="{{ block.settings.module_name }}"
+  {% endif %}
   {% if block.settings.module_id != blank %}
       data-track-zz-block="{{ block.settings.module_id }}"
     {% endif %}

package/blocks/zz-price-bundle.liquid

@@ -0,0 +1,190 @@
+{% assign product = all_products[block.settings.product] %}
+{% assign variant_id = block.settings.variant_id | times: 1 %}
+{% assign variant = product.variants | where: 'id', variant_id | first %}
+
+{% if block.settings.price_type == 'hand' %}
+    {% assign price = block.settings.price | times: 100 %}
+    {% assign before_price = block.settings.before_price | times: 100 %}
+    {% assign discount_value = before_price | minus: price %}
+{% else %}
+    {% assign discount_value = variant.compare_at_price | minus: variant.price %}
+{% endif %}
+
+
+
+
+{% assign btn_class = 'zz-Price-Bundle-' | append: block.id %}
+
+<div class="zz-price-bundle-bg tw-relative tw-aspect-[59/33] tw-rounded-t-[10px] lg:tw-rounded-t-[16px] tw-overflow-hidden">
+    {% render 'zz-img',
+        pc_image: block.settings.desktop_bg_image,
+        mb_image: block.settings.mobile_bg_image,
+        image_alt: block.settings.heading | escape,
+        class_name: "zz-price-bundle-bg-image tw-w-full tw-h-full tw-object-cover",
+    %}
+    <div class="tw-absolute lg:tw-bottom-[35px] tw-left-[24px] tw-right-[24px] tw-bottom-[16px] lg:tw-left-[30px] lg:tw-right-[30px]">
+        <div class="tw-w-full">
+            <p class="tw-font-bold tw-text-[28px] tw-leading-1 tw-text-white">{{ block.settings.heading }}</p>
+            {% if block.settings.price_type == 'hand' %}
+                <p class='tw-font-bold tw-text-left tw-italic tw-leading-[1.2] tw-text-[28px] lg:tw-text-[40px] tw-text-white'>
+                    {{ block.settings.price | times: 100 | money_without_trailing_zeros }}
+                </p>
+            {% else %}
+                <p class='tw-font-bold tw-text-left tw-italic tw-leading-[1.2] tw-text-[28px] lg:tw-text-[40px] tw-text-white'>
+                    {{ variant.price | money_without_trailing_zeros }}
+                </p>
+            {% endif %}
+            
+            <div class="tw-flex tw-justify-between">
+                <div>
+                    {% if block.settings.price_type == 'hand' %}
+                        <span class='tw-italic tw-line-through tw-text-[12px] lg:tw-text-[20px] tw-text-[#FFFFFFB2]'>
+                            {{ block.settings.before_price | times: 100 | money_without_trailing_zeros }}
+                        </span>
+                    {% else %}
+                        <span class='tw-italic tw-line-through tw-text-[12px] lg:tw-text-[20px] tw-text-[#FFFFFFB2]'>
+                            {{ variant.compare_at_price | money_without_trailing_zeros }}
+                        </span>
+                    {% endif %}
+
+                    {% if block.settings.price_type == 'hand' %}
+                        <span class='tw-border-white tw-text-white tw-ml-[8px] tw-border-[1px] tw-py-[4px] tw-pr-[6px] tw-pl-[6px] tw-text-[10px] lg:tw-text-[14px] tw-leading-[1.3] tw-border-solid tw-rounded-[4px]'>
+                            SAVE {{ discount_value | money_without_trailing_zeros }}
+                        </span>
+                    {% else %}
+                        <span class='tw-font-bold tw-text-[20px] tw-text-black'>
+                            {{ discount_value | money_without_trailing_zeros }}
+                        </span>
+                    {% endif %}
+                </div>
+                {% render 'zz-button',
+                   
+                    type: 'primary',
+                    color: 'white',
+                    text: block.settings.btn_text,
+                    size: 'medium',
+                    class_name: btn_class,
+                    btn_id: block.settings.btn_id
+                %}
+            </div>
+        </div>
+        
+    </div>
+
+</div>
+{% render 'zz-img',
+      pc_image: block.settings.desktop_bundle_image,
+      mb_image: block.settings.mobile_bundle_image,
+      image_alt: block.settings.heading | escape,
+      class_name: "tw-w-full tw-h-auto tw-object-cover tw-rounded-b-[10px] lg:tw-rounded-b-[16px] ",
+  %}
+{% schema %}
+{
+  "name": "Price Bundle Card",
+  "class": "zz-price-bundle",
+  "settings": [
+    {
+      "type": "text",
+      "id": "heading",
+      "label": "bundle标题",
+    },
+    {
+      "type": "select",
+      "id": "price_type",
+      "label": "价格设置",
+      "options": [
+        { "value": "hand", "label": "手动设置，官网" },
+        { "value": "auto", "label": "自动设置，站点" },
+
+      ],
+      "default": "auto",
+      "info": "自动设置根据产品自动调整，适合站点"
+    },
+    {
+      "type": "product",
+      "id": "product",
+      "label": "Product",
+      "info": "选择产品，不适合官网",
+    },
+    {
+      "type": "text",
+      "id": "variant_id",
+      "label": "Variant ID",
+      "placeholder": "变体ID",
+      "info": "输入变体ID，变体ID可以在产品编辑页面查看，不适合官网"
+    },
+    {
+      "type": "number",
+      "id": "price",
+      "label": "价格",
+      "info": "手动设置时使用"
+    },
+     {
+      "type": "number",
+      "id": "before_price",
+      "label": "划线价格",
+      "info": "手动设置时使用"
+    },
+    {
+      "type": "image_picker",
+      "id": "desktop_bg_image",
+      "label": "PC端背景图片"
+    },
+    {
+      "type": "image_picker",
+      "id": "mobile_bg_image",
+      "label": "移动端背景图片"
+    },
+    {
+      "type": "image_picker",
+      "id": "desktop_bundle_image",
+      "label": "PC端bundle图片"
+    },
+    {
+      "type": "image_picker",
+      "id": "mobile_bundle_image",
+      "label": "移动端bundle图片"
+    },
+    {
+      "type": "text",
+      "id": "btn_text",
+      "label": "按钮文案",
+      "default": "Buy Now"
+    },
+     {
+      "type": "textarea",
+      "id": "links",
+      "label": "Sites Link Map",
+      "info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开（ 冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接                    EG: Canada: https://hoverair.com/   default: https://hoverair.com/ ",
+    },
+      {
+      "type": "text",
+      "id": "btn_id",
+      "label": "按钮id",
+      "info": "按钮的唯一id，用于代码控制、埋点统计等"
+    },
+   
+  ],
+  "presets": [
+    {
+      "name": "Price Bundle Card"
+    }
+  ]
+}
+
+
+{% endschema %}
+
+
+  <script>
+    document.addEventListener('DOMContentLoaded', (event) => {
+      const btn = document.getElementsByClassName('{{ btn_class }}')
+      if(btn && btn[0]) {
+        
+          if(window.bindSiteJump) {
+            bindSiteJump(btn[0], {{ block.settings.links | json }})
+          }
+      }
+
+    })
+  </script>

package/blocks/zz-swiper-blog-item.liquid

@@ -15,6 +15,10 @@
     #shopify-block-{{block.id}} {
       width: 340px;
     }
+    #shopify-block-{{block.id}}.swiper-slide-active {
+      width: 400px;
+    }
+    
     #shopify-block-{{block.id}} .image-video-box {
       width: 100%;
       aspect-ratio: 400 / 225;
@@ -25,6 +29,10 @@
     #shopify-block-{{block.id}} {
       width: 400px;
     }
+    #shopify-block-{{block.id}}.swiper-slide-active {
+      width: 480px;
+    }
+    
   }
 
 

package/blocks/zz-swiper-comment-item.liquid

@@ -36,8 +36,8 @@
     {% assign nickname_color = block.settings.text_color
           | color_modify: 'alpha', 0.6
         %}
-    <p class="zz-title-comment-item-name tw-text-[14px] tw-ml-[12px] tw-font-semibold" style="color: {{ block.settings.text_color }};">{{ block.settings.name }}</p>
-    <p class="zz-title-comment-item-nickname tw-text-[14px] tw-ml-[12px]" style="color: {{ nickname_color }};">{{ block.settings.nickname }}</p>
+    <p class="zz-title-comment-item-name tw-leading-[1.2] tw-text-[14px] tw-ml-[12px] tw-font-semibold" style="color: {{ block.settings.text_color }};">{{ block.settings.name }}</p>
+    <p class="zz-title-comment-item-nickname tw-leading-[1.5] tw-text-[14px] tw-ml-[12px]" style="color: {{ nickname_color }};">{{ block.settings.nickname }}</p>
   </div>
 </div>
 

package/blocks/zz-swiper-expand-item.liquid

@@ -51,7 +51,7 @@
 </style>
 
 
-   <div class="expand-btn tw-cursor-pointer tw-absolute tw-top-[20px] tw-right-[20px] max-lg:tw-top-[30px] tw-z-10">
+   <div class="expand-btn tw-cursor-pointer tw-absolute tw-top-[20px] tw-right-[20px] lg:tw-top-[30px] tw-z-10">
     <svg class="expand-icon" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
       <foreignObject x="-12" y="-12" width="72" height="72"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(6px);clip-path:url(#bgblur_0_1547_3589_clip_path);height:100%;width:100%"></div></foreignObject><rect data-figma-bg-blur-radius="12" width="48" height="48" rx="24" fill="black" fill-opacity="0.3"/>
       <path d="M16 24H32" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
@@ -109,10 +109,10 @@
   
   <div class="tw-absolute tw-bottom-0 tw-left-0 tw-right-0 tw-box-border tw-pl-[20px] tw-pr-[20px] tw-pb-[20px] lg:tw-pl-[30px] lg:tw-pr-[30px] lg:tw-pb-[30px]">
      
-    <div class='tw-font-normal tw-text-white tw-text-[16px]'>
+    <div class='tw-font-normal tw-text-white tw-text-[12px] lg:tw-text-[16px]'>
       {{ block.settings.heading }}
     </div>
-    <div class='tw-font-semibold tw-text-white tw-text-[28px] tw-leading-[1.3]'>
+    <div class='tw-font-[600] tw-text-white tw-text-[18px] lg:tw-text-[28px] tw-leading-[1.3]'>
       {{ block.settings.description }}
     </div>
 

package/blocks/zz-video-swiper-perview-jp.liquid

@@ -235,6 +235,7 @@
     const autoHeight = {{ block.settings.fixed_height }};
     const centeredSlides = {{ block.settings.if_center }}; 
     const initialSlide = {{ block.settings.pc_initial_slide }} - 1;
+    const loop = {{ block.settings.loop }};
     let isDesktop = window.innerWidth > 1023;
     // 获取 class zz-accessories-swiper 的元素 且data-id 为 block.id 的元素
     const zzAccessoriesSwiper = document.querySelector(swiperClassName);
@@ -258,6 +259,7 @@
         nextEl: zzAccessoriesSwiper.querySelector('.swiper-button-next'),
         prevEl: zzAccessoriesSwiper.querySelector('.swiper-button-prev'),
       },
+      loop: loop,
       pagination: {
         el: zzAccessoriesSwiper.querySelector('.swiper-pagination'),
         clickable: true,
@@ -496,6 +498,12 @@
       ],
       "default": "pos"
     },
+    {
+      "type": "checkbox",
+      "id": "loop",
+      "label": "loop 视频循环播放",
+      "default": false
+    },
     {
       "type": "checkbox",
       "id": "if_mb_btn",
@@ -519,7 +527,8 @@
       "id": "fixed_height",
       "label": "强制高度一致",
       "default": false
-    }
+    },
+
   ],
   "blocks": [
     {

package/package.json

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

package/sections/zz-FAQ.liquid

@@ -46,6 +46,7 @@
   {% if section.settings.is_exposure != false %}
     data-track-zz-exposure="true"
   {% endif %} 
+  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',
     title_color: section.settings.title_color,

package/sections/zz-modal.liquid

@@ -22,6 +22,7 @@
     {% if section.settings.is_exposure != false %}
       data-track-zz-exposure="true"
     {% endif %}
+    close-icon-color="{{ section.settings.close_icon_color }}"
     close-btn-color="close-btn-{{ section.settings.close_btn_color }}" {% if section.settings.sheet_on_mobile %} sheet-on-mobile {% endif %} {% if section.settings.no_backdrop_close %} no-backdrop-close {% endif %} id="{{ section.settings.modal_id }}"{% unless section.settings.show_header %} no-header{% endunless %}{% unless section.settings.show_footer %} no-footer{% endunless %}>
     {% if section.settings.show_header %}
     <div slot="header" class="tw-text-[24px] tw-font-semibold">{{ section.settings.header_text }}</div>
@@ -74,6 +75,11 @@
         { "value": "white", "label": "白色" },
         { "value": "black", "label": "黑色" }
       ],
+    },
+    {
+      "type": "color",
+      "id": "close_icon_color",
+      "label": "叉叉颜色",
     },
       {
         "type": "checkbox",

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

@@ -119,6 +119,7 @@
         {% endunless %}
       {% endfor %}
     </div>
+    {% if section.settings.btn_text != blank %}
       <div class="tw-flex-shrink-0 tw-relative">
         <div class="cover-box tw-absolute tw-top-0 tw-left-[-50px] tw-w-[50px] tw-h-full">&nbsp;</div>
         {% render 'zz-button',
@@ -131,7 +132,7 @@
       
         %}
       </div>
-  
+    {% endif %}
   
   </div>
 </div>

package/sections/zz-swiper-banner.liquid

@@ -710,7 +710,7 @@
                       {% if banner.settings.banner_name != blank %}
                         data-track-zz-element="{{ banner.settings.banner_name }}"
                       {% endif %}
-                      class='{{ banner.id }}-site-event tw-w-fit tw-block tw-no-underline tw-h-[48px] max-lg:tw-px-[20px] lg:tw-px-[24px] max-lg:tw-h-[36px] tw-leading-[48px] max-lg:tw-leading-[36px] tw-text-center tw-rounded-full tw-text-[16px] max-lg:tw-text-[13px] max-lg:tw-mx-auto tw-cursor-pointer'
+                      class='{{ banner.id }}-site-event zz-banner-btn tw-w-fit tw-block tw-no-underline tw-h-[48px] max-lg:tw-px-[20px] lg:tw-px-[24px] max-lg:tw-h-[36px] tw-leading-[48px] max-lg:tw-leading-[36px] tw-text-center tw-rounded-full tw-text-[16px] max-lg:tw-text-[13px] max-lg:tw-mx-auto tw-cursor-pointer'
                       style='color: {{ banner.settings.btn_color | default: 'black' }}; border: 1px solid {{ banner.settings.btn_border_color | default: 'white' }}; background: {{ banner.settings.btn_background_color | default: 'white' }}'
                     >
                       {{- banner.settings.btn_text -}}
@@ -722,7 +722,7 @@
                       {% if banner.settings.banner_name != blank %}
                         data-track-zz-element="{{ banner.settings.banner_name }}"
                       {% endif %}
-                      class='{{ banner.id }}-site-event tw-w-fit tw-h-[48px] max-lg:tw-px-[20px] lg:tw-px-[24px] max-lg:tw-h-[36px] tw-leading-[48px] max-lg:tw-leading-[36px] tw-text-center tw-rounded-full tw-text-[16px] max-lg:tw-text-[13px] max-lg:tw-mx-auto tw-cursor-pointer'
+                      class='{{ banner.id }}-site-event zz-banner-btn tw-w-fit tw-h-[48px] max-lg:tw-px-[20px] lg:tw-px-[24px] max-lg:tw-h-[36px] tw-leading-[48px] max-lg:tw-leading-[36px] tw-text-center tw-rounded-full tw-text-[16px] max-lg:tw-text-[13px] max-lg:tw-mx-auto tw-cursor-pointer'
                       style='color: {{ banner.settings.btn_color | default: 'black' }}; border: 1px solid {{ banner.settings.btn_border_color | default: 'white' }}; background: {{ banner.settings.btn_background_color | default: 'white' }}'
                     >
                       {{- banner.settings.btn_text -}}

package/sections/zz-video-collapse-swiper.liquid

@@ -20,31 +20,7 @@
       "default": "#000000",
       "label": "背景色"
     },
-    {
-      "type": "number",
-      "id": "pc_padding_top",
-      "label": "PC上内边距 (Padding Top)",
-      "default": 80
-    },
-    {
-      "type": "number",
-      "id": "pc_padding_bottom",
-      "label": "PC下内边距 (Padding Bottom)",
-      "default": 80
-    },
-    {
-      "type": "number",
-      "id": "mobile_padding_top",
-      "label": "移动上内边距 (Padding Top)",
-  
-      "default": 40
-    },
-    {
-      "type": "number",
-      "id": "mobile_padding_bottom",
-      "label": "移动下内边距 (Padding Bottom)",
-      "default": 40
-    },
+ 
        {
       "type": "color",
       "id": "collapsible_title_color",
@@ -57,6 +33,16 @@
       "label": "可折叠文字颜色",
       "default": "#B2B2B2"
     },
+    {
+      "type": "select",
+      "id": "mobile_style",
+      "label": "移动端风格",
+      "options": [
+        { "value": "left_right", "label": "左右切换" },
+        { "value": "tab", "label": "tab栏" },
+      ],
+      "default": "left_right"
+    },
     {
       "type": "select",
       "id": "collapse_button_color",
@@ -65,17 +51,45 @@
         { "value": "white", "label": "白色" },
         { "value": "black", "label": "黑色" },
       ],
-      "default": "white"
+      "default": "white",
+      "visible_if": "{{ section.settings.mobile_style == 'left_right' }}"
     },
     {
       "type": "image_picker",
       "id": "prev_icon",
-      "label": "轮播上一张图标 Mobile"
+      "label": "轮播上一张图标 Mobile",
+      "visible_if": "{{ section.settings.mobile_style == 'left_right' }}"
     },
     {
       "type": "image_picker",
       "id": "next_icon",
-      "label": "轮播下一张图标 Mobile"
+      "label": "轮播下一张图标 Mobile",
+      "visible_if": "{{ section.settings.mobile_style == 'left_right' }}"
+    },
+        {
+      "type": "number",
+      "id": "pc_padding_top",
+      "label": "PC上内边距 (Padding Top)",
+      "default": 80
+    },
+    {
+      "type": "number",
+      "id": "pc_padding_bottom",
+      "label": "PC下内边距 (Padding Bottom)",
+      "default": 80
+    },
+    {
+      "type": "number",
+      "id": "mobile_padding_top",
+      "label": "移动上内边距 (Padding Top)",
+  
+      "default": 40
+    },
+    {
+      "type": "number",
+      "id": "mobile_padding_bottom",
+      "label": "移动下内边距 (Padding Bottom)",
+      "default": 40
     },
     {
       "type": "color",
@@ -96,6 +110,7 @@
       "default": false,
       "info": "勾选后会对section模块进行曝光统计埋点, 必须填写唯一业务id"
     },
+
    
   ],
   "blocks": [
@@ -180,6 +195,13 @@
           "id": "heading",
           "label": "标题"
         },
+        {
+          "type": "richtext",
+          "id": "slide_title_mb_break",
+          "label": "移动端换行标题",
+          "info": "移动端需要控制换行时候使用,无需换行填上面",
+          "visible_if": "{{ section.settings.mobile_style == 'tab' }}"
+        },
         {
           "type": "html",
           "id": "row_content",
@@ -354,13 +376,17 @@
           {% endif %}
         </div>
 
-        <div class='slide-box tw-pt-[20px] tw-h-[140px] tw-box-border'>
+        <div class='slide-box {% if section.settings.mobile_style == 'left_right' %}tw-pt-[20px] tw-h-[140px]{% else %}tw-mt-[100px] tw-h-[100px]{% endif %}  tw-box-border'>
           <div class='active-box-content tw-hidden'>
-            {% render 'zz-h5',
-              title: collapsible_row.settings.heading,
-              title_color: section.settings.collapsible_title_color,
-              class_name: 'tw-text-center'
-            %}
+            {% if section.settings.mobile_style == 'left_right' %}
+              {% render 'zz-h5',
+                title: collapsible_row.settings.heading,
+                title_color: section.settings.collapsible_title_color,
+                class_name: 'tw-text-center'
+              %}
+              
+            {% endif %}
+            
             <div class='tw-mt-[8px] lg:tw-mt-[16px]'>
               {% render 'zz-content-text',
                 text: collapsible_row.settings.row_content,
@@ -377,25 +403,28 @@
       {% endfor %}
     </div>
 
-    <!-- If we need navigation buttons -->
-    <div class='swiper-button-prev lg:tw-hidden'>
+    {% if section.settings.mobile_style == 'left_right' %}
+      <!-- If we need navigation buttons -->
+      <div class='swiper-button-prev lg:tw-hidden'>
+          {{
+              section.settings.prev_icon
+              | image_url: width: 48
+              | image_tag:
+                alt: 'prev',
+                class: 'tw-w-full tw-h-full tw-object-contain'
+            }}
+      </div>
+      <div class='swiper-button-next lg:tw-hidden'>
         {{
-            section.settings.prev_icon
-            | image_url: width: 48
-            | image_tag:
-              alt: 'prev',
-              class: 'tw-w-full tw-h-full tw-object-contain'
-          }}
-    </div>
-    <div class='swiper-button-next lg:tw-hidden'>
-      {{
-            section.settings.next_icon
-            | image_url: width: 48
-            | image_tag:
-              alt: 'next',
-              class: 'tw-w-full tw-h-full tw-object-contain'
-      }}
-    </div>
+              section.settings.next_icon
+              | image_url: width: 48
+              | image_tag:
+                alt: 'next',
+                class: 'tw-w-full tw-h-full tw-object-contain'
+        }}
+      </div>
+      
+    {% endif %}
 
     <!-- Pagination indicator -->
     <div class='swiper-pagination'></div>
@@ -465,7 +494,10 @@
     }
      @media screen and (max-width: 1023px) {
       #shopify-section-{{section.id}} .zz-collapse-swiper {
-        padding-bottom: 40px;
+        {% if section.settings.mobile_style == 'left_right' %}
+          padding-bottom: 40px;
+        {% endif %}
+        
       }
 
       #shopify-section-{{section.id}} .swiper-button-next,
@@ -485,16 +517,69 @@
         right: 50%;
         transform: translate({{ btn_offset }}px, 0px);
       }
-      #shopify-section-{{section.id}} .zz-collapse-swiper .swiper-pagination-bullets .swiper-pagination-bullet {
-        margin: 0 4px;
-        width: 6px;
-        height: 6px;
-        background-color: {{ section.settings.mb_pagination_color | color_modify: 'alpha', 0.5 }};
-      }
-      #shopify-section-{{section.id}} .zz-collapse-swiper .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
-        width: 6px;
-        background-color: {{ section.settings.mb_pagination_color }};
-      }
+      {% if section.settings.mobile_style == 'tab' %}
+        #shopify-section-{{ section.id }} .zz-collapse-swiper .swiper-pagination-bullets {
+          {% if section.settings.mobile_style == 'tab' %}
+            bottom: 120px;
+          {% else %}
+            bottom: 85px;
+          {% endif %}
+          
+          left: 50%;
+          transform: translateX(-50%);
+          width: calc(100% - 40px);
+          background: white;
+          border-radius: 10px;
+          
+        }
+        #shopify-section-{{ section.id }}  .swiper-pagination-horizontal {
+          overflow-x: auto;       /* 启用横向滚动 */
+          white-space: nowrap;    /* 不换行，强制所有子项在一行 */
+          -webkit-overflow-scrolling: touch; /* 移动端流畅滚动（可选） */
+          scrollbar-width: none;     /* Firefox */
+          -ms-overflow-style: none;  /* IE 和 Edge */
+        }
+        #shopify-section-{{ section.id }}  .swiper-pagination-horizontal::-webkit-scrollbar {
+          display: none;             /* Chrome, Safari */
+        }
+        #shopify-section-{{ section.id }} .zz-collapse-swiper .swiper-pagination-bullets .swiper-pagination-bullet {
+          box-sizing: content-box;
+          margin: 0;
+          padding: 16px;
+          height:auto;
+          width: fit-content;
+          white-space: nowrap;
+          font-size: 14px;
+          line-height: 1.2;
+          border-radius: 10px;
+          background: none;
+          border-top: 0;
+          color: #00000080;
+          opacity: 1;
+         
+        }
+        #shopify-section-{{ section.id }} .zz-collapse-swiper .swiper-pagination-bullets .swiper-pagination-bullet:last-child {
+          margin: 0;
+        }
+        #shopify-section-{{ section.id }} .zz-collapse-swiper .swiper-pagination-bullets .swiper-pagination-bullet-active {
+          background:#000000;
+          color: #ffffff;
+        }
+            
+      {% else %}
+        #shopify-section-{{section.id}} .zz-collapse-swiper .swiper-pagination-bullets .swiper-pagination-bullet {
+          margin: 0 4px;
+          width: 6px;
+          height: 6px;
+          background-color: {{ section.settings.mb_pagination_color | color_modify: 'alpha', 0.5 }};
+        }
+        #shopify-section-{{section.id}} .zz-collapse-swiper .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
+          width: 6px;
+          background-color: {{ section.settings.mb_pagination_color }};
+        }
+        
+      {% endif %}
+      
     }
     @media screen and (min-width: 1024px) {
       #shopify-section-{{section.id}} {
@@ -558,27 +643,78 @@
       }
     }
 
+    function scrollPaginationToCenter() {
+      // 获取当前section
+      const section = document.getElementById(
+        'shopify-section-{{section.id}}'
+      );
+      const paginationContainer = section.querySelector('.swiper-pagination');
+      const activeBullet = paginationContainer.querySelector('.swiper-pagination-bullet-active');
+
+      if (activeBullet) {
+        const containerWidth = paginationContainer.offsetWidth;
+        const bulletLeft = activeBullet.offsetLeft;
+        const bulletWidth = activeBullet.offsetWidth;
+
+        // 计算需要滚动的位置，使当前bullet居中
+        const scrollPosition = bulletLeft - (containerWidth / 2) + (bulletWidth / 2);
+
+        paginationContainer.scrollTo({
+          left: scrollPosition,
+          behavior: 'smooth'
+        });
+      }
+    }
 
     function initSwiper () {
+        // 添加标题数组
+      let isDesktop = window.innerWidth > 1023;
+      const slideTitles = [
+        {% for block in swiper_blocks %}
+          "{{ block.settings.slide_title_mb_break }}",
+        {% endfor %}
+      ];
       const swiperClassName = '.zz-collapse-swiper-{{ section.id }}';
-      const prevSwiper = new Swiper(swiperClassName, {
-        slidesPerView: 'auto',
-        spaceBetween: 8,
-        navigation: {
-          nextEl: '.swiper-button-next',
-          prevEl: '.swiper-button-prev',
-        },
-        pagination: {
-          el: '.swiper-pagination',
-          clickable: false,
-        },
-        effect: 'slide',
-        on: {
-          slideChangeTransitionEnd: function () {
-            {% comment %} handleVideoOnSlideChange(); {% endcomment %}
+      {% if section.settings.mobile_style == 'left_right' %}
+        const prevSwiper = new Swiper(swiperClassName, {
+          slidesPerView: 'auto',
+          spaceBetween: 8,
+          navigation: {
+            nextEl: '.swiper-button-next',
+            prevEl: '.swiper-button-prev',
           },
-        },
-      });
+          pagination: {
+            el: '.swiper-pagination',
+            clickable: false,
+          },
+          effect: 'slide',
+        });
+      {% else %}
+         const prevSwiper = new Swiper(swiperClassName, {
+          slidesPerView: 'auto',
+          spaceBetween: 8,
+          navigation: false,
+          centeredSlides: true,
+          pagination: {
+            el: '.swiper-pagination',
+            clickable: true,
+            renderBullet: function (index, className) {
+              const title = slideTitles[index % slideTitles.length];
+              return '<div class="' + className + '">' + title + '</div>';
+            }
+          },
+          effect: 'fade',
+          on: {
+              slideChange: function (e) {
+                if (!isDesktop) {
+                  scrollPaginationToCenter();
+                }
+              },
+            }
+        });
+
+      {% endif %}
+      
     } 
 
     initCollapse();

package/sections/zz-video-tab-swiper.liquid

@@ -107,15 +107,15 @@
    }
    @media screen and (min-width: 1024px) {
      #shopify-section-{{ section.id }} .zz-banner-tab-swiper {
-       width: 80vw;
+       width: 90vw;
      }
      #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-slide {
-       width: 80vw;
+       width: 90vw;
      }
      #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-slide .media-box {
        position: relative;
-       width: 80vw;
-       height: calc(80vw / 16 * 9);
+       width: 90vw;
+       height: calc(90vw / 16 * 9);
      }
      #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets {
        bottom: 135px;
@@ -155,14 +155,14 @@
    }
    @media screen and (min-width: 1280px) {
      #shopify-section-{{ section.id }} .zz-banner-tab-swiper {
-      width: 1220px;
+      width: 1080px;
      }
      #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-slide {
-      width: 1220px;
+      width: 1080px;
      }
      #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-slide .media-box {
        position: relative;
-       width: 1220px;
+       width: 1080px;
         height: 686px;
      }
      #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets {
@@ -225,7 +225,7 @@
 
   <div class='zz-swiper-container'>
     <div
-      class='swiper zz-banner-tab-swiper zz-banner-tab-swiper-{{ section.id }} lg:tw-w-[80vw] xl:tw-w-[64vw]'
+      class='swiper zz-banner-tab-swiper zz-banner-tab-swiper-{{ section.id }} lg:tw-w-[90vw] xl:tw-w-[64vw]'
     >
       <div class='swiper-wrapper'>
         {% for banner in swiper_blocks %}

package/sections/zz-voc-section.liquid

@@ -0,0 +1,227 @@
+{% schema %}
+{
+  "name": "VOC Section",
+  "class": "zz-voc-section",
+  "tag": "section",
+  "disabled_on": {
+    "groups": ["header", "footer"]
+  },
+  "settings": [
+    {
+      "type": "color",
+      "id": "bg_color",
+      "label": "背景色",
+      "default": "#ffffff"
+    },
+    {
+      "type": "number",
+      "id": "padding_top",
+      "label": "上间距",
+      "default": 20,
+      "info": "单位：px"
+    },
+    {
+      "type": "number",
+      "id": "padding_bottom",
+      "label": "下间距",
+      "default": 80,
+      "info": "单位：px"
+    },
+    {
+      "type": "number",
+      "id": "padding_top_mb",
+      "label": "上间距（mobile）",
+      "default": 16,
+      "info": "单位：px"
+    },
+    {
+      "type": "number",
+      "id": "padding_bottom_mb",
+      "label": "下间距（mobile）",
+      "default": 24,
+      "info": "单位：px"
+    },
+  ],
+  "blocks": [
+    {
+      "type": "comment",
+      "name": "comment",
+      "limit": 3,
+      "settings": [
+        {
+          "type": "select",
+          "id": "pc_media_pos",
+          "label": "图片/视频位置(pc)",
+          "options": [
+            {
+              "value": "top",
+              "label": "上"
+            },
+            {
+              "value": "bottom",
+              "label": "下"
+            }
+          ],
+          "default": "top"
+        },
+        {
+          "type": "select",
+          "id": "mb_media_pos",
+          "label": "图片/视频位置(mobile)",
+          "options": [
+            {
+              "value": "top",
+              "label": "上"
+            },
+            {
+              "value": "bottom",
+              "label": "下"
+            }
+          ],
+          "default": "top"
+        },
+        {
+          "type": "image_picker",
+          "id": "avatar",
+          "label": "头像"
+        },
+        {
+          "type": "text",
+          "id": "username",
+          "label": "用户名"
+        },
+        {
+          "type": "richtext",
+          "id": "account",
+          "label": "账号"
+        },
+        {
+          "type": "richtext",
+          "id": "content",
+          "label": "内容"
+        },
+        {
+          "type": "image_picker",
+          "id": "pc_image",
+          "label": "图片(pc)"
+        },
+        {
+          "type": "image_picker",
+          "id": "mb_image",
+          "label": "图片(mobile)"
+        },
+        {
+          "type": "video",
+          "id": "pc_video",
+          "label": "视频(pc)"
+        },
+        {
+          "type": "video",
+          "id": "mb_video",
+          "label": "视频(mobile)"
+        }
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "VOC 客户背书"
+    }
+  ]
+}
+{% endschema %}
+
+<div class='user-spokes-section lg:tw-w-[85.3906vw] xl:tw-w-[1093px] lg:tw-mx-auto'>
+  <div class='max-lg:tw-px-[20px] tw-flex  lg:tw-justify-between max-lg:tw-overflow-x-auto tw-gap-[20px] slow-reveal'>
+    {% for block in section.blocks %}
+      <div class='comment-box lg:tw-w-[351px] tw-flex tw-flex-col'>
+        <div class='comment-item lg:tw-w-[351px] lg:tw-h-[468px]'>
+          {% render 'zz-spoke',
+            bg_color: 'rgba(0,0,0,0.04)',
+            class_name: 'max-lg:tw-bg-[#F5F5F6]',
+            pc_image: block.settings.pc_image,
+            pc_video: block.settings.pc_video,
+            mb_image: block.settings.mb_image,
+            mb_video: block.settings.mb_video,
+            pc_media_pos: block.settings.pc_media_pos,
+            mb_media_pos: block.settings.mb_media_pos,
+            user_name: block.settings.username,
+            user_avatar: block.settings.avatar,
+            user_account: block.settings.account,
+            content: block.settings.content,
+            name_class: 'tw-text-black max-lg:tw-text-[10px] lg:tw-text-[14px]',
+            content_class: 'max-lg:tw-text-[10px] lg:tw-text-[14px] tw-text-black/70 lg:tw-text-black/60 max-lg:tw-leading-[1.2] tw-line-clamp-6 lg:tw-line-clamp-4'
+          %}
+        </div>
+      </div>
+    {% endfor %}
+  </div>
+</div>
+
+<style>
+  #shopify-section-{{section.id}} {
+    letter-spacing: 0;
+    background: {{ section.settings.bg_color }};
+    padding-top: {{ section.settings.padding_top_mb }}px;
+    padding-bottom: {{ section.settings.padding_bottom_mb }}px;
+  }
+  #shopify-section-{{section.id}} p {
+    margin: 0;
+  }
+  #shopify-section-{{section.id}} .zz-spoke-block-media img{
+    height: 100%;
+  }
+  @media screen and (max-width: 1023px) {
+    #shopify-section-{{section.id}} .comment-box .comment-item {
+      width: 168px;
+      
+    }
+
+       #shopify-section-{{section.id}} .comment-box {
+        width: 168px;
+        height: 357px;
+      }
+      #shopify-section-{{section.id}} .comment-box .zz-spoke-block-media {
+        height: 221px;
+      }
+      #shopify-section-{{section.id}} .comment-box .zz-spoke-block-content {
+        box-sizing: border-box;
+        height: 136px;
+      }
+ 
+    
+    
+  }
+  @media (min-width: 1024px) {
+    #shopify-section-{{section.id}} {
+      padding-top: {{ section.settings.padding_top }}px;
+      padding-bottom: {{ section.settings.padding_bottom }}px;
+    }
+    #shopify-section-{{section.id}} .comment-box {
+      height: 643px;
+    }
+    #shopify-section-{{section.id}} .comment-box .zz-spoke-block-media {
+      height: 468px;
+    }
+    #shopify-section-{{section.id}} .comment-box .zz-spoke-block-content {
+      height: 175px;
+    }
+  }
+  @media (min-width: 1024px) and (max-width: 1280px) {
+    #shopify-section-{{section.id}} .user-spokes-section {
+      width: 85.3906vw;
+    }
+    #shopify-section-{{section.id}} .comment-box {
+      width: 27.4219vw;
+    }
+    #shopify-section-{{section.id}} .comment-box .comment-item {
+      width: 27.4219vw;
+    }
+    #shopify-section-{{section.id}} .comment-box .zz-spoke-block {
+      height: calc(175px + 36.5625vw);
+    }
+    #shopify-section-{{section.id}} .comment-box .zz-spoke-block-media {
+      height: 36.5625vw;
+    }
+  }
+</style>