zz-shopify-components 0.25.1-beta.0 → 0.25.1-beta.10

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/assets/zz-modal.js

@@ -69,7 +69,7 @@
       border-radius: var(--zz-modal-radius, 12px);
       box-shadow: var(--zz-modal-shadow, 0 20px 60px rgba(0,0,0,0.2));
       width: var(--zz-modal-width, min(720px, 92vw));
-      max-height: var(--zz-modal-max-height, 90vh);
+      max-height: var(--zz-modal-max-height, 100vh);
       display: flex;
       flex-direction: column;
       overflow: hidden;
@@ -80,6 +80,7 @@
       .panel-inner {
         transform-origin: center center;
         transform: translateY(8px) scale(0.98);
+        max-height: var(--zz-modal-max-height, 85vh);
       }
     }
 
@@ -194,6 +195,11 @@
       this._closeBtn = shadow.querySelector('[data-zz-modal-close]');
       this._slotHeader = shadow.querySelector('slot[name="header"]');
       this._slotFooter = shadow.querySelector('slot[name="footer"]');
+      this._closeIconPath = shadow.querySelector('.close-btn svg path');
+
+      if (!this._closeIconPath) return;
+      const color = this.getAttribute('close-icon-color') || 'currentColor';
+      this._closeIconPath.setAttribute('stroke', color);
     }
 
     connectedCallback() {

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

@@ -1,36 +1,71 @@
 {% schema %}
-  {
-    "name": "Compare Tab Item",
-    "settings": [
-      {
-        "type": "text",
-        "id": "title",
-        "label": "Tab标题"
-      },
-      {
-        "type": "image_picker",
-        "id": "image",
-        "label": "图片"
-      },
-    ],
-    "presets": [
-      {
-        "name": "Compare Tab Item",
-        "settings": {
-        }
-      }
-    ]
-  }
+{
+  "name": "Compare Tab Item",
+  "settings": [
+    {
+      "type": "text",
+      "id": "title",
+      "label": "Tab标题"
+    },
+    {
+      "type": "image_picker",
+      "id": "image",
+      "label": "图片"
+    },
+    {
+      "type": "checkbox",
+      "id": "default",
+      "label": "默认选中",
+      "default": false
+    }
+  ],
+  "presets": [
+    {
+      "name": "Compare Tab Item",
+      "settings": {}
+    }
+  ]
+}
 {% 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;
+      font-weight: 700;
+      white-space: nowrap;
+      color: #00000080;
+      --tab-padding: 1.25rem;
+  }
+
+  #shopify-block-{{ block.id }} input.tw-daisy-tab:checked {
+    border-color: #000;
+    color: #000;
+  }
+</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">
+  type='radio'
+  name='my_tabs_1'
+  role='tab'
+  class='tw-daisy-tab'
+  aria-label='{{ block.settings.title }}'
+  {% if block.settings.default %}
+    checked='checked'
+  {% endif %}
+>
 
-    <img src="{{ block.settings.image | image_url }}" alt="{{ block.settings.title }}" class="tw-w-full tw-h-full" />
- </div>
+<div
+  role='tabpanel'
+  class='tw-daisy-tab-content tw-absolute tw-bottom-0 tw-top-[46px] tw-w-full tw-overflow-y-auto  '
+>
+  <img
+    src='{{ block.settings.image | image_url: width: 2000 }}'
+    alt='{{ block.settings.title }}'
+    class=' tw-w-full '
+  >
+</div>

package/blocks/zz-bundle-compare.liquid

@@ -1,33 +1,62 @@
 {% schema %}
-  {
-    "name": "Bundle Compare",
-    "class": "zz-bundle-compare",
-    "settings": [
-        {
-          "type": "image_picker",
-          "id": "pc_image",
-          "label": "PC端图片"
-        },
-    ],
-    "blocks": [
-      {
-        "type": "zz-bundle-compare-item",
-      }
-    ],
-    "presets": [
-      {
-        "name": "Bundle Compare",
-        "settings": {
-        }
-      }
-    ]
-  }
+{
+  "name": "Bundle Compare",
+  "class": "zz-bundle-compare",
+  "settings": [
+    {
+      "type": "image_picker",
+      "id": "pc_image",
+      "label": "PC端图片"
+    }
+  ],
+  "blocks": [
+    {
+      "type": "zz-bundle-compare-item"
+    }
+  ],
+  "presets": [
+    {
+      "name": "Bundle Compare",
+      "settings": {}
+    }
+  ]
+}
 {% 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">
+<!-- PC端 -->
+<div class=' max-lg:tw-hidden'>
+  {{
+    block.settings.pc_image
+    | image_url: width: 4000
+    | image_tag: sizes: '100vw', widths: '4000, 5000', alt: 'Bundle Compare'
+  }}
+</div>
+
+<!-- 移动端 -->
+<div class=' tw-w-full tw-overflow-hidden tw-h-[77vh] tw-relative lg:tw-hidden'>
+  <div
+    role='tablist'
+    class='tw-daisy-tabs tw-w-full tw-overflow-x-auto tw-daisy-tabs-bordered'
+  >
     {% content_for 'blocks' %}
+  </div>
 </div>
 
+<style>
+  
+  #shopify-block-{{ block.id }} .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

@@ -262,6 +262,12 @@
       "type": "header",
       "content": "统计相关"
     },
+    {
+      "type": "text",
+      "id": "module_name",
+      "label": "模块名称",
+      "info": "用于定位到本模块，可多个section使用同一名称"
+    },
    {
       "type": "text",
       "id": "module_id",
@@ -563,7 +569,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 %}
     
@@ -643,6 +649,9 @@
 </style>
 
 <div 
+  {% if block.settings.module_name != blank %}
+    data-zz-module-name="{{ block.settings.module_name }}"
+  {% endif %}
   {% if block.settings.module_id != blank %}
       data-track-zz-block="{{ block.settings.module_id }}"
     {% 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>