zz-shopify-components 0.32.0 → 0.32.1-beta.0

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

@@ -2,6 +2,7 @@
   | reject: 'type', 'video'
 %}
 {% assign swiper_blocks = section.blocks | where: 'type', 'video' %}
+{% assign block_size = swiper_blocks.size %}
 {% assign video_loop = false %}
 {% if section.settings.loop_swiper %}
   {% assign video_loop = true %}
@@ -20,6 +21,15 @@
       padding-top: {{ section.settings.pc_padding_top }}px;
       padding-bottom: {{ section.settings.pc_padding_bottom }}px;
     }
+    #shopify-section-{{ section.id }} .title-text-content {
+      margin: 0 auto;
+      {% if section.settings.is_left_right == true %}
+        flex-direction: row !important;
+        justify-content: space-between !important;
+        align-items: center;
+        gap: 25px;
+      {% endif %}
+    }
   }
    #shopify-section-{{ section.id }} .zz-video-tab-swiper {
      width: 100%;
@@ -110,6 +120,7 @@
    }
    @media screen and (min-width: 1024px) {
      #shopify-section-{{ section.id }} .zz-banner-tab-swiper {
+       overflow: visible;
        width: 90vw;
      }
      #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-slide {
@@ -136,7 +147,7 @@
        margin: 0;
        white-space: nowrap;
        width: auto;
-       padding: 0 28px;
+       padding: 0 12px;
        height: 47px;
        line-height: 47px;
        border-radius: 0;
@@ -171,6 +182,9 @@
      #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets {
        width: auto;
      }
+     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets .swiper-pagination-bullet {
+       padding: 0 28px;
+     }
    }
 
 </style>
@@ -185,7 +199,7 @@
   {% endif %}
   {% if section.settings.module_name != blank %}data-zz-module-name="{{ section.settings.module_name }}"{% endif %}
 >
-  <div class='fade-in-box tw-flex tw-flex-col tw-justify-center'>
+  <div class='title-text-content fade-in-box tw-flex tw-flex-col tw-justify-center lg:tw-w-[90vw] xl:tw-w-[1080px]'>
     {% for block in non_collapsible_blocks %}
       {% case block.type %}
         {% when 'title' %}
@@ -193,15 +207,19 @@
             title: block.settings.pc_title,
             title_mb: block.settings.mb_title,
             title_color: block.settings.text_color,
-            class_name: 'content-title tw-text-center'
+            class_name: 'tab-content-title tw-text-center'
           %}
           <style>
-            #shopify-section-{{section.id}} .content-title {
+            #shopify-section-{{section.id}} .tab-content-title {
               margin-bottom: {{ block.settings.mobile_margin_bottom }}px;
             }
             @media screen and (min-width: 1024px) {
-              #shopify-section-{{section.id}} .content-title {
+              #shopify-section-{{section.id}} .tab-content-title {
                 margin-bottom: {{ block.settings.pc_margin_bottom }}px;
+                {% if section.settings.is_left_right == true %}
+                  text-align: left !important;
+                  font-size: 40px;
+                {% endif %}
               }
             }
           </style>
@@ -210,15 +228,19 @@
             text: block.settings.pc_text,
             mb_text: block.settings.mb_text,
             text_color: block.settings.text_color,
-            class_name: 'content-text tw-text-center'
+            class_name: 'tab-content-text tw-text-center'
           %}
           <style>
-            #shopify-section-{{section.id}} .content-text {
+            #shopify-section-{{section.id}} .tab-content-text {
               margin-bottom: {{ block.settings.mobile_margin_bottom }}px;
             }
             @media screen and (min-width: 1024px) {
-              #shopify-section-{{section.id}} .content-text {
+              #shopify-section-{{section.id}} .tab-content-text {
                 margin-bottom: {{ block.settings.pc_margin_bottom }}px;
+                {% if section.settings.is_left_right == true %}
+                  text-align: left !important;
+                  flex: 1;
+                {% endif %}
               }
             }
           </style>
@@ -228,7 +250,7 @@
 
   <div class='zz-swiper-container'>
     <div
-      class='swiper zz-banner-tab-swiper zz-banner-tab-swiper-{{ section.id }} lg:tw-w-[90vw] xl:tw-w-[64vw]'
+      class='swiper zz-banner-tab-swiper zz-banner-tab-swiper-{{ section.id }} lg:tw-w-[90vw] xl:tw-w-[1080px]'
     >
       <div class='swiper-wrapper'>
         {% for banner in swiper_blocks %}
@@ -307,7 +329,8 @@
         clickable: true,
         renderBullet: function (index, className) {
           const title = slideTitles[index % slideTitles.length];
-          return '<span class="' + className + '">' + title + '</span>';
+          return `<span class="${className}" 
+          {% if section.settings.module_id != blank %} data-track-zz-element="{{ section.settings.module_id }}_change" {% endif %}>${title}</span>`;
         }
       },
       effect: 'fade',
@@ -520,7 +543,12 @@
       "label": "mb Tab栏激活划线颜色",
       "default": "#2B2B2A"
     },
-
+    {
+      "type": "checkbox",
+      "id": "is_left_right",
+      "label": "标题与描述是否左右布局",
+      "default": false,
+    },
     {
       "type": "number",
       "id": "pc_padding_top",

package/snippets/zz-img.liquid

@@ -29,7 +29,10 @@
     widths: '1000, 1500, 2000, 3000, 4000, 5000',
     loading: lazy_load,
     sizes: '8000px',
-    fetchpriority:"high"
+    fetchpriority:"high",
+    data-zz-modal-target: modal_target,
+    data-zz-module-target: module_target,
+    data-track-zz-element: id
 }}
 {%- endif -%}
 {%- if mb_image -%}
@@ -42,6 +45,9 @@
     widths: '400, 800, 1200, 1500',
     loading: lazy_load,
     sizes: '1500px',
-    fetchpriority:"high"
+    fetchpriority:"high",
+    data-zz-modal-target: modal_target,
+    data-zz-module-target: module_target,
+    data-track-zz-element: id
 }}
 {%- endif -%}

package/snippets/zz-video.liquid

@@ -11,6 +11,7 @@
   loop: 是否循环播放
   muted: 是否静音
   separate_display: 区分显示pc还是mb, true时 没有配置PC与mb将不会显示。不会使用PC的配置来配置mb
+  module_id: module_id
 {% endcomment %}
 
 {% if separate_display == true %}
@@ -49,6 +50,9 @@
     {% if controls %}
       controls
     {% endif %}
+    {% if module_id %}
+      data-track-zz-video='{{ module_id }}'
+    {% endif %}
     {% if lazy %}
     data-poster='{{video_poster | default: ''}}'
     {% else %}
@@ -94,6 +98,9 @@
     {% if loop %}
       loop
     {% endif %}
+    {% if module_id %}
+      data-track-zz-video='{{ module_id }}'
+    {% endif %}
     {% if muted %}
       muted
     {% endif %}