zz-shopify-components 0.25.1-beta.2 → 0.25.1-beta.4

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-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 %}
+

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

@@ -0,0 +1,92 @@
+<style>
+  #shopify-block-{{block.id}} {
+      background-color: #F7F8FA;
+     
+  }
+  @media screen and (max-width: 1024px) {
+    #shopify-block-{{block.id}} {
+      border-radius: 10px;
+      width: calc(100% - 75px);
+      box-sizing: border-box; 
+      padding: 30px 20px;
+    }
+    #shopify-block-{{block.id}} .image-video-box {
+    }
+  }
+  @media screen and (min-width: 1024px) {
+    #shopify-block-{{block.id}} {
+      border-radius: 16px;
+      width: 540px;
+      box-sizing: border-box; 
+      padding: 30px;
+    }
+  }
+ 
+
+
+
+</style>
+
+{% assign media_class = 'zz-link-' | append: block.id %}
+
+<div class='media-info-box banner-item {{ media_class }} max-md:tw-rounded-[12px] md:tw-rounded-[16px] tw-relative'>
+<div class="zz-title-comment-item-top tw-flex tw-items-center tw-mb-[20px]">
+ <img src="{{ block.settings.avatar | image_url }}" width="48" height="48" alt="Avatar" class="zz-title-comment-item-avatar tw-w-[36px] tw-h-[36px] tw-rounded-[90px] lg:tw-w-[40px] lg:tw-h-[40px] lg:tw-rounded-[100px]" />
+  <div class="tw-flex-1">
+    {% assign nickname_color = block.settings.text_color
+          | color_modify: 'alpha', 0.6
+        %}
+    <p class="zz-title-comment-item-name tw-text-[14px] tw-ml-[12px] tw-font-semibold" style="color: {{ block.settings.text_color }};">{{ block.settings.name }}</p>
+    <p class="zz-title-comment-item-nickname tw-text-[14px] tw-ml-[12px]" style="color: {{ nickname_color }};">{{ block.settings.nickname }}</p>
+  </div>
+</div>
+
+<div class="zz-title-comment-item-content tw-text-[16px] max-lg:tw-text-[14px] tw-leading-[1.3]" style="color: {{ block.settings.text_color }};">{{ block.settings.content }}</div>
+ 
+  
+</div>
+
+
+{% schema %}
+{
+  "name": "Swiper Comment Item",
+  "class": "zz-swiper-comment-item",
+  "settings": [
+   
+    {
+      "type": "image_picker",
+      "id": "avatar",
+      "label": "Avatar 头像"
+    },
+     {
+      "type": "text",
+      "id": "name",
+      "label": "name",
+    },
+     {
+      "type": "text",
+      "id": "nickname",
+      "label": "nickname",
+    },
+    {
+      "type": "richtext",
+      "id": "content",
+      "label": "评论内容",
+    },
+     {
+        "type": "color",
+        "id": "text_color",
+        "label": "文字颜色",
+        "default": "#000000"
+      },
+
+
+  ],
+  "presets": [
+    {
+      "name": "Swiper Comment Item"
+    },
+  ]
+}
+{% endschema %}
+