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

package/assets/zz-components.css

@@ -462,4 +462,20 @@ body.zz-dialog-open {
 .zz-toast-box.show {
   opacity: 1;
   transform: translateZ(0) scale(1);
+}
+
+
+
+.zz-overflow-scrollbar-hidden {
+  scrollbar-width: none;
+  /* Firefox */
+  -ms-overflow-style: none;
+  /* IE 10+ */
+}
+
+.zz-overflow-scrollbar-hidden::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  display: none;
+  /* Chrome/Safari/Edge */
 }

package/assets/zz-components.js

@@ -463,5 +463,23 @@ document.addEventListener('DOMContentLoaded', (event) => {
 
   }
 
+  // 处理统一的定位脚本
+  document.addEventListener('click', (e) => {
+    // data-zz-module-name
+    const positionTrigger = e.target.closest('[data-zz-module-target]');
+    if (positionTrigger) {
+      const selector = positionTrigger.getAttribute('data-zz-module-target');
+      if (selector) {
+        const target = document.querySelector(`[data-zz-module-name="${selector}"]`);
+          const headerHeight = 50;
+          const offsetTop = target.offsetTop - headerHeight;
+          window.scrollTo(0, offsetTop);
+       
+      }
+      return;
+    }
+  });
+
 
 });
+

package/blocks/zz-accessories-swiper.liquid

@@ -71,6 +71,15 @@
       padding-top: 64px;
       padding-bottom: 108px;
     }
+    {% if block_size <= 3 %} 
+      #shopify-block-{{ block.id }} .swiper-button-next,
+      #shopify-block-{{ block.id }} .swiper-button-prev {
+        display: none;
+      }
+      #shopify-block-{{ block.id }} .zz-accessories-swiper .swiper-pagination-bullets {
+        display: none;
+      }
+    {% endif %}
    
   }
 

package/blocks/zz-modal-block.liquid

@@ -5,6 +5,7 @@
       --zz-modal-radius: {{ block.settings.radius_mobile }}px;
       --zz-modal-padding: {{ block.settings.padding_mobile }}px;
       --zz-modal-width: {{ block.settings.width_mobile }};
+      --zz-modal-background: {{ block.settings.bg_color }};
     }
     @media (min-width: 1024px) {
       #{{ block.settings.modal_id }} {
@@ -71,6 +72,12 @@
         { "value": "white", "label": "白色" },
         { "value": "black", "label": "黑色" }
       ],
+    },
+   {
+      "type": "color",
+      "id": "bg_color",
+      "default": "#ffffff",
+      "label": "背景色"
     },
       {
         "type": "checkbox",

package/blocks/zz-ratio-image.liquid

@@ -80,6 +80,14 @@
           "value": "link_map",
           "label": "多国家映射"
         },
+        {
+          "value": "modal",
+          "label": "弹窗"
+        },
+         {
+          "value": "position_to_module",
+          "label": "定位到某个模块"
+        }
       ],
       "default": "link",
       "visible_if": "{{ block.settings.has_link == true }}"
@@ -97,6 +105,25 @@
       "info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开（ 冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接                    EG: Canada: https://hoverair.com/   default: https://hoverair.com/ ",
       "visible_if": "{{ block.settings.function_type == 'link_map' and block.settings.has_link == true }}"
     },
+    {
+      "type": "text",
+      "id": "position_module_id",
+      "label": "定位到模块的id",
+      "visible_if": "{{ block.settings.function_type == 'position_to_module' and block.settings.has_link == true }}"
+    },
+      {
+      "type": "text",
+      "id": "modal_id",
+      "label": "按钮触发modal的id",
+      "visible_if": "{{ block.settings.function_type == 'modal' and block.settings.has_link == true }}"
+    },
+    {
+      "type": "text",
+      "id": "btn_id",
+      "label": "业务id",
+      "info": "按钮的唯一id，用于代码控制、埋点统计等"
+    },
+
 
   ],
   "presets": [
@@ -112,12 +139,15 @@
 
 {% assign link_class = 'zz-link-' | append: block.id %}
 {% assign image_class = 'ratio-image ' | append: link_class %}
+{% assign modalTarget = block.settings.modal_id | prepend: '#' %}
 
     {% render 'zz-img',
       pc_image: block.settings.desktop_image,
       mb_image: block.settings.mobile_image,
       image_alt: block.settings.alt | escape,
       class_name: image_class,
+      modal_target: modalTarget,
+      module_target: block.settings.position_module_id,
   %}
 
 <style>
@@ -160,7 +190,7 @@
         }
       })
     </script>
-  {% else %}
+  {% elsif block.settings.function_type == 'link' %}
     <script>
       document.addEventListener('DOMContentLoaded', (event) => {
   

package/blocks/zz-title.liquid

@@ -53,6 +53,11 @@
         "id": "text_gradient",
         "label": "文字渐变 (可选)"
       },
+      {
+         "type": "color",
+        "id": "text_color_strong",
+        "label": "重点颜色（B 加粗颜色）可选",
+      },
     {
       "type": "header",
       "content": "💻 PC 样式设置"
@@ -297,4 +302,14 @@
     }
   {% endif %}
 
+  #shopify-block-{{ block.id }} .title-block {
+    overflow-wrap: break-word;
+  }
+  #shopify-block-{{ block.id }} .title-block strong {
+    font-weight: {{ block.settings.pc_font_weight_custom | default: '700' }};
+    {% if block.settings.text_color_strong %}
+      color: {{ block.settings.text_color_strong }};
+    {% endif %}
+  }
+
 </style>

package/blocks/zz-video-button.liquid

@@ -17,6 +17,16 @@
       "type": "image_picker",
       "id": "poster_pc",
       "label": "视频 封面"
+    },
+     {
+      "type": "video",
+      "id": "video_mb",
+      "label": "视频 移动端"
+    },
+    {
+      "type": "image_picker",
+      "id": "poster_mb",
+      "label": "视频 移动端 封面"
     },
     {
       "type": "select",
@@ -73,10 +83,49 @@
 }
 {% endschema %}
 
-{% render 'zz-video-button',
-  video: block.settings.video_pc,
-  poster: block.settings.poster_pc,
-  color: block.settings.color,
-  text: block.settings.text,
-  size: block.settings.size
-%}
+{% assign video_mb = block.settings.video_mb %}
+{% assign poster_mb = block.settings.poster_mb %}
+{% if block.settings.video_mb == blank %}
+  {% assign video_mb = block.settings.video_pc %}
+{% endif %}
+{% if block.settings.poster_mb == blank %}
+  {% assign poster_mb = block.settings.poster_pc %}
+{% endif %}
+
+   {% render 'zz-video-popup', 
+      pc_video: block.settings.video_pc,
+      pc_poster: block.settings.poster_pc,
+      mb_video: video_mb,
+      mb_poster: poster_mb,
+      module_id: 'video-btn'
+    %} 
+
+    {% render 'zz-button',
+      type: 'default',
+      color: block.settings.color,
+      text: block.settings.text,
+      size: block.settings.size,
+      backdrop_filter: true,
+      class_name: 'zz-video-btn',
+      icon: '<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M13.635 6.42979C14.5112 6.91507 14.5112 8.08492 13.635 8.57021L6.84517 12.331C5.94149 12.8315 4.79058 12.232 4.79058 11.2608L4.79058 3.73925C4.79058 2.768 5.94148 2.16851 6.84517 2.66904L13.635 6.42979Z" fill="white"/>
+      </svg>
+      '
+    %}
+  <script>
+
+     (function () {
+        const block = document.getElementById(
+          'shopify-block-{{block.id}}'
+        );
+        const videoPopup = block.querySelector('zz-video-popup');
+        const showBtns = block.querySelectorAll('.zz-video-btn');
+        showBtns.forEach(btn => {
+          btn.addEventListener('click', function () {
+            videoPopup.togglePopup();
+          });
+        });
+        
+      })();
+
+  </script>

package/blocks/zz-video-swiper-right.liquid

@@ -153,7 +153,7 @@
     {% if block.settings.is_exposure != false %}
       data-track-zz-exposure="true"
     {% endif %}
-  class='zz-swiper-right zz-swiper-right-{{ block.id }} lg:tw-pr-[100px] '
+  class='zz-swiper-right zz-swiper-right-{{ block.id }}'
 >
   <div class='swiper-wrapper'>
     {% content_for 'blocks' %}
@@ -326,6 +326,22 @@
         });
       }
     }
+    if(isDesktop) {
+      setTimeout(() => {
+        // 获取zzAccessoriesSwiper的宽度， 500px， 631px
+
+        const swiperWidth = zzAccessoriesSwiper.offsetWidth;
+        let paddingRight = 200;
+        if (window.innerWidth >= 1280) {
+          paddingRight = swiperWidth - 631;
+        } else if (window.innerWidth >= 1024) {
+          paddingRight = swiperWidth - 500;
+        }
+        zzAccessoriesSwiper.style.paddingRight = paddingRight + 'px';
+      }, 1000);
+    }
+
+    
   });
 </script>
 

package/package.json

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

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

@@ -226,7 +226,7 @@
 
 <style>
   #shopify-section-{{ section.id }} {
-    background-color: {{ section.settings.background_color }};
+    background: {{ section.settings.background_color }};
     {% if section.settings.top_offset != 0 %}
       margin-top: -{{ section.settings.top_offset }}px;
     {% endif %}

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

@@ -62,7 +62,6 @@
         { "value": "black", "label": "黑色" },
       ],
       "default": "white",
-      "visible_if": "{{ section.settings.mobile_style == 'left_right' }}"
     },
     {
       "type": "image_picker",
@@ -552,14 +551,23 @@
             
       {% else %}
         #shopify-section-{{ section.id }} .zz-collapse-swiper .swiper-pagination-bullets {
+          display: flex;
+          align-items: center;
           bottom: 170px;
           left: 50%;
           transform: translateX(-50%);
           width: calc(100% - 40px);
           {% if section.settings.mobile_style == 'tab' %}
             {% comment %} tab栏展示两行文字 {% endcomment %}
-            background: white;
+            
             border-radius: 10px;
+            {% if section.settings.collapse_button_color == 'black' %}
+              background: white;
+            {% else %}
+              background: #282828;
+            {% endif %}
+
+            
 
           {% else %}
             {% comment %} tab栏展示一行文字 {% endcomment %}
@@ -589,12 +597,21 @@
           {% if section.settings.mobile_style == 'tab' %}
             {% comment %} tab栏展示两行文字 {% endcomment %}
             box-sizing: border-box;
-            line-height: normal;
             border-radius: 10px;
-            vertical-align: top; /* 关键 */
-            color: #00000080;
-            height: 66px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            
+            height: 58px;
             padding: 16px;
+            {% if section.settings.collapse_button_color == 'black' %}
+              color: #00000080;
+              background: none;
+            {% else %}
+              color: #FFFFFF80;
+              background: none;
+
+            {% endif %}
 
           {% else %}
             {% comment %} tab栏展示一行文字 {% endcomment %}
@@ -602,13 +619,13 @@
              color: #FFFFFFB2;
             white-space: nowrap;
             height: auto;
+            background: none;
             
           {% endif %}
           
           margin: 0;
           width: fit-content;
           font-size: 14px;
-          background: none;
           border-top: 0;
           opacity: 1;
          
@@ -619,8 +636,15 @@
         #shopify-section-{{ section.id }} .zz-collapse-swiper .swiper-pagination-bullets .swiper-pagination-bullet-active {
           {% if section.settings.mobile_style == 'tab' %}
             {% comment %} tab栏展示两行文字 {% endcomment %}
-            background:#000000;
-            color: #ffffff;
+            
+
+            {% if section.settings.collapse_button_color == 'black' %}
+              background:#000000;
+              color: #ffffff;
+            {% else %}
+              background: #0000004D;
+              color: #ffffff;
+            {% endif %}
 
           {% else %}
             {% comment %} tab栏展示一行文字 {% endcomment %}

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

@@ -13,6 +13,7 @@
     align-items: center;
     padding-top: {{ section.settings.mobile_padding_top }}px;
     padding-bottom: {{ section.settings.mobile_padding_bottom }}px;
+    overflow: hidden;
   }
   
    #shopify-section-{{ section.id }} .bullet-title , #shopify-section-{{ section.id }} .bullet-desc {

package/snippets/zz-video-popup.liquid

@@ -5,7 +5,7 @@ mb_video: 移动端视频
 mb_poster: 移动端封面
 title: 标题
 content: 内容
-
+module_id: 唯一业务id
 - class_name：自定义类名
 {% endcomment %}
 
@@ -44,6 +44,7 @@ content: 内容
             class: 'tw-w-full tw-h-auto',
             autoplay: false,
             loop: true,
+            module_id: module_id
           %}