zz-shopify-components 0.31.0 → 0.32.0

package/blocks/zz-accessories-item.liquid

@@ -38,7 +38,7 @@
       mb_width: 640,
     %}
   </div>
-  <div class="lg:tw-h-[110px]">
+  <div class="banner-item-content-text lg:tw-h-[110px]">
     <p 
       class='slide-title tw-mt-[20px] lg:tw-mt-[30px] tw-mb-[8px] tw-text-[16px] lg:tw-text-[18px] tw-leading-[1.2] tw-text-center tw-font-bold tw-text-black'
       style='color: {{ block.settings.slide_title_color }};'>

package/blocks/zz-normal-swiper.liquid

@@ -263,6 +263,13 @@
       width: 0%;
     }
 
+    {% if block.settings.enable_long_image_scroll %}
+    #shopify-block-{{block.id}} .zz-normal-swiper .swiper-slide {
+      width: auto !important; 
+      display: flex;
+    }
+    {% endif %}
+
     {% if block.settings.slides_per_view_pc == 0 %}
   @media screen and (min-width: 1024px) {
       #shopify-block-{{block.id}} .zz-normal-swiper .swiper-slide {
@@ -393,13 +400,32 @@
     let instance = null;
     let initialized = false;
 
+    const isDesktop = window.innerWidth > 1023;
+    const spaceBetween = isDesktop ? {{ block.settings.space_between | default: 8 }} : {{ block.settings.space_between_mb | default: 8 }};
+
     const options = {
+      {% if block.settings.enable_long_image_scroll %}
+      loop: false,
+      {% else %}
       loop: {{ block.settings.loop | json }},
+      {% endif %}
       speed: {{ block.settings.speed | default: 500 }},
       autoHeight: {{ block.settings.auto_height | json }},
       centeredSlides: {{ block.settings.centered_slides | json }},
       watchOverflow: true,
-      spaceBetween: {{ block.settings.space_between | default: 8 }},
+      spaceBetween: spaceBetween,
+      {% if block.settings.enable_long_image_scroll %}
+      freeMode: {
+        enabled: true,
+        sticky: false,
+        momentum: true,
+        momentumRatio: 0.8
+      },
+      slidesPerView: 'auto', 
+      grabCursor: true,  
+      {% else %}
+      freeMode: false, 
+      {% endif %}
       {% if block.settings.pagination_type != 'none' %}
       pagination: {
         el: '#shopify-block-{{block.id}} .swiper-pagination',
@@ -423,7 +449,15 @@
       initialSlide: {{ block.settings.pre_show_index | default: 0 }},
       breakpoints: {
         0: {
-          {% if block.settings.slides_per_view_mb == 0 %}
+          {% if block.settings.enable_long_image_scroll %}
+          slidesPerView: 'auto',
+          freeMode: {
+            enabled: true,
+            sticky: false,
+            momentum: true
+          },
+          grabCursor: true,  
+          {% elsif block.settings.slides_per_view_mb == 0 %}
           slidesPerView: 'auto',
           {% else %}
           slidesPerView: {{ block.settings.slides_per_view_mb | default: 1 }},
@@ -431,7 +465,15 @@
           slidesPerGroup: {{ block.settings.slides_per_group_mb | default: 1 }},
         },
         1024: {
-          {% if block.settings.slides_per_view_pc == 0 %}
+          {% if block.settings.enable_long_image_scroll %}
+          {% comment %} slidesPerView: 'auto', {% endcomment %}
+          freeMode: {
+            enabled: true,
+            sticky: false,
+            momentum: true
+          },
+          grabCursor: true,  
+          {% elsif block.settings.slides_per_view_pc == 0 %}
           slidesPerView: 'auto',
           {% else %}
           slidesPerView: {{ block.settings.slides_per_view_pc | default: 3 }},
@@ -498,6 +540,15 @@
       "max": 80,
       "step": 2
     },
+    {
+      "type": "range",
+      "id": "space_between_mb",
+      "label": "卡片间距(px)(mobile)",
+      "default": 8,
+      "min": 0,
+      "max": 80,
+      "step": 2
+    },
     {
       "type": "checkbox",
       "id": "centered_slides",
@@ -627,6 +678,13 @@
       "default": "dark"
     },
 
+    {
+      "type": "checkbox",
+      "id": "enable_long_image_scroll",
+      "label": "启用超长图横向滚动模式",
+      "info": "开启后，单张图片可横向滑动查看，常用于超宽全景图。此时请将可见数(Mobile/PC)设置为1。",
+      "default": true
+    },
     {
       "type": "range",
       "id": "slides_per_view_mb",
@@ -680,6 +738,7 @@
         "loop": true,
         "speed": 500,
         "space_between": 8,
+        "space_between_mb": 8,
         "centered_slides": false,
         "auto_height": false,
         "autoplay": false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-shopify-components",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "description": "Reusable Shopify components for theme projects",
   "keywords": [
     "shopify",

package/snippets/zz-accessories-preview-swiper.liquid

@@ -3,7 +3,8 @@
     <div class='swiper-wrapper'>
       {% for image in product.metafields.custom.acc_images.value %}
         {% assign accessories_points_index = forloop.index %}
-        <div class='swiper-slide tw-flex tw-justify-center tw-relative'>
+        <div class='swiper-slide tw-flex tw-justify-center tw-relative' 
+          data-track-zz-block="accessory_swiper_{{ accessories_points_index }}">
           {{
             image
             | image_url: width: 3000
@@ -27,6 +28,8 @@
                 data-point-swiper-index='{{ block.settings.swiper_index }}'
                 class='product-accessories-point-item tw-absolute tw-rounded-full tw-backdrop-blur-[20px] tw-gap-[12px] tw-flex tw-items-center tw-justify-center tw-bg-[rgba(255,255,255,0.8)] lg:tw-py-[6px] tw-py-[4px] lg:tw-pl-[8px] tw-pl-[4px] tw-pr-[20px] tw-z-50 tw-cursor-pointer'
                 style='left: {{ block.settings.point_x }}%; top: {{ block.settings.point_y }}%;'
+                data-track-zz-element="accessory_point_add_to_cart_{{ block.settings.accessories_title | replace: ' ', '_' | downcase }}"
+                data-track-zz-params="content_name:{{ block.settings.accessories_title }}"
               >
                 <svg
                   width='36'
@@ -251,6 +254,26 @@
             clickable: true,
           },
           thumbs: { swiper: this._thumbs },
+          on: {
+            slideChange: function () {
+              const activeSlideEl = (this.slides && this.slides[this.activeIndex])
+                || (this.el && this.el.querySelector && this.el.querySelector('.swiper-slide-active'))
+                || null;
+              if (activeSlideEl) {
+                if(window.zzGetElementHpm) {
+                  const hpm = window.zzGetElementHpm(activeSlideEl, 'block');
+                  if(hpm) {
+                    window.zzAnalytics && zzAnalytics.trackEvent('exposure', {
+                        page_element: {
+                            hpm,
+                        }
+                    });
+                  }
+                }
+              }
+            }
+          }
+          
         });
       }
 

package/snippets/zz-gallery-tab.liquid

@@ -3,9 +3,12 @@
     <div
       class='gallery-tab-item active'
       data-test-locator='galleryTabItemPhoto'
+      data-track-zz-element="tab_photo"
       data-test-value='photo'
     >
-      <div class='gallery-tab-item-text'>
+      <div 
+        class='gallery-tab-item-text'
+      >
         <svg
           xmlns='http://www.w3.org/2000/svg'
           width='16'
@@ -26,6 +29,7 @@
         class='gallery-tab-item'
         data-test-locator='galleryTabItemAccessories'
         data-test-value='accessories'
+        data-track-zz-element="tab_accessories"
       >
         <div class='gallery-tab-item-text'>
           <svg
@@ -48,6 +52,7 @@
         class='gallery-tab-item'
         data-test-locator='galleryTabItemVideo'
         data-test-value='video'
+        data-track-zz-element="tab_video"
       >
         <div class='gallery-tab-item-text'>
           <svg
@@ -69,6 +74,7 @@
         class='gallery-tab-item'
         data-test-locator='galleryTabItem3D'
         data-test-value='3d'
+        data-track-zz-element="tab_3d"
       >
         <div class='gallery-tab-item-text'>
           <svg

package/snippets/zz-product-preview.liquid

@@ -1,4 +1,7 @@
-<div class=' tw-h-full tw-flex tw-flex-col tw-flex-1 tw-relative lg:tw-py-[20px]'>
+<div 
+   data-track-zz-block="product_buy_left_tab"
+  data-track-zz-exposure="true" 
+  class=' tw-h-full tw-flex tw-flex-col tw-flex-1 tw-relative lg:tw-py-[20px]'>
   <div class='product-container lg:tw-max-h-[721px] tw-flex-1 tw-min-h-0  tw-flex tw-items-center tw-justify-center'>
     {% comment %} 左侧产品预览 {% endcomment %}
     <div

package/snippets/zz-product-video.liquid

@@ -26,6 +26,7 @@
     <video
       id='product-video-intro-{{ product.id }}'
       data-type='intro'
+      data-track-zz-video='introduction_video'
       data-src='{{ intro_video.sources[1].url }}'
       poster='{{ intro_video.preview_image | image_url: width: 1000 }}'
       controls
@@ -60,6 +61,7 @@
       role='tabpanel'
       aria-labelledby='product-video-tab-livestream-{{ product.id }}'
       data-type='livestream'
+      data-track-zz-video='livestream_video'
       data-src='{{ livestream_video.sources[0].url }}'
       poster='{{ livestream_video.preview_image | image_url: width: 1000 }}'
       controls
@@ -99,6 +101,7 @@
             data-tab='intro'
             role='tab'
             aria-controls='product-video-intro-{{ product.id }}'
+            data-track-zz-element='introduction_btn'
             aria-selected='true'
           >
             Introduction
@@ -109,6 +112,7 @@
             type='button'
             id='product-video-tab-livestream-{{ product.id }}'
             class='product-video-tab-item'
+            data-track-zz-element='livestream_btn'
             data-tab='livestream'
             role='tab'
             aria-controls='firework-video-{{ product.id }}'