zz-shopify-components 0.25.1-beta.3 → 0.25.1-beta.5

package/assets/zz-components.js

@@ -173,26 +173,26 @@ if (!customElements.get('zz-video-popup')) {
       this.popup = null;
     }
 
-    
-  connectedCallback() {
-    this.querySelectorAll('.togglePopup').forEach((el) => {
-      el.addEventListener('click', (event) => {
-        console.log('click');
-        if (event.target.tagName !== 'VIDEO') {
-          this.togglePopup();
-        }
+
+    connectedCallback() {
+      this.querySelectorAll('.togglePopup').forEach((el) => {
+        el.addEventListener('click', (event) => {
+          console.log('click');
+          if (event.target.tagName !== 'VIDEO') {
+            this.togglePopup();
+          }
+        });
       });
-    });
-    this.popup = this.querySelector('.popup');
+      this.popup = this.querySelector('.popup');
 
-    
-  }
 
-  disconnectedCallback() {
-    if (this.popup && document.body.contains(this.popup)) {
-      document.body.removeChild(this.popup); // 清理 popup 元素
     }
-  }
+
+    disconnectedCallback() {
+      if (this.popup && document.body.contains(this.popup)) {
+        document.body.removeChild(this.popup); // 清理 popup 元素
+      }
+    }
 
     togglePopup() {
       if (!this.popup) return;
@@ -381,16 +381,16 @@ if (!customElements.get('zz-video-popup')) {
   function isSafari() {
     const ua = navigator.userAgent;
     // 包含 Safari / WebKit，且不包含 Chrome / CriOS / FxiOS / Android
-    return /Safari/.test(ua) 
+    return /Safari/.test(ua)
       && /AppleWebKit/.test(ua)
       && !/CriOS|FxiOS|Chrome|Edg|OPR/.test(ua);
   }
 
   function isSafari26() {
-      const ua = navigator.userAgent;
-      if (!isSafari()) return false;
-      // 检查 “Version/26.0” 或类似标识
-      return /Version\/26\./.test(ua);
+    const ua = navigator.userAgent;
+    if (!isSafari()) return false;
+    // 检查 “Version/26.0” 或类似标识
+    return /Version\/26\./.test(ua);
   }
 
 
@@ -446,4 +446,22 @@ function getVisibleDisplayMedias(container) {
     }
   }
   return null;
-}
+}
+
+// component 统一的初始化入口
+document.addEventListener('DOMContentLoaded', (event) => {
+  const isDesktop = window.innerWidth > 1023;
+  if (!isDesktop) {
+    const switchCard = document.querySelectorAll('.product-switch-card');
+    if (switchCard.length > 0) {
+      setInterval(() => {
+        switchCard.forEach(card => {
+          card.classList.toggle('switchCard');
+        });
+      }, 3000);
+    }
+
+  }
+
+
+});

package/blocks/zz-bundle-box.liquid

@@ -25,6 +25,12 @@
           "label": "Text Color",
           "default": "#ffffff"
         },
+        {
+          "type": "color",
+          "id": "content_color",
+          "label": "Content Color",
+          "default": "#ffffff"
+        },
         {
           "type": "image_picker",
           "id": "bgImage",
@@ -72,7 +78,7 @@
 }
 {% endschema %}
 
-{% assign content_color = block.settings.text_color
+{% assign content_color = block.settings.content_color
           | color_modify: 'alpha', 0.7
 %}
 <div class='bundle-card-item  lg:tw-rounded-[16px]

package/blocks/zz-bundle-compare-item.liquid

@@ -22,15 +22,26 @@
     ]
   }
 {% endschema %}
+<style>
+  #shopify-block-{{ block.id }} {
+    display: contents;
+  }
+  #shopify-block-{{ block.id }} .tw-daisy-tab {
+    padding: 12px 28px;
+    font-size: 14px;
+    line-height: 1.25;
+    background: #F5F5F6;
+    --tab-padding: 1.25rem;
+}
+</style>
 
 <input
-    type="radio"
-    name="zz-bundle-compare-item-{{ block.id }}"
-    role="tab"
-    class="tw-daisy-tab"
-    aria-label= {{ block.settings.title }}
-    checked="checked" />
- <div role="tabpanel" class="tw-daisy-tab-content tw-w-full tw-p-10">
-
-    <img src="{{ block.settings.image | image_url }}" alt="{{ block.settings.title }}" class="tw-w-full tw-h-full" />
- </div>
+  type="radio"
+  name="my_tabs_1"
+  role="tab"
+  class="tw-daisy-tab"
+  aria-label="{{ block.settings.title }}"
+  checked="checked" />
+<div role="tabpanel" class="tw-daisy-tab-content tw-w-full tw-top-[100px] tw-absolute">
+  <img src="{{ block.settings.image | image_url }}" alt="{{ block.settings.title }}" class=" tw-w-[100%]" />
+</div>

package/blocks/zz-bundle-compare.liquid

@@ -23,11 +23,31 @@
     ]
   }
 {% endschema %}
-{% comment %} <div class="zz-bundle-compare-container">
-    {% content_for 'block', block %}
-</div> {% endcomment %}
 
-<div role="tablist" class="tw-daisy-tabs tw-daisy-tabs-bordered">
+<div class=" tw-relative tw-h-[85vh]">
+  <div role="tablist" class="tw-daisy-tabs tw-w-full tw-daisy-tabs-bordered  tw-overflow-x-auto">
     {% content_for 'blocks' %}
 </div>
+</div>
+
+
+
+<style>
+  .tw-daisy-tabs-bordered .tw-daisy-tab {
+    border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
+    --tw-border-opacity: 0.2;
+    border-style: solid;
+    border-bottom-width: calc(var(--tab-border, 1px) + 1px);
+  }
+
+  #shopify-block-{{ block.id }} .tw-daisy-tabs.tw-overflow-x-auto {
+    -ms-overflow-style: none; /* IE、Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+
+  #shopify-block-{{ block.id }} .tw-daisy-tabs.tw-overflow-x-auto::-webkit-scrollbar {
+    display: none; /* Chrome、Safari */
+  }
+
 
+</style>

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

@@ -171,6 +171,13 @@
       "info": "非全屏展示时有效",
       "visible_if": "{{ block.settings.pc_full_width == false }}"
     },
+    {
+      "type": "number",
+      "id": "pc_padding_x",
+      "label": "PC端左右内边距",
+      "default": 0,
+      "info": "单位：px"
+    },
     {
       "type": "number",
       "id": "pc_fixed_height",
@@ -185,6 +192,16 @@
       "default": 0,
       "info": "默认自适应高度，单位：px",
     },
+    {
+      "type": "range",
+      "id": "pc_border_radius",
+      "min": 0,
+      "max": 50,
+      "step": 1,
+      "unit": "px",
+      "label": "PC端圆角大小",
+      "default": 0
+    },
     {
       "type": "header",
       "content": "📱 移动端布局设置"
@@ -251,6 +268,16 @@
       "label": "移动端底部内边距 (px)",
       "default": 0
     },
+    {
+      "type": "range",
+      "id": "mobile_border_radius",
+      "min": 0,
+      "max": 50,
+      "step": 1,
+      "unit": "px",
+      "label": "移动端圆角大小",
+      "default": 0
+    },
     {
       "type": "header",
       "content": "动画设置"
@@ -281,6 +308,10 @@
       ],
       "default": "none-animation"
     },
+    {
+      "type": "header",
+      "content": "特殊设置"
+    },
     {
       "type": "checkbox",
       "id": "has_link",
@@ -333,7 +364,24 @@
       "id": "overflow_x_hidden",
       "label": "是否禁止横轴移动",
       "default": true
-    }
+    },
+    {
+      "type": "header",
+      "content": "统计相关"
+    },
+   {
+      "type": "text",
+      "id": "module_id",
+      "label": "唯一业务id",
+      "info": "需要唯一不要与其他模块重复，用户定位、埋点统计、代码隐藏控制等"
+    },
+    {
+      "type": "checkbox",
+      "id": "is_exposure",
+      "label": "是否曝光统计",
+      "default": false,
+      "info": "勾选后会对Block模块进行曝光统计埋点, 必须填写唯一业务id"
+    },
     
   ],
   "blocks": [
@@ -456,11 +504,22 @@
     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_link %}
       cursor: pointer;
     {% endif %}
   }
 
+  {% if block.settings.mobile_border_radius != 0 %}
+      #shopify-block-{{ block.id }} .flex-layout-image {
+        border-radius: {{ block.settings.mobile_border_radius }}px;
+      }
+      #shopify-block-{{ block.id }} .flex-layout-video {
+        border-radius: {{ block.settings.mobile_border_radius }}px;
+      }
+  {% endif %}
+
+
   @media (min-width: 1024px) {
     #shopify-block-{{ block.id }} .bg-responsive-block-layout {
       flex-direction: {{ block.settings.pc_direction }};
@@ -469,11 +528,11 @@
       gap: {{ block.settings.pc_gap }}px;
       padding-top: {{ block.settings.pc_padding_top }}px;
       padding-bottom: {{ block.settings.pc_padding_bottom }}px;
-      margin-top: {{ block.settings.pc_margin_top }}px;
+      padding-left: {{ block.settings.pc_padding_x }}px;
+      padding-right: {{ block.settings.pc_padding_x }}px;
+       border-radius: {{ block.settings.pc_border_radius }}px;
+       margin-top: {{ block.settings.pc_margin_top }}px;
       margin-bottom: {{ block.settings.pc_margin_bottom }}px;
-      padding-left: 0px;
-      padding-right: 0px;
-      
       {% if block.settings.pc_full_width %}
         width: 100%;
       {% else %}
@@ -491,6 +550,15 @@
         object-fit: cover;
       }
     {% endif %}
+
+    {% if block.settings.pc_border_radius != 0 %}
+      #shopify-block-{{ block.id }} .flex-layout-image {
+        border-radius: {{ block.settings.pc_border_radius }}px;
+      }
+      #shopify-block-{{ block.id }} .flex-layout-video {
+        border-radius: {{ block.settings.pc_border_radius }}px;
+      }
+    {% endif %}
   }
 
   @media (min-width: 1280px) {
@@ -574,7 +642,14 @@
 
 {% assign layout_class = 'bg-layout' | append: block.id %}
 
-<div class="bg-responsive-block-layout {{ layout_class }} {{ block.settings.self_animation }} {{ block.settings.child_animation }}">
+<div 
+   {% 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 %}
+  class="bg-responsive-block-layout {{ layout_class }} {{ block.settings.self_animation }} {{ block.settings.child_animation }}">
   
     {% content_for 'blocks' %}
 </div>

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

@@ -563,7 +563,7 @@
     {% endif %}
     {% if block.settings.offset_top_mobile != blank %}
       position: relative;
-      top: -{{ block.settings.offset_top_mobile }}px;
+      margin-top: -{{ block.settings.offset_top_mobile }}px;
       
     {% endif %}
     

package/blocks/zz-product-switch-card.liquid

@@ -0,0 +1,147 @@
+<style>
+  #shopify-block-{{block.id}} {
+    background-color: #1A1A1A;
+    
+  }
+  #shopify-block-{{block.id}} .product-img-div {
+    width: 100%;
+    aspect-ratio: 335 / 252;
+  }
+  #shopify-block-{{block.id}} .info-btn {
+    border: 1px solid #FFFFFF
+  }
+
+  #shopify-block-{{block.id}}.switchCard .product-image {
+      opacity: 0;
+  }
+  #shopify-block-{{block.id}}.switchCard {
+      background-color: transparent;
+      background-image: url('{{ block.settings.bg_image | image_url }}');
+      background-size: cover;
+      background-position: center;
+    }
+  @media screen and (min-width: 1024px) {
+    #shopify-block-{{block.id}} {
+      flex: 1;
+      border-radius: 16px;
+      transition: background 0.3s ease;
+    }
+    #shopify-block-{{block.id}}:hover {
+      background-color: transparent;
+      background-image: url('{{ block.settings.bg_image | image_url }}');
+      background-size: cover;
+      background-position: center;
+    }
+    #shopify-block-{{block.id}}:hover .product-image {
+      opacity: 0;
+    }
+    
+  }
+  @media screen and (max-width: 1024px) {
+    #shopify-block-{{block.id}} {
+      width: 100%;
+      border-radius: 10px;
+    }
+  }
+  
+   
+
+</style>
+
+<div class="product-img-div tw-w-full">
+   {%
+      render 'zz-img',
+      pc_image: block.settings.product_image,
+      mb_image: block.settings.product_image,
+      image_alt: block.settings.heading | escape,
+      class_name: 'tw-w-full tw-h-full product-image',
+    %}
+    
+</div>
+<div class="tw-pl-[30px] tw-pr-[30px] tw-pb-[30px] lg:tw-pl-[40px] lg:tw-pr-[40px] lg:tw-pb-[40px]">
+      {% if block.settings.product_name_image %}
+        <img 
+          class="image-name tw-w-auto tw-h-[38px] lg:tw-h-[54px] "
+          src="{{ block.settings.product_name_image | image_url }}" 
+          alt="x1 pro"
+          width="auto" height="54" 
+            />
+      {% else %}
+        <p class="tw-text-white tw-text-[20px]">{{ block.settings.product_name }}</p>
+      {% endif %}
+      <p class="tw-text-[16px] lg:tw-text-[20px] tw-leading-[1.25] tw-mt-[12px] lg:tw-mt-[24px] tw-text-white">{{ block.settings.description }}</p>
+      <div class="tw-flex tw-justify-center tw-gap-[15px] tw-items-center tw-mt-[24px] lg:tw-gap-[20px] lg:tw-mt-[30px]">
+        <a class="tw-block tw-bg-white tw-text-center tw-flex-1 tw-text-black tw-text-[14px] tw-py-[10px] tw-rounded-[4px]" href="{{ block.settings.left_button_url }}">
+          {{ block.settings.left_button_text }}
+        </a>
+        <a class="info-btn tw-text-white tw-text-[14px] tw-text-center tw-flex-1 tw-py-[10px] tw-rounded-[4px]" href="{{ block.settings.right_button_url }}">
+          {{ block.settings.right_button_text }}
+        </a>
+      </div>
+    </div>
+
+{% schema %}
+{
+  "name": "Product Switch Card",
+  "class": "product-switch-card",
+  "settings": [
+    {
+      "type": "image_picker",
+      "id": "bg_image",
+      "label": "背景图片"
+    },
+   
+    {
+      "type": "image_picker",
+      "id": "product_image",
+      "label": "产品图片"
+    },
+     {
+      "type": "image_picker",
+      "id": "product_name_image",
+      "label": "产品名称，商标图片",
+      "info": "兼容带图标的名称"
+    },
+    {
+      "type": "text",
+      "id": "product_name",
+      "label": "产品名称"
+    },
+    {
+      "type": "text",
+      "id": "left_button_text",
+      "label": "左侧按钮文字",
+    },
+    {
+      "type": "text",
+      "id": "right_button_text",
+      "label": "右侧按钮文字",
+    },
+    {
+      "type": "text",
+      "id": "description",
+      "label": "描述",
+    },
+    {
+      "type": "url",
+      "id": "left_button_url",
+      "label": "左侧按钮链接",
+    },
+    {
+      "type": "url",
+      "id": "right_button_url",
+      "label": "右侧按钮链接",
+    },
+  ],
+  "presets": [
+    {
+      "name": "Product Switch Card"
+    },
+  ]
+}
+{% endschema %}
+
+
+  <script>
+    
+  </script>

package/blocks/zz-swiper-blog-item.liquid

@@ -0,0 +1,142 @@
+<style>
+  @media screen and (max-width: 1024px) {
+    #shopify-block-{{block.id}} {
+      width: calc(100% - 50px);
+      box-sizing: border-box; 
+      
+    }
+    #shopify-block-{{block.id}} .image-video-box {
+      width: 100%;
+      aspect-ratio: 335 / 252;
+      object-fit: cover; 
+    }
+  }
+  @media screen and (min-width: 1024px) {
+    #shopify-block-{{block.id}} {
+      width: 340px;
+    }
+    #shopify-block-{{block.id}} .image-video-box {
+      width: 100%;
+      aspect-ratio: 400 / 225;
+      object-fit: cover; 
+    }
+  }
+  @media screen and (min-width: 1280px) {
+    #shopify-block-{{block.id}} {
+      width: 400px;
+    }
+  }
+
+
+
+</style>
+
+
+<a href="{{ block.settings.url }}"  data-track-zz-element="{{ block.settings.click_id }}">
+
+  <div class='media-box banner-item max-md:tw-rounded-[12px] md:tw-rounded-[16px] tw-relative'>
+  {% if block.settings.video_pc != blank  %}
+    
+    {% render 'zz-video',
+      pc_video: block.settings.video_pc,
+      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 max-md:tw-rounded-[12px] md:tw-rounded-[16px]',
+      autoplay: true,
+      muted: true,
+      loop: block.settings.video_loop
+    %}
+  {% 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 max-md:tw-rounded-[12px] md:tw-rounded-[16px]',
+    %}
+  {% endif %}
+   <div class="tw-absolute tw-bottom-[20px] tw-left-[16px] lg:tw-left-[20px]">
+      {% if block.settings.heading != blank %}
+        <div class= 'tw-text-white/60 tw-text-[12px] lg:tw-text-[16px] tw-font-medium'>
+          {{ block.settings.heading }}
+        </div>
+      {% endif %}
+      {% if block.settings.tag_text != blank %}
+        <div class='heading-box tw-font-medium tw-text-white lg:tw-text-[20px] max-lg:tw-text-[14px]'>
+          {{ block.settings.tag_text }}
+        </div>
+      {% endif %}
+   </div>
+
+ 
+  
+</div>
+</a>
+
+
+
+{% schema %}
+{
+  "name": "Swiper Blog Item",
+  "class": "zz-swiper-blog-item",
+  "settings": [
+    {
+      "type": "video",
+      "id": "video_pc",
+      "label": "Video"
+    },
+    {
+      "type": "checkbox",
+      "id": "video_loop",
+      "label": "视频循环播放",
+      "default": false
+    },
+    {
+      "type": "image_picker",
+      "id": "poster_pc",
+      "label": "Poster",
+      "info": "不配置视频就展示这个图"
+    },
+    {
+      "type": "video",
+      "id": "video_mb",
+      "label": "Video(Mobile)"
+    },
+    {
+      "type": "image_picker",
+      "id": "poster_mb",
+      "label": "Poster(Mobile)",
+      "info": "不配置视频就展示这个图"
+    },
+    {
+      "type": "text",
+      "id": "heading",
+      "label": "标题",
+    },
+    {
+      "type": "text",
+      "id": "tag_text",
+      "label": "标签文案",
+    },
+    {
+      "type": "url",
+      "id": "url",
+      "label": "链接",
+    },
+     {
+      "type": "text",
+      "id": "click_id",
+      "label": "点击统计id",
+    },
+  ],
+  "presets": [
+    {
+      "name": "Swiper Blog Item",
+       "category": "Swiper Block"
+    },
+  ]
+}
+{% endschema %}
+