zz-shopify-components 0.16.2 → 0.16.3-beta.1

package/assets/zz-components.js

@@ -165,6 +165,103 @@ if (!customElements.get('zz-video-button')) {
   customElements.define('zz-video-button', ZZVideoBtn);
 }
 
+if (!customElements.get('zz-video-popup')) {
+  class ZZVideoPopup extends HTMLElement {
+    constructor() {
+      super();
+      this.togglePopup = this.togglePopup.bind(this);
+      this.popup = null;
+    }
+
+    
+  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');
+
+    
+  }
+
+  disconnectedCallback() {
+    if (this.popup && document.body.contains(this.popup)) {
+      document.body.removeChild(this.popup); // 清理 popup 元素
+    }
+  }
+
+    togglePopup() {
+      if (!this.popup) return;
+      if (this.popup) {
+        // 将 popup 移动到 body
+        document.body.appendChild(this.popup);
+      } else {
+        console.error('Popup element not found.');
+      }
+
+      const isHidden = this.popup.classList.contains('!tw-hidden');
+
+      if (isHidden) {
+        this.showPopup();
+      } else {
+        this.hidePopup();
+      }
+    }
+
+    showPopup() {
+      if (!this.popup) return;
+
+      this.popup.classList.remove('!tw-hidden');
+      gsap.fromTo(
+        this.popup,
+        { opacity: 0 },
+        {
+          opacity: 1,
+          duration: 0.3,
+          ease: 'linear',
+          backdropFilter: 'blur(30px)',
+          onComplete: () => {
+            const videos = this.popup.querySelectorAll('video');
+            videos.forEach(video => {
+              if (window.getComputedStyle(video).display !== 'none') {
+                video.play();
+              }
+            });
+          },
+        }
+      );
+    }
+
+    hidePopup() {
+      if (!this.popup) return;
+
+      gsap.to(this.popup, {
+        opacity: 0,
+        duration: 0.3,
+        ease: 'linear',
+        onComplete: () => {
+          this.popup.classList.add('!tw-hidden');
+          const videos = this.popup.querySelectorAll('video');
+          videos.forEach(video => {
+            if (video) {
+              video.pause();
+            }
+          });
+        },
+      });
+      if (this.popup && document.body.contains(this.popup)) {
+        document.body.removeChild(this.popup); // 清理 popup 元素
+      }
+    }
+  }
+  customElements.define('zz-video-popup', ZZVideoPopup);
+}
+
+
 /**
  * Toast 组件
  */

package/blocks/zz-normal-swiper.liquid

@@ -7,14 +7,78 @@
     box-sizing: border-box;
     overflow: hidden;
     position: relative;
+    --zz-autoplay-delay: {{ block.settings.autoplay_delay | default: 4000 }}ms;
+    --zz-pagination-offset-y: {{ block.settings.pagination_offset_y | default: 0 }}px;
   }
   #shopify-block-{{block.id}} .zz-normal-swiper {
-    width: 100%;
     box-sizing: border-box;
     overflow: hidden;
     position: relative;
     letter-spacing: 0;
+    padding-bottom: 48px;
   }
+  {% if block.settings.pc_full_width == false %}
+
+    /* PC下固定宽度居中 */
+    @media (min-width: 1024px) {
+      #shopify-block-{{block.id}} .zz-normal-swiper {
+        width: {{ block.settings.pc_lg_width }}vw;
+        margin: 0 auto;
+        transition: all 0.6s ease;
+        position: relative;
+      }
+    }
+  
+    @media (min-width: 1280px) {
+      #shopify-block-{{block.id}} .zz-normal-swiper {
+        width: {{ block.settings.pc_xl_width }}px;
+        margin: 0 auto;
+        transition: all 0.6s ease;
+        position: relative;
+      }
+    }
+  
+    /* 👉 当启用 right_to_edge 时，将右侧拉到屏幕边缘 */
+    {% if block.settings.right_to_edge == true %}
+      @media (min-width: 1280px) {
+        #shopify-block-{{block.id}} .zz-normal-swiper {
+          margin-left: calc((100% - {{ block.settings.pc_xl_width }}px) / 2);
+          margin-right: 0;
+          width: calc({{ block.settings.pc_xl_width }}px + (100% - {{ block.settings.pc_xl_width }}px) / 2);
+        }
+        #shopify-block-{{block.id}} .zz-normal-swiper .swiper-pagination {
+          left: 50%;
+          transform: translateX(-50%);
+          width: {{ block.settings.pc_xl_width }}px;
+        }
+      }
+  
+      @media (min-width: 1024px) and (max-width: 1279px) {
+        #shopify-block-{{block.id}} .zz-normal-swiper {
+          margin-left: calc((100% - ({{ block.settings.pc_lg_width }}vw)) / 2);
+          margin-right: 0;
+          width: calc({{ block.settings.pc_lg_width }}vw + (100% - ({{ block.settings.pc_lg_width }}vw)) / 2);
+        }
+        #shopify-block-{{block.id}} .zz-normal-swiper .swiper-pagination {
+          left: 50%;
+          transform: translateX(-50%);
+          width: {{ block.settings.pc_lg_width }}vw;
+        }
+      }
+      @media (max-width: 1024px) {
+        #shopify-block-{{block.id}} .zz-swiper-wrapper {
+          padding-left: 20px;
+        }
+      }
+    {% endif %}
+  
+  {% else %}
+    #shopify-block-{{block.id}} {
+      width: 100%;
+    }
+  {% endif %}
+  
+
 
   #shopify-block-{{block.id}} .swiper-button-next:after,
   #shopify-block-{{block.id}} .swiper-button-prev:after {
@@ -22,7 +86,57 @@
   }
 
   #shopify-block-{{block.id}} .zz-normal-swiper .swiper-pagination-bullets {
-    bottom: 16px;
+    bottom: calc(16px + var(--zz-pagination-offset-y));
+  }
+  {% if block.settings.pagination_type == 'segments' %}
+  /* Segments pagination (mobile defaults) */
+  #shopify-block-{{block.id}} .zz-normal-swiper .zz-pagination-segments {
+    bottom: calc(16px + var(--zz-pagination-offset-y));
+    --seg-width: 24px;
+    --seg-active-width: 60px;
+    --seg-height: 4px;
+    --seg-gap: 2px;
+    --seg-bg: {{ block.settings.mb_pagination_color | color_modify: 'alpha', 0.3 }};
+  }
+  #shopify-block-{{block.id}} .zz-normal-swiper .zz-pagination-segments .swiper-pagination-bullet {
+    margin: 0 var(--seg-gap);
+    width: var(--seg-width);
+    height: var(--seg-height);
+    border-radius: var(--seg-height);
+    background: var(--seg-bg);
+    opacity: 1;
+    transition: width .3s ease, background-color .3s ease;
+  }
+  #shopify-block-{{block.id}} .zz-normal-swiper .zz-pagination-segments .swiper-pagination-bullet-active {
+    width: var(--seg-active-width);
+    position: relative;
+    overflow: hidden;
+  }
+  #shopify-block-{{block.id}} .zz-normal-swiper .zz-pagination-segments .swiper-pagination-bullet-active::after {
+    content: '';
+    position: absolute;
+    left: 0; top: 0; bottom: 0;
+    width: 0%;
+    background: #000;
+    {% if block.settings.autoplay %}
+    animation: zz-pb-{{block.id}} var(--zz-autoplay-delay) linear forwards;
+    {% endif %}
+  }
+  @keyframes zz-pb-{{block.id}} {
+    from { width: 0%; }
+    to { width: 100%; }
+  }
+  {% endif %}
+  /* Ensure progressbar pagination is visible and colored */
+  #shopify-block-{{block.id}} .zz-normal-swiper .swiper-pagination-progressbar,
+  #shopify-block-{{block.id}} .zz-normal-swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
+    height: 4px;
+  }
+  #shopify-block-{{block.id}} .zz-normal-swiper .swiper-pagination-progressbar {
+    background: {{ block.settings.mb_pagination_color | color_modify: 'alpha', 0.15 }};
+  }
+  #shopify-block-{{block.id}} .zz-normal-swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
+    background: {{ block.settings.mb_pagination_color }};
   }
   #shopify-block-{{block.id}} .zz-normal-swiper .swiper-pagination-bullet {
     margin: 0 4px;
@@ -39,7 +153,24 @@
 
   @media screen and (min-width: 1024px) {
     #shopify-block-{{block.id}} .zz-normal-swiper .swiper-pagination-bullets {
-      bottom: 24px;
+      bottom: calc(24px + var(--zz-pagination-offset-y));
+    }
+    {% if block.settings.pagination_type == 'segments' %}
+    /* Segments pagination (desktop overrides) */
+    #shopify-block-{{block.id}} .zz-normal-swiper .zz-pagination-segments {
+      bottom: calc(24px + var(--zz-pagination-offset-y));
+      --seg-width: 48px;
+      --seg-active-width: 120px;
+      --seg-height: 6px;
+      --seg-gap: 4px;
+      --seg-bg: {{ block.settings.pagination_color | color_modify: 'alpha', 0.3 }};
+    }
+    {% endif %}
+    #shopify-block-{{block.id}} .zz-normal-swiper .swiper-pagination-progressbar {
+      background: {{ block.settings.pagination_color | color_modify: 'alpha', 0.15 }};
+    }
+    #shopify-block-{{block.id}} .zz-normal-swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
+      background: {{ block.settings.pagination_color }};
     }
     #shopify-block-{{block.id}} .zz-normal-swiper .swiper-pagination-bullet {
       margin: 0 6px;
@@ -61,6 +192,10 @@
     #shopify-block-{{block.id}} .swiper-button-prev { left: 16px; }
     #shopify-block-{{block.id}} .swiper-button-next { right: 16px; }
   }
+  /* Reset segments progress animation when slide changes */
+  #shopify-block-{{block.id}} .zz-normal-swiper .zz-pagination-segments .swiper-pagination-bullet::after {
+    width: 0%;
+  }
 
   @media screen and (max-width: 1023px) {
     {% if block.settings.show_navigation_mobile == false %}
@@ -97,7 +232,7 @@
   {% endif %}
 
   {% if block.settings.pagination_type != 'none' %}
-    <div class='swiper-pagination'></div>
+    <div class='swiper-pagination {% if block.settings.pagination_type == "segments" %} zz-pagination-segments {% endif %}'></div>
   {% endif %}
 </div>
 
@@ -124,7 +259,7 @@
       pagination: {
         el: '#shopify-block-{{block.id}} .swiper-pagination',
         clickable: true,
-        type: '{{ block.settings.pagination_type }}',
+        type: '{% if block.settings.pagination_type == "segments" %}bullets{% else %}{{ block.settings.pagination_type }}{% endif %}',
       },
       {% endif %}
       {% if block.settings.show_navigation %}
@@ -220,6 +355,36 @@
       "label": "自适应高度",
       "default": false
     },
+    {
+      "type": "checkbox",
+      "id": "pc_full_width",
+      "label": "内容区域是否全屏展示",
+      "default": false
+    },
+    {
+      "type": "number",
+      "id": "pc_xl_width",
+      "label": "XL屏幕内容区域宽度 (px)",
+      "default": 1200,
+      "info": "非全屏展示时有效",
+      "visible_if": "{{ block.settings.pc_full_width == false }}"
+    },
+    {
+      "type": "number",
+      "id": "pc_lg_width",
+      "label": "LG屏幕内容区域宽度 (vw)",
+      "default": 90,
+      "info": "非全屏展示时有效",
+      "visible_if": "{{ block.settings.pc_full_width == false }}"
+    },
+
+    {
+      "type": "checkbox",
+      "id": "right_to_edge",
+      "label": "内容区域是否靠右对齐到边缘",
+      "visible_if": "{{ block.settings.pc_full_width == false }}",
+      "default": true
+    },
 
     {
       "type": "checkbox",
@@ -246,10 +411,17 @@
         { "value": "none", "label": "隐藏" },
         { "value": "bullets", "label": "圆点" },
         { "value": "fraction", "label": "分式" },
-        { "value": "progressbar", "label": "进度条" }
+        { "value": "progressbar", "label": "进度条" },
+        { "value": "segments", "label": "分段进度" }
       ],
       "default": "bullets"
     },
+    {
+      "type": "number",
+      "id": "pagination_offset_y",
+      "label": "分页器垂直偏移(px)",
+      "default": 0
+    },
     {
       "type": "color",
       "id": "pagination_color",

package/blocks/zz-ratio-video.liquid

@@ -1,7 +1,7 @@
 {% schema %}
 {
   "name": "Ratio Video",
-  "class": "ratio-video",
+  "class": "ratio-video-block",
   "settings": [
     {
       "type": "header",
@@ -66,6 +66,12 @@
       "default": 10,
       "info": "单位：px"
     },
+    {
+      "type": "checkbox",
+      "id": "if_click_play",
+      "label": "是否点击播放",
+      "default": false
+    },
    
   ],
   "presets": [
@@ -80,6 +86,11 @@
 }
 {% endschema %}
 
+ {% assign autoplay = true %}
+{% if block.settings.if_click_play %}
+  {% assign autoplay = false %}
+{% endif %} 
+
 
     {% render 'zz-video',
       pc_video: block.settings.video_pc,
@@ -88,10 +99,21 @@
       mb_poster: block.settings.poster_mb,
       lazy: true,
       class: 'ratio-video tw-w-full tw-h-auto',
-      autoplay: true,
+      autoplay: autoplay,
       loop: true,
       muted: true
     %}
+     {% 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%]">
+        <svg class="max-lg:tw-hidden" width="80" height="81" viewBox="0 0 80 81" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M64.0712 34.896C67.939 37.2219 67.939 42.8289 64.0712 45.1548L34.0973 63.1798C30.1079 65.5788 25.0272 62.7055 25.0272 58.0504L25.0272 22.0004C25.0272 17.3453 30.1079 14.472 34.0973 16.871L64.0712 34.896Z" fill="white"/>
+        </svg>
+        <svg class="lg:tw-hidden"  width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M48.3232 26.1313C51.2404 27.8856 51.2404 32.1144 48.3232 33.8687L25.7164 47.4634C22.7076 49.2727 18.8757 47.1056 18.8757 43.5947L18.8757 16.4053C18.8757 12.8944 22.7076 10.7273 25.7164 12.5366L48.3232 26.1313Z" fill="white"/>
+        </svg>
+      </div>
+      
+    {% endif %}
 
 <style>
  
@@ -101,6 +123,11 @@
     overflow: hidden;
     box-sizing: border-box;
     overflow: hidden;
+    {% if block.settings.if_click_play %}
+      cursor: pointer;
+      position: relative;
+
+    {% endif %}
   }
 
 
@@ -111,5 +138,41 @@
     }
   }
 
-
 </style>
+
+{% if block.settings.if_click_play %}
+  <script>
+    (function () {
+      const block = document.getElementById('shopify-block-{{block.id}}');
+      const videoPlayBtn = block.querySelector('.video-play-btn');
+      const videoPlayAndPause = block.querySelectorAll('.ratio-video');
+      videoPlayBtn.addEventListener('click', function (e) {
+        e.stopPropagation();
+        videoPlayAndPause.forEach((video) => {
+          if (video.classList.contains('tw-hidden')) {
+            return;
+          }
+          if (video.paused) {
+            video.play();
+            videoPlayBtn.classList.add('tw-hidden');
+          } else {
+            video.pause();
+            videoPlayBtn.classList.remove('tw-hidden');
+          }
+        });
+        
+      });
+      videoPlayAndPause.forEach((video) => {
+        video.addEventListener('click', function () {
+          if (this.paused) {
+            this.play();
+            videoPlayBtn.classList.add('tw-hidden');
+          } else {
+            this.pause();
+            videoPlayBtn.classList.remove('tw-hidden');
+          }
+        });
+      });
+    })();
+  </script>
+{% endif %}

package/blocks/zz-video-swiper-jp-item.liquid

@@ -0,0 +1,163 @@
+<style>
+  @media screen and (max-width: 1024px) {
+    #shopify-block-{{block.id}} {
+      width: calc(100% - 72px);
+      box-sizing: border-box; 
+      transform: translateX(-24px);
+    }
+    #shopify-block-{{block.id}} .image-video-box {
+      width: 100%;
+      aspect-ratio: 3 / 4;
+      object-fit: cover; 
+    }
+  }
+  @media screen and (min-width: 1024px) {
+    #shopify-block-{{block.id}} {
+      width: 800px;
+    }
+    #shopify-block-{{block.id}} .image-video-box {
+      width: 100%;
+      aspect-ratio: 16 / 9;
+      object-fit: cover; 
+    }
+  }
+  @media screen and (min-width: 1280px) {
+    #shopify-block-{{block.id}} {
+      width: 960px;
+    }
+  }
+
+
+
+</style>
+
+{% assign media_class = 'zz-link-' | append: block.id %}
+
+<div class='media-box banner-item {{ media_class }} max-md:tw-rounded-[12px] md:tw-rounded-[16px] tw-relative'>
+  {% if block.settings.video_pc != blank or block.settings.video_url_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 max-md:tw-rounded-[12px] md:tw-rounded-[16px]',
+      autoplay: true,
+      muted: true,
+      loop: block.settings.video_loop
+    %}
+
+    {% render 'zz-video-popup', 
+      pc_video: pc_video,
+      pc_poster: block.settings.poster_pc,
+      mb_video: block.settings.video_mb,
+      mb_poster: block.settings.poster_mb,
+  
+    %} 
+  {% 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 %}
+  {% if block.settings.heading != blank %}
+    <div class='heading-box tw-font-bold tw-text-white tw-absolute lg:tw-text-[28px] max-lg:tw-text-[18px] max-lg:tw-left-[20px] max-lg:tw-top-[20px] lg:tw-bottom-[40px] lg:tw-left-[48px]'>
+      {{ block.settings.heading }}
+    </div>
+  {% endif %}
+
+  {% if block.settings.btn_text != blank %}
+    <div class='show-video-btn tw-cursor-pointer tw-flex tw-items-center tw-gap-[4px] tw-text-white tw-absolute max-lg:tw-right-[20px] max-lg:tw-bottom-[20px] lg:tw-right-[40px] lg:tw-bottom-[40px]'>
+      {{ block.settings.btn_text }}
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M11.0005 16.9497L15.9503 12L11.0005 7.05025" stroke="white" stroke-opacity="0.7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+        
+    </div>
+  {% endif %}
+  
+</div>
+
+
+{% schema %}
+{
+  "name": "ZZ Video Img JP Item",
+  "class": "zz-video-img-jp-item",
+  "settings": [
+    {
+      "type": "text",
+      "id": "video_url_pc",
+      "label": "Video url PC",
+      "info": "使用cdn视频时，填写视频url。防止大屏幕视频模糊"
+    },
+    {
+      "type": "video",
+      "id": "video_pc",
+      "label": "Video"
+    },
+    {
+      "type": "checkbox",
+      "id": "video_loop",
+      "label": "视频循环播放",
+      "default": false
+    },
+    {
+      "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": "text",
+      "id": "btn_text",
+      "label": "按钮文案",
+    },
+
+  ],
+  "presets": [
+    {
+      "name": "ZZ Video Img JP Item"
+    },
+  ]
+}
+{% endschema %}
+
+
+
+<script>
+  (function () {
+    const block = document.getElementById(
+      'shopify-block-{{block.id}}'
+    );
+    const videoPopup = block.querySelector('zz-video-popup');
+    const showBtn = block.querySelector('.show-video-btn');
+    showBtn.addEventListener('click', function () {
+      videoPopup.togglePopup();
+    });
+    
+  })();
+</script>

package/blocks/zz-video-swiper-perview-jp.liquid

@@ -0,0 +1,489 @@
+{% assign block_size = block.blocks.size %}
+{% assign bullets_width_half = block_size
+  | minus: 1
+  | times: 14
+  | plus: 6
+  | divided_by: 2.0
+  | ceil
+%}
+{% assign btn_offset = bullets_width_half | plus: 14 | plus: 36 %}
+
+<style>
+  #shopify-block-{{block.id}} {
+    background: {{ block.settings.bg_color }};
+    width: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+    position: relative;
+  }
+  #shopify-block-{{block.id}} .zz-video-swiper-preview {
+    width: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+    height: fit-content;
+    position: relative;
+    letter-spacing: 0;
+  }
+
+  #shopify-block-{{block.id}} .swiper-button-next,
+  #shopify-block-{{block.id}} .swiper-button-prev {
+    top: 0;
+    width: 48px;
+    height: 48px;
+  }
+  #shopify-block-{{block.id}} .swiper-button-prev {
+    left: unset;
+    right: 50%;
+  }
+  #shopify-block-{{block.id}} .swiper-button-next {
+    right: unset;
+    left: 50%;
+  }
+  #shopify-block-{{block.id}} .swiper-button-next:after,
+  #shopify-block-{{block.id}} .swiper-button-prev:after {
+    display: none;
+  }
+  #shopify-block-{{block.id}} .swiper-button-next.swiper-button-disabled, #shopify-block-{{block.id}} .swiper-button-prev.swiper-button-disabled {
+    opacity: 0.5;
+  }
+
+  #shopify-block-{{block.id}} .zz-video-swiper-preview .swiper-pagination-bullets .swiper-pagination-bullet {
+    margin: 0 8px;
+    width: 48px;
+    height: 4px;
+    border-radius: 3px;
+    background: {{ block.settings.pagination_color | color_modify: 'alpha', 0.2 }};
+    opacity: 1;
+    transition: 0.3s;
+  }
+  #shopify-block-{{block.id}} .zz-video-swiper-preview .swiper-pagination-bullets .swiper-pagination-bullet-active {
+    position: relative;
+    width: 120px;
+    {% if block.settings.if_autoplay == false %}
+      background-color: {{ block.settings.pagination_color }};
+    {% endif %}
+  }
+  #shopify-block-{{block.id}} .zz-video-swiper-preview .swiper-pagination-bullets .swiper-pagination-bullet-active .progress-line {
+    display: block;
+    position: absolute;
+    width:0;
+    height: 4px;
+    left: 0;
+    top: 0;
+    background-color: {{ block.settings.pagination_color }};
+    border-radius: 3px;
+  }
+  #shopify-block-{{block.id}} .swiper-slide-active .active-box-content {
+    display: block !important;
+  }
+
+  @media screen and (max-width: 1023px) {
+    #shopify-block-{{block.id}} .zz-video-swiper-preview {
+      padding-bottom: 68px;
+    }
+
+    #shopify-block-{{block.id}} .zz-video-swiper-preview .swiper-slide .banner-item::after {
+      display: none;
+    }
+    #shopify-block-{{block.id}} .swiper-button-next,
+    #shopify-block-{{block.id}} .swiper-button-prev {
+      z-index: 99;
+      top: unset;
+      bottom: 0;
+      width: 36px;
+      height: 36px;
+    }
+    #shopify-block-{{block.id}} .swiper-button-prev {
+      left: 50%;
+      transform: translate(-{{ btn_offset }}px, 0px);
+    }
+    #shopify-block-{{block.id}} .swiper-button-next {
+      left: unset;
+      right: 50%;
+      transform: translate({{ btn_offset }}px, 0px);
+    }
+    #shopify-block-{{block.id}} .zz-video-swiper-preview .swiper-pagination-bullets .swiper-pagination-bullet {
+      margin: 0 4px;
+      width: 6px;
+      height: 6px;
+      background-color: {{ block.settings.mb_pagination_color | color_modify: 'alpha', 0.3 }};
+    }
+    #shopify-block-{{block.id}} .zz-video-swiper-preview .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
+      width: 6px;
+      background-color: {{ block.settings.mb_pagination_color }};
+    }
+  }
+  @media screen and (min-width: 1024px) {
+    #shopify-block-{{block.id}} .zz-video-swiper-preview { 
+      padding-bottom: 68px;
+    }
+    #shopify-block-{{block.id}} .zz-video-swiper-preview .swiper-pagination-bullets {
+        bottom: 21px;
+    }
+    #shopify-block-{{block.id}} .swiper-button-prev {
+      transform: translate(-500px, 220px);
+    }
+    #shopify-block-{{block.id}} .swiper-button-next {
+      transform: translate(500px, 220px);
+    }
+    
+
+
+
+  }
+  @media screen and (min-width: 1280px) {
+    
+    #shopify-block-{{block.id}} .swiper-button-prev {
+      transform: translate(-594px, 260px);
+    }
+    #shopify-block-{{block.id}} .swiper-button-next {
+      transform: translate(594px, 260px);
+    }
+
+  }
+</style>
+
+<div
+  class='zz-video-swiper-preview zz-video-swiper-preview-{{ block.id }}'
+>
+  <div class='swiper-wrapper'>
+    {% content_for 'blocks' %}
+  </div>
+
+  <!-- If we need navigation buttons -->
+  <div class='swiper-button-prev {% if block_size <= 1 %} tw-hidden {% endif %}'>
+    <span class='lg:tw-hidden'>
+      {% if block.settings.prev_icon != blank %}
+        {{
+          block.settings.prev_icon
+          | image_url: width: 48
+          | image_tag:
+            alt: 'prev',
+            class: 'tw-w-full tw-h-full tw-object-contain'
+        }}
+      {% else %}
+        {% render 'zz-prev-next-btn',
+          type: 'prev',
+          color_type: block.settings.prev_next_type
+        %}
+      {% endif %}
+      
+    </span>
+    <span class='max-lg:tw-hidden'>
+      {% render 'zz-prev-next-blur-icon', type: 'prev', color_type: 'light' %}
+    </span>
+  </div>
+  <div class='swiper-button-next {% if block_size <= 1 %} tw-hidden {% endif %}'>
+    <span class='lg:tw-hidden'>
+      {% if block.settings.next_icon != blank %}
+        {{
+          block.settings.next_icon
+          | image_url: width: 48
+          | image_tag:
+            alt: 'prev',
+            class: 'tw-w-full tw-h-full tw-object-contain'
+        }}
+      {% else %}
+        {% render 'zz-prev-next-btn',
+          type: 'next',
+          color_type: block.settings.prev_next_type
+        %}
+      {% endif %}
+      
+    </span>
+    <span class='max-lg:tw-hidden'>
+      {% render 'zz-prev-next-blur-icon', type: 'next', color_type: 'light' %}
+    </span>
+  </div>
+
+  <!-- Pagination indicator -->
+  <div class='swiper-pagination'></div>
+</div>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    const swiperClassName = '.zz-video-swiper-preview-{{ block.id }}';
+    let isDesktop = window.innerWidth > 1023;
+    // 获取 class zz-accessories-swiper 的元素 且data-id 为 block.id 的元素
+    const zzAccessoriesSwiper = document.querySelector(swiperClassName);
+    const swiperWrapper = zzAccessoriesSwiper.querySelector('.swiper-wrapper');
+    // 获取当前 swiper-wrapper 下面 所有 第一层 div
+    const swiperSlides = swiperWrapper.querySelectorAll(':scope > div');
+    // 给每个 swiper-slide 添加 class swiper-slide
+    swiperSlides.forEach((slide) => {
+      slide.classList.add('swiper-slide');
+    });
+    let progressInterval = null;
+    let progressTimer = null;
+
+    const prevSwiper = new Swiper(swiperClassName, {
+      {% if block.settings.if_loop == true %}
+      loop: true,
+      {% endif %}
+      slidesPerView: 'auto',
+      initialSlide: isDesktop ? 1 : 0,
+      centeredSlides: true,
+      spaceBetween: isDesktop ? 24 : 12,
+      navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+      },
+      pagination: {
+        el: '.swiper-pagination',
+        clickable: true,
+        renderBullet: function (index, className) {
+          return `
+          <span class="${className}">
+            <span class="progress-line"></span>
+          </span>`;
+        },
+      },
+      effect: 'slide',
+      on: {
+        slideChangeTransitionEnd: function () {
+          handleVideoOnSlideChange();
+        },
+        slideChangeTransitionStart: function () {
+          if (progressInterval) {
+            clearInterval(progressInterval);
+          }
+          if (progressTimer) {
+            clearTimeout(progressTimer);
+          }
+        },
+        slideChange: function () {
+          if (isDesktop) {
+            const block = document.getElementById('shopify-block-{{block.id}}');
+            block
+              .querySelectorAll('.swiper-pagination-bullet')
+              .forEach((bullet) => {
+                const progressBar = bullet.querySelector('.progress-line');
+                progressBar.style.transition = 'none';
+                progressBar.style.width = '0';
+              });
+          }
+        },
+      },
+    });
+
+    // 使用 Intersection Observer 监听 swiper-wrapper 的可见性
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            // 当 swiper-wrapper 第一次出现在视口中时执行
+            setTimeout(() => {
+              handleVideoOnSlideChange();
+            }, 200);
+            // 执行一次后取消观察
+            observer.unobserve(entry.target);
+          }
+        });
+      },
+      {
+        threshold: 0.2, // 当 20% 的元素可见时触发
+      }
+    );
+
+    if (swiperWrapper) {
+      observer.observe(swiperWrapper);
+    }
+
+    function getVisibleDisplayMedias(container) {
+      const videos = container.querySelectorAll('video');
+      const video = Array.from(videos).find((video) => {
+        const style = window.getComputedStyle(video);
+        return style.display !== 'none';
+      });
+      if (video) {
+        return {
+          video,
+          type: 'video',
+        };
+      } else {
+        const images = container.querySelectorAll('img');
+        const image = Array.from(images).find((image) => {
+          const style = window.getComputedStyle(image);
+          return style.display !== 'none';
+        });
+        if (image) {
+          return {
+            image,
+            type: 'image',
+          };
+        }
+      }
+      return null;
+    }
+    const endedHandler = function () {
+
+      if (prevSwiper.isEnd) {
+        prevSwiper.slideTo(0);
+      } else {
+        prevSwiper.slideNext();
+      }
+      if (progressInterval) {
+        clearInterval(progressInterval);
+      }
+      this.removeEventListener('ended', endedHandler);
+    };
+
+    function updataMediaProgress(type, videoDom) {
+      const block = document.getElementById('shopify-block-{{block.id}}');
+      const activeBullet = block.querySelector(
+        '.swiper-pagination-bullet-active'
+      );
+      const progressBar = activeBullet.querySelector('.progress-line');
+      if (progressBar) {
+        if (progressInterval) {
+          clearInterval(progressInterval);
+        }
+        if (progressTimer) {
+          clearTimeout(progressTimer);
+        }
+        if (type === 'video') {
+          // 添加新的事件监听器
+          if (isDesktop) {
+            progressInterval = setInterval(() => {
+              const progress = videoDom.currentTime / videoDom.duration;
+              progressBar.style.transition = '0.2s';
+              progressBar.style.width = `${progress * 100}%`;
+            }, 100);
+          }
+
+          videoDom.addEventListener('ended', endedHandler);
+        } else if (type === 'image') {
+          if (isDesktop) {
+            progressBar.style.transition = '10s linear';
+            progressBar.style.width = '100%';
+          }
+          progressTimer = setTimeout(() => {
+            if (prevSwiper.isEnd) {
+              prevSwiper.slideTo(0);
+            } else {
+              prevSwiper.slideNext();
+            }
+          }, 10000);
+        }
+      }
+    }
+
+    function handleVideoOnSlideChange() {
+      // 暂停所有视频
+      const block = document.getElementById('shopify-block-{{block.id}}');
+      const allvideo = block.querySelectorAll('video');
+      // 播放当前 active slide 中的视频
+      const activeSlide = block.querySelector('.swiper-slide-active');
+      const media = getVisibleDisplayMedias(activeSlide);
+      // 重置进度条
+      if (isDesktop) {
+        const activeBullet = block.querySelector(
+          '.swiper-pagination-bullet-active'
+        );
+        if (!activeBullet) {
+          return;
+        }
+        const progressBar = activeBullet.querySelector('.progress-line');
+        if (progressBar) {
+          progressBar.style.transition = 'none';
+          progressBar.style.width = '0';
+        }
+      }
+      if (media.type === 'video') {
+        allvideo.forEach((item) => {
+          if (item === media.video) {
+            media.video.currentTime = 0;
+            if (media.video.paused) {
+              media.video.play();
+            }
+
+            if('{{ block.settings.if_autoplay }}' == 'true') {
+              updataMediaProgress('video', media.video);
+            }
+          } else {
+            item.pause();
+          }
+        });
+      } else if (media.type === 'image') {
+        // 处理图片的情况
+        if('{{ block.settings.if_autoplay }}' == 'true') {
+          updataMediaProgress('image', media.image);
+        }
+        allvideo.forEach((item) => {
+          item.pause();
+        });
+      }
+    }
+  });
+</script>
+
+{% schema %}
+{
+  "name": "Video Swiper JP Preview",
+  "class": "zz-video-jp-preview-block",
+  "settings": [
+    {
+      "type": "color",
+      "id": "bg_color",
+      "default": "#ffffff",
+      "label": "背景色"
+    },
+
+    {
+      "type": "color",
+      "id": "pagination_color",
+      "default": "#ffffff",
+      "label": "轮播导航圆圈颜色"
+    },
+    {
+      "type": "color",
+      "id": "mb_pagination_color",
+      "default": "#000000",
+      "label": "移动端轮播导航圆圈颜色"
+    },
+    {
+      "type": "checkbox",
+      "id": "if_loop",
+      "label": "是否循环播放",
+      "default": false
+    },
+    {
+      "type": "checkbox",
+      "id": "if_autoplay",
+      "label": "是否自动轮播",
+      "default": false
+    },
+    {
+      "type": "select",
+      "id": "prev_next_type",
+      "label": "prev next 颜色",
+      "options": [
+        { "value": "dark", "label": "黑色" },
+        { "value": "light", "label": "白色" },
+      ],
+      "default": "dark"
+    },
+    {
+      "type": "image_picker",
+      "id": "prev_icon",
+      "label": "轮播上一张图标 Mobile"
+    },
+    {
+      "type": "image_picker",
+      "id": "next_icon",
+      "label": "轮播下一张图标 Mobile"
+    },
+  ],
+  "blocks": [
+    {
+      "type": "zz-video-swiper-jp-item"
+    }
+  ],
+  "presets": [
+    {
+      "name": "Video Swiper JP Preview"
+    },
+  ]
+}
+{% endschema %}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-shopify-components",
-  "version": "0.16.2",
+  "version": "0.16.3-beta.1",
   "description": "Reusable Shopify components for theme projects",
   "keywords": [
     "shopify",

package/snippets/zz-video-popup.liquid

@@ -0,0 +1,33 @@
+{% comment %} 
+ pc_video: 视频
+pc_poster: 封面
+mb_video: 移动端视频
+mb_poster: 移动端封面
+
+
+- class_name：自定义类名
+{% endcomment %}
+
+<zz-video-popup>
+    
+      <div
+        class='togglePopup popup tw-flex !tw-hidden tw-bg-[rgba(0,0,0,0.9)] tw-items-center tw-justify-center tw-fixed tw-top-0 tw-left-0 tw-right-0 tw-bottom-0 tw-z-[999] tw-overflow-hidden {{ class_name }}'
+      >
+        <div class="tw-max-w-[960px]">
+          {% render 'zz-video',
+            pc_video: pc_video,
+            pc_poster: pc_poster,
+            mb_video: mb_video,
+            mb_poster: mb_poster,
+            controls: true,
+            lazy: false,
+            class: 'tw-w-full tw-h-auto',
+            autoplay: false,
+            loop: true,
+          %}
+  
+        </div>
+          
+      </div>
+</zz-video-popup>
+