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

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-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-video-preview-btn.liquid

@@ -0,0 +1,192 @@
+{% schema %}
+{
+  "name": "Video Preview Btn",
+  "settings": [
+    
+    {
+      "type": "image_picker",
+      "id": "btn_bg_image_pc",
+      "label": "按钮背景图片 PC"
+    },
+    {
+      "type": "image_picker",
+      "id": "btn_bg_image_mb",
+      "label": "按钮背景图片 Mobile"
+    },
+    {
+      "type": "number",
+      "id": "desktop_width",
+      "label": "PC端宽度",
+      "default": 327,
+      "info": "单位：px"
+    },
+      {
+      "type": "number",
+      "id": "desktop_height",
+      "label": "PC端高度",
+      "default": 327,
+      "info": "单位：px"
+    },
+    {
+      "type": "number",
+      "id": "mb_width",
+      "label": "移动端宽度",
+      "default": 141,
+      "info": "单位：px"
+    },
+      {
+      "type": "number",
+      "id": "mb_height",
+      "label": "移动端高度",
+      "default": 327,
+      "info": "单位：px"
+    },
+    {
+      "type": "checkbox",
+      "id": "if_position_right_bottom",
+      "label": "PC 定位到右下角",
+      "default": true
+    },
+      {
+      "type": "video",
+      "id": "small_video_pc",
+      "label": "预览小视频"
+    },
+    {
+      "type": "image_picker",
+      "id": "small_poster_pc",
+      "label": "预览小视频 封面"
+    },
+    {
+      "type": "video",
+      "id": "small_video_mb",
+      "label": "预览小视频移动端"
+    },
+    {
+      "type": "image_picker",
+      "id": "small_poster_mb",
+      "label": "预览小视频移动端 封面"
+    },
+    {
+      "type": "video",
+      "id": "video_pc",
+      "label": "视频"
+    },
+    {
+      "type": "image_picker",
+      "id": "poster_pc",
+      "label": "视频 封面"
+    },
+    {
+      "type": "video",
+      "id": "video_mb",
+      "label": "视频 移动端"
+    },
+    {
+      "type": "image_picker",
+      "id": "poster_mb",
+      "label": "视频 移动端 封面"
+    },
+
+    {
+      "type": "text",
+      "id": "btn_id",
+      "label": "按钮id",
+      "default": "video_preview_btn"
+    },
+
+
+  ],
+  "presets": [
+    {
+      "name": "Video Preview Btn"
+    }
+  ]
+}
+{% endschema %}
+
+
+<div class="zz-video-preview tw-relative tw-rounded-[4px] lg:tw-rounded-[16px]">
+     {% render 'zz-video',
+            pc_video: block.settings.small_video_pc,
+            pc_poster: block.settings.small_poster_pc,
+            mb_video: block.settings.small_video_mb,
+            mb_poster: block.settings.small_poster_mb,
+            controls: false,
+            lazy: false,
+            class: 'tw-w-full tw-h-full small-preview-video tw-rounded-[4px] lg:tw-rounded-[16px] tw-object-cover',
+            autoplay: true,
+            loop: true
+          %}
+  {% render 'zz-img',
+      pc_image: block.settings.btn_bg_image_pc,
+      mb_image: block.settings.btn_bg_image_mb,
+      image_alt: block.settings.text | escape,
+      id: block.settings.btn_id,
+      class_name: 'zz-video-preview-btn tw-absolute max-lg:tw-top-1/2 max-lg:tw-left-1/2 max-lg:tw--translate-x-1/2 max-lg:tw--translate-y-1/2
+      lg:tw-top-[20px] lg:tw-left-[20px]',
+  %}
+
+</div>
+  
+    {% render 'zz-video-popup', 
+      pc_video: block.settings.video_pc,
+      pc_poster: block.settings.poster_pc,
+      mb_video: block.settings.video_mb,
+      mb_poster: block.settings.poster_mb,
+      module_id: 'view-video-popup'
+    %} 
+
+  <style>
+    #shopify-block-{{block.id}} .zz-video-preview{
+      width: {{ block.settings.mb_width }}px;
+      height: {{ block.settings.mb_height }}px;
+      position: relative;
+      
+    }
+    
+    #shopify-block-{{block.id}} .zz-video-preview-btn{
+      width: 101px;
+      height: auto;
+      cursor: pointer;
+      
+    }
+    @media screen and (min-width: 1024px) {
+      #shopify-block-{{block.id}} .zz-video-preview{
+        width: {{ block.settings.desktop_width }}px;
+        height: {{ block.settings.desktop_height }}px;
+        
+      }
+      #shopify-block-{{block.id}} .zz-video-preview-btn{
+        width: 116px;
+
+      }
+
+      {% if block.settings.if_position_right_bottom %}
+        #shopify-block-{{block.id}} {
+          position: absolute;
+          right: 58px;
+          bottom: 37px;
+        }
+      {% endif %}
+
+    }
+  </style>
+
+  <script>
+
+     (function () {
+        const block = document.getElementById(
+          'shopify-block-{{block.id}}'
+        );
+        const videoPopup = block.querySelector('zz-video-popup');
+        const showBtns = block.querySelectorAll('.zz-video-preview-btn');
+        showBtns.forEach(btn => {
+          btn.addEventListener('click', function () {
+            videoPopup.togglePopup();
+          });
+        });
+        
+      })();
+
+  </script>