zz-shopify-components 0.34.1-beta.9 → 0.35.0

package/assets/zz-components.js

@@ -173,7 +173,6 @@ if (!customElements.get('zz-video-popup')) {
       this.popup = null;
     }
 
-
     connectedCallback() {
       this.querySelectorAll('.togglePopup').forEach((el) => {
         el.addEventListener('click', (event) => {
@@ -184,8 +183,6 @@ if (!customElements.get('zz-video-popup')) {
         });
       });
       this.popup = this.querySelector('.popup');
-
-
     }
 
     disconnectedCallback() {
@@ -226,7 +223,7 @@ if (!customElements.get('zz-video-popup')) {
           backdropFilter: 'blur(30px)',
           onComplete: () => {
             const videos = this.popup.querySelectorAll('video');
-            videos.forEach(video => {
+            videos.forEach((video) => {
               if (window.getComputedStyle(video).display !== 'none') {
                 video.play();
               }
@@ -246,7 +243,7 @@ if (!customElements.get('zz-video-popup')) {
         onComplete: () => {
           this.popup.classList.add('!tw-hidden');
           const videos = this.popup.querySelectorAll('video');
-          videos.forEach(video => {
+          videos.forEach((video) => {
             if (video) {
               video.pause();
             }
@@ -261,7 +258,6 @@ if (!customElements.get('zz-video-popup')) {
   customElements.define('zz-video-popup', ZZVideoPopup);
 }
 
-
 if (!customElements.get('zz-video-handler')) {
   class ZZVideoHandler extends HTMLElement {
     constructor() {
@@ -310,7 +306,6 @@ if (!customElements.get('zz-video-handler')) {
   customElements.define('zz-video-handler', ZZVideoHandler);
 }
 
-
 /**
  * Toast 组件
  */
@@ -430,9 +425,11 @@ if (!customElements.get('zz-video-handler')) {
   function isSafari() {
     const ua = navigator.userAgent;
     // 包含 Safari / WebKit，且不包含 Chrome / CriOS / FxiOS / Android
-    return /Safari/.test(ua)
-      && /AppleWebKit/.test(ua)
-      && !/CriOS|FxiOS|Chrome|Edg|OPR/.test(ua);
+    return (
+      /Safari/.test(ua) &&
+      /AppleWebKit/.test(ua) &&
+      !/CriOS|FxiOS|Chrome|Edg|OPR/.test(ua)
+    );
   }
 
   function isSafari26() {
@@ -442,8 +439,6 @@ if (!customElements.get('zz-video-handler')) {
     return /Version\/26\./.test(ua);
   }
 
-
-
   function lockBodyScroll() {
     if (isSafari26()) {
       scrollTop = window.scrollY;
@@ -506,11 +501,10 @@ document.addEventListener('DOMContentLoaded', (event) => {
     entries.forEach((entry) => {
       const el = entry.target;
       if (entry.isIntersecting) {
-        
       } else {
         if (el.classList.contains('zz-card-animate-list')) {
           // 重置所有
-          el.querySelectorAll('.zz-card-inner').forEach(card => {
+          el.querySelectorAll('.zz-card-inner').forEach((card) => {
             card.classList.remove('is-active');
           });
         }
@@ -518,47 +512,48 @@ document.addEventListener('DOMContentLoaded', (event) => {
     });
   });
 
-
   if (!isDesktop) {
     const switchCard = document.querySelectorAll('.product-switch-card');
     // 监听所有的switchCard 当它完全出现屏幕中时候，定时2秒切换成背景图。移出屏幕时候恢复
 
     if (switchCard.length > 0) {
       const switchTimers = new Map(); // 存储每个卡片的定时器
-      
-      const switchCardObserver = new IntersectionObserver((entries) => {
-        entries.forEach((entry) => {
-          const card = entry.target;
-          console.log('switchCardObserver')
-          if (entry.isIntersecting && entry.intersectionRatio >= 0.8) {
-            // 完全出现在屏幕中，2秒后切换成背景图
-            const timer = setInterval(() => {
-              if (card.classList.contains('switchCard')) {
-                card.classList.remove('switchCard');
-              } else {
-                card.classList.add('switchCard');
+
+      const switchCardObserver = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            const card = entry.target;
+            console.log('switchCardObserver');
+            if (entry.isIntersecting && entry.intersectionRatio >= 0.8) {
+              // 完全出现在屏幕中，2秒后切换成背景图
+              const timer = setInterval(() => {
+                if (card.classList.contains('switchCard')) {
+                  card.classList.remove('switchCard');
+                } else {
+                  card.classList.add('switchCard');
+                }
+              }, 2000);
+              switchTimers.set(card, timer);
+            } else {
+              // 移出屏幕，恢复原状
+              const timer = switchTimers.get(card);
+              if (timer) {
+                clearInterval(timer);
+                switchTimers.delete(card);
               }
-            }, 2000);
-            switchTimers.set(card, timer);
-          } else {
-            // 移出屏幕，恢复原状
-            const timer = switchTimers.get(card);
-            if (timer) {
-              clearInterval(timer);
-              switchTimers.delete(card);
+              card.classList.remove('switchCard');
             }
-            card.classList.remove('switchCard');
-          }
-        });
-      }, {
-        threshold: [0.2, 0.8] // 监听0%、99%和100%的可见度
-      });
-      
-      switchCard.forEach(card => {
+          });
+        },
+        {
+          threshold: [0.2, 0.8], // 监听0%、99%和100%的可见度
+        }
+      );
+
+      switchCard.forEach((card) => {
         switchCardObserver.observe(card);
       });
     }
-
   }
 
   // 处理统一的定位脚本
@@ -568,17 +563,17 @@ document.addEventListener('DOMContentLoaded', (event) => {
     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);
-       
+        const target = document.querySelector(
+          `[data-zz-module-name="${selector}"]`
+        );
+        const headerHeight = 50;
+        const offsetTop = target.offsetTop - headerHeight;
+        window.scrollTo(0, offsetTop);
       }
       return;
     }
   });
 
-
   // zz-card-animate-text.liquid
   const cardListGroup = document.querySelectorAll('.zz-card-animate-list');
   cardListGroup.forEach((list) => {
@@ -591,7 +586,7 @@ document.addEventListener('DOMContentLoaded', (event) => {
       console.log('click card item');
 
       // 重置所有
-      list.querySelectorAll('.zz-card-inner').forEach(el => {
+      list.querySelectorAll('.zz-card-inner').forEach((el) => {
         el.classList.remove('is-active');
       });
 
@@ -599,8 +594,89 @@ document.addEventListener('DOMContentLoaded', (event) => {
       item.classList.add('is-active');
     });
     compIntersectionObserver.observe(list);
-
   });
+});
+
+if (!customElements.get('zz-normal-modal')) {
+  class ZZNormalModal extends HTMLElement {
+    constructor() {
+      super();
+      this.handleOverlayClick = this.handleOverlayClick.bind(this);
+      this.handleDocumentKeydown = this.handleDocumentKeydown.bind(this);
+      this.handleCloseClick = this.handleCloseClick.bind(this);
+    }
+
+    connectedCallback() {
+      this.dialogContent = this.querySelector('[data-modal-content]');
+      this.overlay = this.querySelector('[data-modal-overlay]');
+      this.closeButton = this.querySelector('[data-modal-close]');
 
+      if (this.overlay) {
+        this.overlay.addEventListener('click', this.handleOverlayClick);
+      }
+
+      if (this.closeButton) {
+        this.closeButton.addEventListener('click', this.handleCloseClick);
+      }
+    }
 
-});
+    disconnectedCallback() {
+      if (this.overlay) {
+        this.overlay.removeEventListener('click', this.handleOverlayClick);
+      }
+
+      if (this.closeButton) {
+        this.closeButton.removeEventListener('click', this.handleCloseClick);
+      }
+
+      document.removeEventListener('keydown', this.handleDocumentKeydown);
+    }
+
+    show() {
+      this.previousActiveElement = document.activeElement;
+      this.dialogContent.classList.add('is-open');
+      this.overlay.classList.add('is-open');
+      this.setAttribute('aria-hidden', 'false');
+      window.zzLockBodyScroll && window.zzLockBodyScroll();
+      document.addEventListener('keydown', this.handleDocumentKeydown);
+
+      requestAnimationFrame(() => {
+        if (this.dialogContent) {
+          this.dialogContent.focus();
+        }
+      });
+    }
+
+    hide() {
+      this.dialogContent.classList.remove('is-open');
+      this.overlay.classList.remove('is-open');
+      this.setAttribute('aria-hidden', 'true');
+      window.zzUnlockBodyScroll && window.zzUnlockBodyScroll();
+      document.removeEventListener('keydown', this.handleDocumentKeydown);
+
+      if (
+        this.previousActiveElement &&
+        typeof this.previousActiveElement.focus === 'function'
+      ) {
+        this.previousActiveElement.focus();
+      }
+    }
+
+    handleOverlayClick() {
+      this.hide();
+    }
+
+    handleCloseClick() {
+      console.log('click-close');
+      this.hide();
+    }
+
+    handleDocumentKeydown(event) {
+      if (event.key === 'Escape') {
+        this.hide();
+      }
+    }
+  }
+
+  customElements.define('zz-normal-modal', ZZNormalModal);
+}

package/blocks/zz-card-animate-text.liquid

@@ -100,6 +100,12 @@
       "label": "移动端视频",
       "visible_if": "{{ block.settings.bg_type == 'video' }}"
     },
+    {
+      "type": "text",
+      "id": "class_text",
+      "label": "class 名称",
+      "info": "添加自定义class名称，用于样式控制"
+    },
   ],
   "presets": [
     {
@@ -111,7 +117,7 @@
 
 
 
-<div class="zz-card-inner tw-relative">
+<div class="zz-card-inner tw-relative {{ block.settings.class_text }}">
     <div class="main-face tw-w-full tw-h-full">
       {% render 'zz-img',
             pc_image: block.settings.desktop_image,

package/blocks/zz-normal-swiper.liquid

@@ -142,6 +142,11 @@
       #shopify-block-{{block.id}} .zz-normal-swiper .swiper-slide.swiper-slide-duplicate-active .zz-slide-scale-target {
         transform: scale(1.1);
       }
+      {% if block.settings.click_to_switch %}
+      #shopify-block-{{block.id}} .zz-normal-swiper .swiper-slide {
+        cursor: pointer;
+      }
+      {% endif %}
     }
 
     {% endif %}
@@ -488,6 +493,16 @@
       initialized = true;
       instance = new Swiper(swiperSelector, options);
       if (swiperWrapper) swiperWrapper.classList.remove('tw-invisible');
+      {% if block.settings.click_to_switch %}
+        swiperWrapper.addEventListener('click', (e) => {
+          const slide = e.target.closest('.swiper-slide');
+          if (!slide) return;
+          const realIndex = slide.getAttribute('data-swiper-slide-index');
+          instance.slideToLoop(realIndex);
+          
+        });
+      {% endif %}
+
     }
 
     const root = block.querySelector(swiperSelector);
@@ -722,6 +737,13 @@
       "min": 1,
       "max": 6,
       "step": 1
+    },
+    {
+      "type": "checkbox",
+      "id": "click_to_switch",
+      "label": "是否点击切换",
+      "default": false,
+      
     }
   ],
   "blocks": [

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

@@ -26,6 +26,9 @@
       border-radius: 16px;
       transition: background 0.3s ease;
     }
+    #shopify-block-{{block.id}} .switchCard-text {
+      height: 50px;
+    }
     #shopify-block-{{block.id}}:hover {
       background-color: transparent;
       background-image: url('{{ block.settings.bg_image | image_url }}');
@@ -69,7 +72,7 @@
       {% 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>
+      <p class="switchCard-text 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]" 
           {% if block.settings.card_id != blank %} data-track-zz-element="{{ block.settings.card_id }}-left" {% endif %}

package/blocks/zz-ratio-video.liquid

@@ -72,6 +72,11 @@
       "label": "是否点击播放",
       "default": false
     },
+    {
+      "type": "text",
+      "id": "module_id",
+      "label": "唯一业务id"
+    }
    
   ],
   "presets": [
@@ -108,7 +113,8 @@
       class: 'ratio-video tw-w-full tw-h-auto',
       autoplay: autoplay,
       loop: true,
-      muted: muted
+      muted: muted,
+      module_id: block.settings.module_id
     %}
      {% if block.settings.if_click_play %}
       <div class="video-play-btn tw-absolute tw-top-[50%] tw-left-[50%] tw-translate-x-[-50%] tw-translate-y-[-50%]">

package/blocks/zz-responsive-width-video.liquid

@@ -91,6 +91,11 @@
       "default": 10,
       "info": "单位：px"
     },
+    {
+      "type": "text",
+      "id": "module_id",
+      "label": "唯一业务id"
+    }
    
   ],
   "presets": [
@@ -121,7 +126,8 @@
       class: 'tw-w-full tw-h-auto',
       autoplay: true,
       loop: true,
-      muted: true
+      muted: true,
+      module_id: block.settings.module_id
     %}
    
   </div>

package/blocks/zz-scrollTrigger-block.liquid

@@ -0,0 +1,247 @@
+
+<style>
+  .zz-scrollTrigger-block-{{ block.id }} {
+    width: 100%;
+    height: 100vh;
+    background-color: {{ block.settings.background_color }};
+    padding: 0;
+    margin: 0;
+    position: relative;
+    {% if block.settings.scroll_direction == 'horizontal' %}
+    display: flex;
+    overflow-x: hidden;
+    {% else %}
+    overflow: hidden;
+    {% endif %}
+  }
+    .zz-scrollTrigger-block-{{ block.id }} .zz-scrollTrigger-item .responsive-width-image,
+      .zz-scrollTrigger-block-{{ block.id }} .zz-scrollTrigger-item .zz-video {
+      aspect-ratio: 16 / 9 !important;
+      max-width: 45vw !important;
+      {% comment %} border-radius: 12px; {% endcomment %}
+    }
+
+  .zz-scrollTrigger-block-{{ block.id }} .zz-scrollTrigger-item .content-video-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    {% comment %} border-radius: 12px; {% endcomment %}
+  }
+
+
+  {% if block.settings.scroll_direction == 'horizontal' %}
+  .zz-scrollTrigger-block-{{ block.id }} .zz-scrollTrigger-item {
+    width: 100vw;
+    height: 100vh;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    will-change: transform;
+  }
+  {% else %}
+  .zz-scrollTrigger-block-{{ block.id }} .zz-scrollTrigger-item {
+    width: 100%;
+    height: 100vh;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    will-change: transform, opacity;
+  }
+  {% endif %}
+  
+
+  @media (max-width: 768px) {
+    .zz-scrollTrigger-block-{{ block.id }} .zz-scrollTrigger-item {
+      height: 100vh;
+      width: 100%;
+      {% if block.settings.scroll_direction == 'horizontal' %}
+      width: 100vw;
+      padding: 0 10px;
+      {% else %}
+      padding: 0 10px;
+      {% endif %}
+    }
+  }
+</style>
+
+<div class="zz-scrollTrigger-block zz-scrollTrigger-block-{{ block.id }}" id="zz-scrollTrigger-block-{{ block.id }}">
+  {% for item in block.blocks %}
+    <div class="zz-scrollTrigger-item">
+      {% render item %}
+    </div>
+  {% endfor %}
+</div>
+
+<script>
+    document.addEventListener("DOMContentLoaded", () => {
+        if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') {
+            return;
+        }
+
+        gsap.registerPlugin(ScrollTrigger);
+        ScrollTrigger.config({
+          ignoreMobileResize: true,
+          autoRefreshEvents: "visibilitychange,DOMContentLoaded,load"
+        });
+
+        if (window.innerWidth < 1024) {
+            return;
+        }
+        
+        let items = gsap.utils.toArray('#zz-scrollTrigger-block-{{ block.id }} .zz-scrollTrigger-item');
+        let scrollTriggerInstances = [];
+        
+        if (items.length > 1) {
+            {% if block.settings.scroll_direction == 'horizontal' %}
+            const endValue = window.innerHeight * 1.3 * (items.length - 1);
+            
+            const horizontalST = gsap.to(items, {
+                xPercent: -100 * (items.length - 1),
+                ease: 'none',
+                scrollTrigger: {
+                    trigger: '#zz-scrollTrigger-block-{{ block.id }}',
+                    start: 'top top',
+                    end: `+=${endValue}`,
+                    pin: true,
+                    scrub: 1,
+                    markers: false,
+                    {% if block.settings.enable_snap %}
+                    snap: {
+                        snapTo: 1 / (items.length - 1),
+                        duration: 0.5,
+                        delay: 0.1, 
+                        directional: false,
+                        ease: "power2.inOut"
+                    },
+                    {% endif %}
+                }
+            });
+            scrollTriggerInstances.push(horizontalST.scrollTrigger);
+            {% else %}
+            gsap.set(items[0], { y: 0, opacity: 1 });
+            gsap.set(items.slice(1), { y: '10vh', opacity: 0 });
+            
+            const endValue = window.innerHeight * 1 * (items.length - 1); // 增加滚动距离让动画更平滑
+            
+            let tl = gsap.timeline({
+                scrollTrigger: {
+                    trigger: '#zz-scrollTrigger-block-{{ block.id }}',
+                    start: 'top top',
+                    end: `+=${endValue}`,
+                    pin: true,
+                    scrub: 1,
+                    markers: false,
+                    {% if block.settings.enable_snap %}
+                    snap: {
+                        snapTo: 1 / (items.length - 1),
+                        duration: 0.2,
+                        delay: 0.05, 
+                        directional: true,
+                        ease: "power2.out"
+                    },
+                    {% endif %}
+                    refreshPriority: -1,
+                }
+            });
+            scrollTriggerInstances.push(tl.scrollTrigger);
+            
+            items.forEach((item, index) => {
+                if (index < items.length - 1) {
+                    let currentItem = items[index];
+                    let nextItem = items[index + 1];
+                    
+                    tl.to(currentItem, {
+                        y: '-10vh',
+                        opacity: 0,
+                        duration: 0.1,
+                        ease: "power2.inOut"
+                    })
+                    .fromTo(nextItem, {
+                        y: '10vh',
+                        opacity: 0
+                    }, {
+                        y: 0,
+                        opacity: 1,
+                        duration: 0.1,
+                        ease: "power2.inOut"
+                    });
+                }
+            });
+            {% endif %}
+        }
+        
+        window.addEventListener('beforeunload', () => {
+            scrollTriggerInstances.forEach(st => {
+                if (st) st.kill();
+            });
+        });
+        
+        let resizeTimeout;
+        {% comment %} window.addEventListener('resize', () => {
+            clearTimeout(resizeTimeout);
+            resizeTimeout = setTimeout(() => {
+                ScrollTrigger.refresh();
+            }, 250);
+        }); {% endcomment %}
+    });
+</script>
+
+{% schema %}
+{
+  "name": "ZZ ScrollTrigger Block",
+  "settings": [
+    {
+      "type": "select",
+      "id": "scroll_direction",
+      "label": "滚动方向",
+      "options": [
+        {
+          "value": "vertical",
+          "label": "上下切换"
+        },
+        {
+          "value": "horizontal",
+          "label": "左右切换"
+        }
+      ],
+      "default": "vertical",
+      "info": "选择滚动的方向模式"
+    },
+    {
+      "type": "checkbox",
+      "id": "enable_snap",
+      "label": "启用吸附",
+      "default": false
+    },
+    {
+      "type": "color_background",
+      "id": "background_color",
+      "label": "背景颜色",
+      "default": "transparent"
+    }
+  ],
+  "blocks": [
+    {
+      "type": "@theme"
+    }
+  ],
+  "presets": [
+    {
+      "name": "ScrollTrigger滚动容器Block",
+      "blocks": [
+        {
+          "type": "zz-title",
+          "settings": {
+            "pc_title": "<p>滚动容器Block</p>"
+          }
+        }
+      ]
+    }
+  ]
+}
+{% endschema %}

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

@@ -57,7 +57,8 @@
       class: 'image-video-box tw-w-full tw-h-auto ',
       autoplay: false,
       loop: true,
-      muted: true
+      muted: true,
+      module_id: block.settings.block_module_id
     %}
   {% else %}
     {%
@@ -143,6 +144,13 @@
       "default": "#B2B2B2",
       "label": "内容颜色"
     },
+    {
+      "type": "text",
+      "id": "block_module_id",
+      "label": "唯一业务id",
+      "info": "需要唯一,埋点统计"
+    },
+    
   ],
   "presets": [
     {

package/blocks/zz-video-button.liquid

@@ -113,7 +113,7 @@
       pc_poster: block.settings.poster_pc,
       mb_video: video_mb,
       mb_poster: poster_mb,
-      module_id: 'video-btn'
+      module_id: 'video-btn-popup'
     %} 
 
     {% if block.settings.type == 'primary' %}