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

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-flex-layout-bg-block.liquid

@@ -627,6 +627,11 @@
   {% else %}
     {% assign pc_video = block.settings.pc_background_video %}
   {% endif %}
+
+  {% if block.settings.module_id != blank %}
+    {% assign module_id = block.settings.module_id | append: '_video' %}
+  {% endif %}
+
   {% render 'zz-video',
     pc_video: pc_video,
     pc_poster: block.settings.pc_background_video_poster,
@@ -635,6 +640,7 @@
     lazy: lazy,
     class: 'flex-layout-video',
     autoplay: true,
+    module_id: module_id,
     loop: loop,
     muted: true
   %}

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

@@ -188,6 +188,24 @@
       "label": "移动端圆角 (px)",
       "default": 0
     },
+    {
+      "type": "checkbox",
+      "id": "has_background_image",
+      "label": "是否设置背景图片",
+      "default": false
+    },
+    {
+      "type": "image_picker",
+      "id": "pc_background_image",
+      "label": "PC端背景图片",
+       "visible_if": "{{ block.settings.has_background_image == true }}",
+    },
+    {
+      "type": "image_picker",
+      "id": "mobile_background_image",
+      "label": "移动端背景图片",
+      "visible_if": "{{ block.settings.has_background_image == true }}"
+    },
  
     {
       "type": "header",
@@ -266,7 +284,7 @@
       "type": "text",
       "id": "module_name",
       "label": "模块名称",
-      "info": "用于定位到本模块，可多个section使用同一名称"
+      "info": "用于定位到本模块，可多个section/block使用同一名称"
     },
    {
       "type": "text",
@@ -591,7 +609,7 @@
   {% endif %}
 
 
-  #shopify-block-{{ block.id }} .flex-layout-block-container {
+  .flex-layout-block-container-{{ block.id }} {
     box-sizing: border-box;
     width: 100%;
     display: flex;
@@ -599,12 +617,18 @@
     justify-content: {{ block.settings.mobile_justify }};
     align-items: {{ block.settings.mobile_align }};
     gap: {{ block.settings.mobile_gap }}px;
-    background-color: {{ block.settings.background_color }};
     padding-top: {{ block.settings.mobile_padding_top }}px;
     padding-bottom: {{ block.settings.mobile_padding_bottom }}px;
     padding-left: {{ block.settings.mobile_padding_x }}px;
     padding-right: {{ block.settings.mobile_padding_x }}px;
     border-radius: {{ block.settings.mobile_border_radius  }}px;
+    {% if block.settings.has_background_image and block.settings.mobile_background_image != blank %}
+      background-image: url({{ block.settings.mobile_background_image | image_url: width: 750 }});
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+    {%else %}
+      background: {{ block.settings.background_color }};
+    {% endif %}
   }
 
   @media (min-width: 1024px) {
@@ -614,7 +638,7 @@
         margin-top: -{{ block.settings.offset_top_pc }}px;
       }
     {% endif %}
-    #shopify-block-{{ block.id }} .flex-layout-block-container {
+    .flex-layout-block-container-{{ block.id }} {
       flex-direction: {{ block.settings.pc_direction }};
       justify-content: {{ block.settings.pc_justify }};
       align-items: {{ block.settings.pc_align }};
@@ -633,11 +657,18 @@
         width: {{ block.settings.pc_lg_width }}vw;
         margin: 0 auto;
       {% endif %}
+
+      {% if block.settings.has_background_image and block.settings.pc_background_image != blank %}
+        background-image: url({{ block.settings.pc_background_image | image_url: width: 1800 }});
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+      {% endif %}
+
     }
   }
 
   @media (min-width: 1280px) {
-    #shopify-block-{{ block.id }} .flex-layout-block-container {
+    .flex-layout-block-container-{{ block.id }} {
       {% if block.settings.pc_full_width %}
         width: 100%;
       {% else %}
@@ -658,6 +689,6 @@
     {% if block.settings.is_exposure != false %}
       data-track-zz-exposure="true"
     {% endif %}
-  class="flex-layout-block-container {{ block.settings.self_animation }} {{ block.settings.child_animation }} {{ block.settings.custom_class }}">
+  class="flex-layout-block-container {{ block.settings.self_animation }} {{ block.settings.child_animation }} {{ block.settings.custom_class }} flex-layout-block-container-{{ block.id }}">
     {% content_for 'blocks' %}
 </div>

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-responsive-width-image.liquid

@@ -106,6 +106,40 @@
       "id": "alt",
       "label": "alt",
       "default": "image loading"
+    },
+     {
+      "type": "checkbox",
+      "id": "use_margin",
+      "label": "是否设置上下外边距",
+      "default": false
+    },
+    {
+      "type": "number",
+      "id": "mobile_margin_top",
+      "label": "移动上外边距 (Margin Top)",
+      "default": 0,
+      "visible_if": "{{ block.settings.use_margin == true }}"
+    },
+    {
+      "type": "number",
+      "id": "mobile_margin_bottom",
+      "label": "移动下外边距 (Margin Bottom)",
+      "default": 0,
+      "visible_if": "{{ block.settings.use_margin == true }}"
+    },
+    {
+      "type": "number",
+      "id": "pc_margin_top",
+      "label": "PC上外边距 (Margin Top)",
+      "default": 0,
+      "visible_if": "{{ block.settings.use_margin == true }}"
+    },
+    {
+      "type": "number",
+      "id": "pc_margin_bottom",
+      "label": "PC下外边距 (Margin Bottom)",
+      "default": 0,
+      "visible_if": "{{ block.settings.use_margin == true }}"
     },
     {
       "type": "checkbox",
@@ -180,6 +214,13 @@
   }
 
   @media screen and (max-width: 1023px) {
+    {% if block.settings.use_margin == true %}
+      #shopify-block-{{ block.id }} {
+        margin-top: {{ block.settings.mobile_margin_top }}px;
+        margin-bottom: {{ block.settings.mobile_margin_bottom }}px;
+      }
+    {% endif %}
+    
     #shopify-block-{{ block.id }} .responsive-width-container img {
       aspect-ratio: {{ block.settings.mobile_aspect_ratio }};
     }
@@ -202,6 +243,12 @@
   
   }
   @media screen and (min-width: 1024px) {
+    {% if block.settings.use_margin == true %}
+      #shopify-block-{{ block.id }} {
+        margin-top: {{ block.settings.pc_margin_top }}px;
+        margin-bottom: {{ block.settings.pc_margin_bottom }}px;
+      }
+    {% endif %}
     #shopify-block-{{ block.id }} .responsive-width-container img {
       aspect-ratio: {{ block.settings.desktop_aspect_ratio }};
     }

package/blocks/zz-scroll-animate-bg-text.liquid

@@ -94,8 +94,25 @@
         "label": "文字颜色",
         "default": "#000000"
       },
-  
-
+    {
+      "type": "text",
+      "id": "module_id",
+      "label": "唯一业务id",
+      "info": "需要唯一不要与其他模块重复，用户定位、埋点统计、代码隐藏控制等"
+    },
+    {
+      "type": "checkbox",
+      "id": "is_exposure",
+      "label": "是否曝光统计",
+      "default": false,
+      "info": "勾选后会对Block模块进行曝光统计埋点, 必须填写唯一业务id"
+    },
+    {
+      "type": "text",
+      "id": "module_name",
+      "label": "模块名称",
+      "info": "用于定位到本模块，可多个section/block使用同一名称"
+    },
   ],
   "presets": [
     {
@@ -108,7 +125,16 @@
 }
 {% endschema %}
 
-<div class="sticky-section">
+<div 
+  class="scroll-block-scroll-animate"
+  {% if block.settings.module_id != blank %}
+    data-track-zz-block="{{ block.settings.module_id }}"
+  {% endif %}
+  {% if block.settings.is_exposure != false %}
+    data-track-zz-exposure="true"
+  {% endif %}
+  {% if block.settings.module_name != blank %}data-zz-module-name="{{ block.settings.module_name }}"{% endif %}
+>
   <div class="image-container tw-relative tw-w-full tw-h-full">
     <div class="zz-scroll-animate-bg-image tw-w-full tw-h-full">
       {% render 'zz-img',
@@ -172,7 +198,7 @@
     position: relative;
     background-color: {{ block.settings.background_color }};
   }
-  #shopify-block-{{ block.id }} .sticky-section {
+  #shopify-block-{{ block.id }} .scroll-block-scroll-animate {
     position: sticky;
     width: 100%;
     top: 0;

package/blocks/zz-swiper-title-in-item.liquid

@@ -0,0 +1,156 @@
+<style>
+  @media screen and (max-width: 1023px) {
+    #shopify-block-{{block.id}} {
+      width: calc(100% - 40px);
+      box-sizing: border-box;
+    }
+    #shopify-block-{{block.id}} .image-video-box {
+      border-radius: 12px;
+    }
+  }
+  @media screen and (min-width: 1024px) {
+    #shopify-block-{{block.id}} {
+      width: 500px;
+    }
+    #shopify-block-{{block.id}} .image-video-box {
+      border-radius: 18px;
+    }
+
+  }
+  @media screen and (min-width: 1280px) {
+    #shopify-block-{{block.id}} {
+      width: 631px;
+      
+    }
+
+  }
+
+  #shopify-block-{{block.id}}.swiper-slide-active .active-box-content {
+    display: block !important;
+  }
+</style>
+
+{% assign media_class = 'zz-link-' | append: block.id %}
+
+
+<div class='media-box tw-relative banner-item {{ media_class }}'>
+  {% render 'zz-h6',
+      title: block.settings.heading,
+      title_color: block.settings.title_color,
+      class_name: 'media-box-title tw-text-center max-lg:tw-hidden tw-absolute tw-top-[20px] tw-left-[20px]'
+    %}
+  {% if block.settings.video_pc != blank %}
+    {% if block.settings.video_url_pc != blank %}
+      {% assign pc_video = block.settings.video_url_pc %}
+    {% else %}
+      {% assign pc_video = block.settings.video_pc %}
+    {% endif %}
+    {% render 'zz-video',
+      pc_video: pc_video,
+      pc_poster: block.settings.poster_pc,
+      mb_video: block.settings.video_mb,
+      mb_poster: block.settings.poster_mb,
+      lazy: true,
+      class: 'image-video-box tw-w-full tw-h-auto ',
+      autoplay: false,
+      muted: true
+    %}
+  {% else %}
+    {%
+      render 'zz-img',
+      pc_image: block.settings.poster_pc,
+      mb_image: block.settings.poster_mb,
+      image_alt: block.settings.heading | escape,
+      class_name: 'image-video-box',
+    %}
+  {% endif %}
+</div>
+
+
+<div class='active-box-content max-lg:tw-mt-[20px]'>
+    {% render 'zz-h5',
+      title: block.settings.heading,
+      title_color: block.settings.title_color,
+      class_name: 'tw-text-center lg:tw-hidden !tw-text-[16px]'
+    %}
+    <div class='tw-mt-[8px] lg:tw-mt-[16px]'>
+      {% render 'zz-content-text',
+        text: block.settings.row_content,
+        mb_text: block.settings.row_content,
+        pc_font_size: 16,
+        mobile_font_size: 12,
+        text_color: block.settings.content_color,
+        class_name: 'tw-text-left',
+      %}
+    </div>
+  </div>
+
+
+{% schema %}
+{
+  "name": "Swiper Title In Item",
+  "class": "zz-swiper-title-in-item",
+  "settings": [
+    {
+      "type": "text",
+      "id": "video_url_pc",
+      "label": "Video url PC",
+      "info": "使用cdn视频时，填写视频url。防止大屏幕视频模糊"
+    },
+    {
+      "type": "video",
+      "id": "video_pc",
+      "label": "Video"
+    },
+    {
+      "type": "image_picker",
+      "id": "poster_pc",
+      "label": "Poster"
+    },
+    {
+      "type": "video",
+      "id": "video_mb",
+      "label": "Video(Mobile)"
+    },
+    {
+      "type": "image_picker",
+      "id": "poster_mb",
+      "label": "Poster(Mobile)"
+    },
+    {
+      "type": "text",
+      "id": "heading",
+      "label": "标题"
+    },
+    {
+      "type": "color",
+      "id": "title_color",
+      "default": "#000000",
+      "label": "标题颜色"
+    },
+    {
+      "type": "richtext",
+      "id": "row_content",
+      "label": "description"
+    },
+    {
+      "type": "color",
+      "id": "content_color",
+      "default": "#B2B2B2",
+      "label": "内容颜色"
+    },
+  ],
+  "presets": [
+    {
+      "name": "Swiper Title In Item",
+      "category": "Swiper Item Block"
+    },
+    {
+      "name": "标题内部轮播-Item",
+      "category": "Swiper Item Block"
+    }
+  ]
+}
+{% endschema %}
+
+

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>