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

package/assets/zz-components.css

@@ -1,3 +1,10 @@
+html.zz-global-noscroll,
+html.zz-global-noscroll body {
+  overflow: hidden !important;
+  position: relative;
+  height: 100% !important;
+}
+
 /* tab radio组件 */
 .zz-radio-tabs {
   display: flex;
@@ -6,9 +13,11 @@
   border-radius: 32px;
   background: #F5F5F6;
 }
+
 body {
   overflow-x: hidden;
 }
+
 .zz-radio-tabs-black.zz-radio-tabs {
   background: #FFFFFF14;
 }
@@ -48,7 +57,7 @@ zz-radio-tabs-item {
   vertical-align: middle;
   height: 100%;
   white-space: nowrap;
-  
+
 }
 
 .zz-radio-tabs-black.zz-radio-tabs .zz-radio-tabs-label {
@@ -64,12 +73,14 @@ zz-radio-tabs-item {
   background: #FFFFFF1F;
   color: #FFFFFF;
 }
+
 @media (min-width: 1024px) {
   .zz-radio-tabs {
-      height: 48px;
+    height: 48px;
   }
+
   .zz-radio-tabs-label {
-      font-size: 16px;
+    font-size: 16px;
   }
 }
 
@@ -102,29 +113,35 @@ zz-radio-tabs-item {
   background-size: 4px 4px, 4px 4px;
   background-repeat: no-repeat;
 }
+
 .zz-select:focus {
   border-color: #FC6C0F;
   outline: none;
   box-shadow: none;
 }
+
 @media (min-width: 1024px) {
   .zz-select {
-      height: 40px;
-      font-size: 14px;
+    height: 40px;
+    font-size: 14px;
   }
 }
+
 /* 内容描述 */
 .content-text strong {
   color: #000000;
   font-weight: inherit;
 }
+
 .content-text a {
   color: #378DDD;
   text-decoration: underline;
 }
+
 .content-text a:hover {
   opacity: 0.8;
 }
+
 .content-text ol {
   list-style: decimal;
   padding-left: 25px;
@@ -136,7 +153,7 @@ zz-radio-tabs-item {
 }
 
 /* 标题 */
-.zz-title-hx p{
+.zz-title-hx p {
   margin: 0;
 }
 
@@ -153,11 +170,13 @@ zz-radio-tabs-item {
   border-radius: 4px;
   z-index: -1;
 }
+
 /* dialog 弹窗组件， PC中间弹出，移动端底部弹出 */
 body.zz-dialog-open {
   overflow: hidden;
   touch-action: none;
 }
+
 .zz-dialog-mask {
   position: fixed;
   inset: 0;
@@ -165,6 +184,7 @@ body.zz-dialog-open {
   display: none;
   z-index: 1000;
 }
+
 .zz-dialog {
   position: fixed;
   background: #fff;
@@ -174,38 +194,42 @@ body.zz-dialog-open {
   display: none;
   transition: all 0.3s ease;
 }
+
 @media (min-width: 1024px) {
   .zz-dialog {
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%) scale(0.7);
-      opacity: 0;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0.7);
+    opacity: 0;
 
   }
 
   .zz-dialog.show {
-      transform: translate(-50%, -50%) scale(1);
-      opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
   }
 }
+
 @media (max-width: 1023px) {
   .zz-dialog {
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-      transform: translateY(100%);
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    transform: translateY(100%);
   }
 
   .zz-dialog.show {
-      transform: translateY(0);
+    transform: translateY(0);
   }
 }
+
 .zz-underline {
   text-decoration: none;
   border-bottom: 1px solid currentColor;
-  padding-bottom: 2px; /* 调整位置 */
+  padding-bottom: 2px;
+  /* 调整位置 */
 }
 
 /* 按钮样式 zz-btn */
@@ -216,7 +240,7 @@ body.zz-dialog-open {
   height: 40px;
   padding: 0px 24px;
   border-radius: 4px;
-  transition: opacity 0.2s cubic-bezier(.4,0,.2,1);
+  transition: opacity 0.2s cubic-bezier(.4, 0, .2, 1);
   outline: none;
   gap: 7px;
   font-weight: 500;
@@ -229,70 +253,84 @@ body.zz-dialog-open {
   background: #000000;
   color: #fff;
 }
+
 .zz-btn.zz-btn-primary.zz-btn-white {
   background: #fff;
   color: #000000;
   border: 1.5px solid #fff;
 }
+
 .zz-btn.zz-btn-primary.zz-btn-orange {
   background: #FC6C0F;
   color: #fff;
 }
+
 .zz-btn.zz-btn-primary.zz-btn-blue {
   background: #378DDD;
   color: #fff;
 }
+
 .zz-btn.zz-btn-primary.zz-btn-yellow {
   background: linear-gradient(139.02deg, #FFEB00 0.01%, #FFD400 100.55%);
   color: #000000;
 }
+
 .zz-btn.zz-btn-primary-round.zz-btn-black {
   background: #000000;
   color: #fff;
   border-radius: 30px;
 }
+
 .zz-btn.zz-btn-primary-round.zz-btn-white {
   background: #fff;
   color: #000000;
   border-radius: 30px;
 }
+
 .zz-btn.zz-btn-default.zz-btn-black {
   background: transparent;
   color: #000000;
   border: 1.5px solid #000000;
 }
+
 .zz-btn.zz-btn-default.zz-btn-white {
   background: transparent;
   color: #fff;
   border: 1.5px solid #fff;
 }
+
 .zz-btn.zz-btn-default.zz-btn-orange {
   background: transparent;
   color: #FC6C0F;
   border: 1.5px solid #FC6C0F;
 }
+
 .zz-btn.zz-btn-default.zz-btn-yellow {
   background: transparent;
   color: #000;
   border: 1.5px solid #FFEB00;
 }
+
 .zz-btn.zz-btn-default.zz-btn-blue {
   background: transparent;
   color: #378DDD;
   border: 1.5px solid #378DDD;
 }
+
 .zz-btn.zz-btn-round.zz-btn-black {
   background: transparent;
   color: #000000;
   border: 1.5px solid #000000;
   border-radius: 30px;
 }
+
 .zz-btn.zz-btn-round.zz-btn-white {
   background: transparent;
   color: #fff;
   border: 1.5px solid #fff;
   border-radius: 30px;
 }
+
 .zz-btn.zz-btn-round.zz-btn-orange {
   background: transparent;
   color: #ff9900;
@@ -303,12 +341,15 @@ body.zz-dialog-open {
 .zz-btn-link.zz-btn-blue {
   color: #378DDD;
 }
+
 .zz-btn-link.zz-btn-orange {
   color: #FC6C0F;
 }
+
 .zz-btn-link.zz-btn-white {
   color: #fff;
 }
+
 .zz-btn-link.zz-btn-black {
   color: #000000;
 }
@@ -325,56 +366,67 @@ body.zz-dialog-open {
   opacity: 0.5;
   cursor: not-allowed;
 }
+
 .zz-btn.zz-btn-large {
   height: 42px;
   padding: 0px 28px;
 }
+
 .zz-btn.zz-btn-small {
   height: 21px;
   padding: 0px 10px;
   font-size: 10px;
 }
+
 .zz-btn-link.zz-btn-link-small {
   font-size: 10px;
 }
+
 .zz-btn-link.zz-btn-link-large {
   font-size: 14px;
 }
 
 @media (min-width: 1024px) {
-    .zz-btn.zz-btn-large {
-        height: 48px;
-        padding: 0px 32px;
-      }
-      .zz-btn.zz-btn-small {
-        height: 26px;
-        padding: 0px 10px;
-        font-size: 14px;
-      }
-      .zz-btn-link.zz-btn-link-small {
-        font-size: 12px;
-      }
-      .zz-btn-link.zz-btn-link-large {
-        font-size: 16px;
-      }
+  .zz-btn.zz-btn-large {
+    height: 48px;
+    padding: 0px 32px;
+  }
+
+  .zz-btn.zz-btn-small {
+    height: 26px;
+    padding: 0px 10px;
+    font-size: 14px;
+  }
+
+  .zz-btn-link.zz-btn-link-small {
+    font-size: 12px;
+  }
+
+  .zz-btn-link.zz-btn-link-large {
+    font-size: 16px;
+  }
 }
 
 .zz-btn-shape-round {
   border-radius: 90px;
 }
+
 .zz-video {
-  border-radius: inherit; 
+  border-radius: inherit;
 }
 
-.zz-toast-layer{
+.zz-toast-layer {
   position: fixed;
   inset: 0;
   display: grid;
   place-items: center;
-  pointer-events: none; /* 不阻挡点击 */
-  z-index: 9999;  /* 最高层 */
+  pointer-events: none;
+  /* 不阻挡点击 */
+  z-index: 9999;
+  /* 最高层 */
 }
-.zz-toast-box{
+
+.zz-toast-box {
   pointer-events: auto;
   max-width: min(86vw, 520px);
   box-sizing: border-box;
@@ -393,17 +445,20 @@ body.zz-dialog-open {
   display: inline-flex;
 
 }
+
 .zz-toast-icon {
   margin-right: 4px;
   padding: 0px 2px;
 }
+
 @media screen and (min-width: 1024px) {
-  .zz-toast-msg{
+  .zz-toast-msg {
     font-size: 16px;
   }
-  
+
 }
-.zz-toast-box.show{
+
+.zz-toast-box.show {
   opacity: 1;
   transform: translateZ(0) scale(1);
-}
+}

package/assets/zz-components.js

@@ -374,3 +374,48 @@ if (!customElements.get('zz-video-popup')) {
   // 暴露到全局
   window.zzShowToast = zzShowToast;
 })();
+
+(function () {
+  let scrollTop = 0;
+
+  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);
+  }
+
+  function isSafari26() {
+      const ua = navigator.userAgent;
+      if (!isSafari()) return false;
+      // 检查 “Version/26.0” 或类似标识
+      return /Version\/26\./.test(ua);
+  }
+
+
+
+  function lockBodyScroll() {
+    if (isSafari26()) {
+      scrollTop = window.scrollY;
+      document.documentElement.classList.add('zz-global-noscroll');
+    } else {
+      document.body.style.overflow = 'hidden';
+    }
+  }
+
+  function unlockBodyScroll() {
+    if (isSafari26()) {
+      document.documentElement.classList.remove('zz-global-noscroll');
+      document.documentElement.style.scrollBehavior = 'auto';
+      window.scrollTo(0, scrollTop);
+      requestAnimationFrame(() => {
+        document.documentElement.style.scrollBehavior = '';
+      });
+    } else {
+      document.body.style.overflow = '';
+    }
+  }
+  window.zzLockBodyScroll = lockBodyScroll;
+  window.zzUnlockBodyScroll = unlockBodyScroll;
+})();

package/assets/zz-version-dialog.js

@@ -16,6 +16,7 @@ class VersionDialog extends HTMLElement {
           if (!this.swiper) {
             this.initSwiper();
           }
+          window.zzLockBodyScroll && window.zzLockBodyScroll();
         } else {
           // 销毁swiper
           if (this.swiper) {
@@ -33,6 +34,7 @@ class VersionDialog extends HTMLElement {
         if (this.swiper) {
           this.destroySwiper();
         }
+        window.zzUnlockBodyScroll && window.zzUnlockBodyScroll();
       });
 
       // 添加点击backdrop关闭的事件监听

package/assets/zz-world-video-comments-dialog.js

@@ -3,19 +3,26 @@ class WorldVideoCommentsDialog extends HTMLElement {
   swiper = null; // swiper实例
   mediaId = '';
   page = 1;
-
   pageSize = 15;
   hasMore = true;
 
   constructor() {
     super();
-    this.init();
+    
   }
   connectedCallback() {
+    this.shopSelect = this.dataset.shopSelect;
     this.baseUrl =
       this.dataset.requestType === 'prod'
         ? 'https://h130-app-server-us.hoverx1.cn'
         : 'https://h130-app-server-test-us.hoverx1.cn';
+    if (this.shopSelect === 'JP') {
+      this.baseUrl =
+      this.dataset.requestType === 'prod'
+        ? 'https://h130-app-server-jp.hoverx1.cn'
+        : 'https://h130-app-server-test-jp.hoverx1.cn';
+    }
+    this.init();
   }
 
   init() {

package/assets/zz-world-video-dialog.js

@@ -23,6 +23,8 @@ class WorldVideoDialog extends HTMLElement {
   initData() {
     this.x1Img = this.dataset.x1Img;
     this.x1ProImg = this.dataset.x1proImg;
+    this.x121Img = this.dataset.x121Img;
+    this.x121Links = this.dataset.x121Links;
     this.x1Links = this.dataset.x1Links;
     this.x1ProLinks = this.dataset.x1proLinks;
   }
@@ -88,6 +90,7 @@ class WorldVideoDialog extends HTMLElement {
     });
   }
   updateSlide(data, productType, isInit = false) {
+    console.log('updateSlide', data, productType, this.x121Links, this.x121Img);
     const template = $('#video-swiper-slide').html();
     if (isInit) {
       this.destroySwiper();
@@ -119,6 +122,11 @@ class WorldVideoDialog extends HTMLElement {
           .replace(new RegExp('{product-links}', 'g'), this.x1ProLinks)
           .replace(new RegExp('{product-icon}', 'g'), this.x1ProImg)
           .replace(new RegExp('{product-type}', 'g'), '141');
+      } else if (productType === 3) {
+        replacedTemplate = replacedTemplate
+          .replace(new RegExp('{product-links}', 'g'), this.x121Links)
+          .replace(new RegExp('{product-icon}', 'g'), this.x121Img)
+          .replace(new RegExp('{product-type}', 'g'), '121');
       }
       this.swiper.virtual.slides.push(replacedTemplate);
     });
@@ -152,6 +160,7 @@ class WorldVideoDialog extends HTMLElement {
       modal.classList.add('show');
     }, 10);
     body.classList.add('modal-open');
+    window.zzLockBodyScroll && window.zzLockBodyScroll();
     // 滑到固定位置
     if (this.isInitOpen) {
       // 是否是初始化后第一次打开
@@ -161,15 +170,15 @@ class WorldVideoDialog extends HTMLElement {
     }
     this.isInitOpen = false;
     this.playVideo();
-    dataLayer.push({
-      event: 'world_video_dialog_open',
-      timestamp: new Date().toISOString(),
+    window.zzAnalytics && window.zzAnalytics.trackEvent('world_video_dialog_open', {
+        timestamp: new Date().toISOString(),
     });
   }
   closeModal() {
     const modal = this.querySelector('#world-video-modal');
     const mask = this.querySelector('#world-video-modalMask');
     const body = document.body;
+    window.zzUnlockBodyScroll && window.zzUnlockBodyScroll();
     modal.classList.remove('show');
     setTimeout(() => {
       modal.style.display = 'none';

package/assets/zz-world-video-list.js

@@ -8,14 +8,21 @@ class WorldVideoList extends HTMLElement {
   pageSize = 8;
   constructor() {
     super();
-    this.init();
+    
   }
   connectedCallback() {
+    this.shopSelect = this.dataset.shopSelect;
     this.baseUrl =
       this.dataset.requestType === 'prod'
         ? 'https://h130-app-server-us.hoverx1.cn'
         : 'https://h130-app-server-test-us.hoverx1.cn';
-    this.shopSelect = this.dataset.shopSelect;
+    if (this.shopSelect === 'JP') {
+      this.baseUrl =
+      this.dataset.requestType === 'prod'
+        ? 'https://h130-app-server-jp.hoverx1.cn'
+        : 'https://h130-app-server-test-jp.hoverx1.cn';
+    }
+    this.init();
   }
 
   init() {
@@ -40,6 +47,8 @@ class WorldVideoList extends HTMLElement {
     try {
       this.x1Img = this.dataset.x1Img;
       this.x1ProImg = this.dataset.x1proImg;
+      this.x121Img = this.dataset.x121Img;
+      this.x121Links = this.dataset.x121Links;
       this.x1Links = this.dataset.x1Links;
       this.x1ProLinks = this.dataset.x1proLinks;
     } catch (error) {
@@ -56,10 +65,10 @@ class WorldVideoList extends HTMLElement {
     videoPageRightArrow.addEventListener('click', () => {
       videoPageList.scrollBy({ left: 400, behavior: 'smooth' });
       swiperIndex++;
-      dataLayer.push({
-        event: 'world_video_scroll',
+      window.zzAnalytics && window.zzAnalytics.trackEvent('world_video_scroll', {
         timestamp: new Date().toISOString(),
       });
+      
       if (swiperIndex > 0) {
         videoPageLeftArrow.classList.remove('tw-hidden');
       }
@@ -98,7 +107,11 @@ class WorldVideoList extends HTMLElement {
       btnPro.classList.remove('tw-bg-black', 'tw-text-white');
       // 这里可以加你切换到 X1 的逻辑
       if (this.productType !== 1) {
-        this.productType = 1;
+        if (this.shopSelect === 'JP') {
+          this.productType = 3;
+        } else {
+          this.productType = 1;
+        }
         this.page = 1;
         this.loadMoreData();
       }
@@ -112,8 +125,7 @@ class WorldVideoList extends HTMLElement {
         if (entry.isIntersecting) {
           // 进入视窗：开始计时
           startTime = Date.now();
-          dataLayer.push({
-            event: 'world_video_show',
+          window.zzAnalytics && window.zzAnalytics.trackEvent('world_video_show', {
             timestamp: new Date().toISOString(),
           });
         } else {
@@ -123,8 +135,7 @@ class WorldVideoList extends HTMLElement {
             startTime = 0;
             // 大于2秒 上报
             if (duration > 2000) {
-              dataLayer.push({
-                event: 'world_video_show_time',
+              window.zzAnalytics && window.zzAnalytics.trackEvent('world_video_show_time', {
                 timestamp: new Date().toISOString(),
                 duration: duration,
               });
@@ -145,8 +156,7 @@ class WorldVideoList extends HTMLElement {
       entries.forEach((entry) => {
         if (entry.isIntersecting) {
           this.loadNextPage();
-          dataLayer.push({
-            event: 'world_video_scroll',
+          window.zzAnalytics && window.zzAnalytics.trackEvent('world_video_scroll', {
             timestamp: new Date().toISOString(),
           });
         }
@@ -317,6 +327,10 @@ class WorldVideoList extends HTMLElement {
         replacedTemplate = replacedTemplate
           .replace(new RegExp('{product-links}', 'g'), this.x1ProLinks)
           .replace(new RegExp('{product-icon}', 'g'), this.x1ProImg);
+      } else if (this.productType === 3) {
+        replacedTemplate = replacedTemplate
+          .replace(new RegExp('{product-links}', 'g'), this.x121Links)
+          .replace(new RegExp('{product-icon}', 'g'), this.x121Img);
       }
       $('#video-swiper-wrapper').append(replacedTemplate);
     });

package/assets/zz-world-video.js

@@ -23,8 +23,7 @@ class WorldVideo extends HTMLElement {
       item.addEventListener('click', (event) => {
         const productType =
           event.currentTarget.getAttribute('data-product-type');
-        dataLayer.push({
-          event: 'world_video_learn_more',
+        window.zzAnalytics && window.zzAnalytics.trackEvent('world_video_learn_more', {
           timestamp: new Date().toISOString(),
           productType: productType,
         });
@@ -246,8 +245,7 @@ class WorldVideo extends HTMLElement {
           if (dialog) {
             dialog.showModal(id);
           }
-          dataLayer.push({
-            event: 'world-video-comments',
+          window.zzAnalytics && window.zzAnalytics.trackEvent('world-video-comments', {
             timestamp: new Date().toISOString(),
           });
         });
@@ -258,8 +256,7 @@ class WorldVideo extends HTMLElement {
       likeBtns.forEach((item) => {
         item.addEventListener('click', (event) => {
           event.stopPropagation();
-          dataLayer.push({
-            event: 'world-video-like',
+          window.zzAnalytics && window.zzAnalytics.trackEvent('world-video-like', {
             timestamp: new Date().toISOString(),
           });
         });

package/blocks/zz-button-v2.liquid

@@ -227,8 +227,7 @@
       const btn = document.getElementsByClassName('{{ btn_class }}')
       if(btn && btn[0]) {
         btn[0].addEventListener('click', (event) => {
-          dataLayer.push({
-            event: "{{ block.settings.click_event_class_name }}",
+          window.zzAnalytics && window.zzAnalytics.trackEvent("{{ block.settings.click_event_class_name }}", {
             timestamp: new Date().toISOString(),
           });
         });

package/blocks/zz-button.liquid

@@ -209,8 +209,7 @@
       const btn = document.getElementsByClassName('{{ btn_class }}')
       if(btn && btn[0]) {
         btn[0].addEventListener('click', (event) => {
-          dataLayer.push({
-            event: "{{ block.settings.click_event_class_name }}",
+          window.zzAnalytics && window.zzAnalytics.trackEvent("{{ block.settings.click_event_class_name }}", {
             timestamp: new Date().toISOString(),
           });
         });

package/blocks/zz-edu-form.liquid

@@ -389,8 +389,8 @@
       } else {
         zzShowToast('Please fill in all required fields!');
       }
-      dataLayer.push({
-        event: "edu_page_form_submit",
+      
+      window.zzAnalytics && window.zzAnalytics.trackEvent('edu_page_form_submit', {
         timestamp: new Date().toISOString(),
       });
     });
@@ -409,8 +409,7 @@
       input.addEventListener('input', function() {
         if(!hasInput) {
           hasInput = true
-          dataLayer.push({
-            event: "edu_page_form_input",
+          window.zzAnalytics && window.zzAnalytics.trackEvent('edu_page_form_input', {
             timestamp: new Date().toISOString(),
           });
           return;

package/blocks/zz-normal-swiper.liquid

@@ -17,68 +17,28 @@
     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;
-      }
+  {% if block.settings.right_to_edge == true %}
+  @media (min-width: 1280px) {
+    #shopify-block-{{block.id}} .zz-normal-swiper {
+      padding: 0 calc((100% - {{ block.settings.pc_xl_width }}px) / 2);
     }
-  
-    @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;
-      }
+  }
+
+  @media (min-width: 1024px) and (max-width: 1279px) {
+    #shopify-block-{{block.id}} .zz-normal-swiper {
+      padding: 0 calc((100% - {{ block.settings.pc_lg_width }}vw) / 2);
     }
-  
-    /* 👉 当启用 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%;
+  }
+  @media (max-width: 1024px) {
+    #shopify-block-{{block.id}} .zz-normal-swiper {
+      padding-left: 20px;
     }
-  {% endif %}
-  
+  }
 
+  {% endif %}
+  #shopify-block-{{block.id}} {
+    width: 100%;
+  }
 
   #shopify-block-{{block.id}} .swiper-button-next:after,
   #shopify-block-{{block.id}} .swiper-button-prev:after {
@@ -208,7 +168,7 @@
 <div
   class='zz-normal-swiper swiper zz-normal-swiper-{{ block.id }}'
 >
-  <div class='zz-swiper-wrapper swiper-wrapper'>
+  <div class='zz-swiper-wrapper swiper-wrapper tw-invisible'>
     {% for block in block.blocks %}
       <div class='swiper-slide'>
         {% render block %}
@@ -232,7 +192,9 @@
   {% endif %}
 
   {% if block.settings.pagination_type != 'none' %}
-    <div class='swiper-pagination {% if block.settings.pagination_type == "segments" %} zz-pagination-segments {% endif %}'></div>
+    <div
+      class='swiper-pagination {% if block.settings.pagination_type == "segments" %} zz-pagination-segments {% endif %}'
+    ></div>
   {% endif %}
 </div>
 
@@ -275,6 +237,7 @@
         pauseOnMouseEnter: true,
       },
       {% endif %}
+      initialSlide: {{ block.settings.pre_show_index | default: 0 }},
       breakpoints: {
         0: {
           slidesPerView: {{ block.settings.slides_per_view_mb | default: 1 }},
@@ -291,6 +254,7 @@
       if (initialized) return;
       initialized = true;
       instance = new Swiper(swiperSelector, options);
+      if (swiperWrapper) swiperWrapper.classList.remove('tw-invisible');
     }
 
     const root = block.querySelector(swiperSelector);
@@ -349,6 +313,13 @@
       "label": "居中显示",
       "default": false
     },
+    {
+      "type": "number",
+      "id": "pre_show_index",
+      "label": "预先展示的内容序号(0开始)",
+      "default": 0,
+      "info": "0表示预先展示第一张，1表示预先展示第二张，以此类推"
+    },
     {
       "type": "checkbox",
       "id": "auto_height",
@@ -357,33 +328,23 @@
     },
     {
       "type": "checkbox",
-      "id": "pc_full_width",
-      "label": "内容区域是否全屏展示",
+      "id": "right_to_edge",
+      "label": "内容区域是否靠右到边缘",
       "default": false
     },
     {
       "type": "number",
       "id": "pc_xl_width",
-      "label": "XL屏幕内容区域宽度 (px)",
+      "label": "XL屏幕左对齐区域宽度 (px)",
       "default": 1200,
-      "info": "非全屏展示时有效",
-      "visible_if": "{{ block.settings.pc_full_width == false }}"
+      "visible_if": "{{ block.settings.right_to_edge == true }}"
     },
     {
       "type": "number",
       "id": "pc_lg_width",
-      "label": "LG屏幕内容区域宽度 (vw)",
+      "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
+      "visible_if": "{{ block.settings.right_to_edge == true }}"
     },
 
     {

package/blocks/zz-ratio-image.liquid

@@ -1,7 +1,7 @@
 {% schema %}
 {
   "name": "Ratio Image",
-  "class": "ratio-image",
+  "class": "ratio-image-black",
   "settings": [
     {
       "type": "header",

package/blocks/zz-ratio-video.liquid

@@ -86,9 +86,11 @@
 }
 {% endschema %}
 
- {% assign autoplay = true %}
+{% assign autoplay = true %}
+{% assign muted = true %}
 {% if block.settings.if_click_play %}
   {% assign autoplay = false %}
+  {% assign muted = false %}
 {% endif %} 
 
 
@@ -101,7 +103,7 @@
       class: 'ratio-video tw-w-full tw-h-auto',
       autoplay: autoplay,
       loop: true,
-      muted: true
+      muted: muted
     %}
      {% 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-video-swiper-jp-item.liquid

@@ -3,7 +3,7 @@
     #shopify-block-{{block.id}} {
       width: calc(100% - 72px);
       box-sizing: border-box; 
-      transform: translateX(-24px);
+      
     }
     #shopify-block-{{block.id}} .image-video-box {
       width: 100%;

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

@@ -80,6 +80,8 @@
   @media screen and (max-width: 1023px) {
     #shopify-block-{{block.id}} .zz-video-swiper-preview {
       padding-bottom: 68px;
+      padding-left: 20px;
+      padding-right: 20px;
     }
 
     #shopify-block-{{block.id}} .zz-video-swiper-preview .swiper-slide .banner-item::after {
@@ -217,12 +219,9 @@
     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,
+      centeredSlides: isDesktop ? true : false,
       spaceBetween: isDesktop ? 24 : 12,
       navigation: {
         nextEl: '.swiper-button-next',
@@ -442,12 +441,6 @@
       "default": "#000000",
       "label": "移动端轮播导航圆圈颜色"
     },
-    {
-      "type": "checkbox",
-      "id": "if_loop",
-      "label": "是否循环播放",
-      "default": false
-    },
     {
       "type": "checkbox",
       "id": "if_autoplay",

package/blocks/zz-world-video.liquid

@@ -46,20 +46,36 @@
     {
       "type": "image_picker",
       "id": "img_130_icon",
-      "label": "130 产品icon"
+      "label": "130 产品icon",
+      "visible_if": "{{ block.settings.shop_select != 'JP' }}"
     },
-    {
-      "type": "textarea",
-      "id": "links_130",
-      "label": "Sites Link 130",
-      "info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开（ 冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接                    EG: Canada: https://hoverair.com/   default: https://hoverair.com/ "
+     {
+      "type": "image_picker",
+      "id": "img_121_icon",
+      "label": "121 产品icon",
+      "visible_if": "{{ block.settings.shop_select == 'JP' }}"
     },
+
     {
       "type": "textarea",
       "id": "links_141",
       "label": "Sites Link 141",
       "info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开（ 冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接                    EG: Canada: https://hoverair.com/   default: https://hoverair.com/ "
-    }
+    },
+    {
+      "type": "textarea",
+      "id": "links_130",
+      "label": "Sites Link 130",
+      "info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开（ 冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接                    EG: Canada: https://hoverair.com/   default: https://hoverair.com/ ",
+      "visible_if": "{{ block.settings.shop_select != 'JP' }}"
+    },
+   {
+      "type": "textarea",
+      "id": "links_121",
+      "label": "Sites Link 121",
+      "info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开（ 冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接                    EG: Canada: https://hoverair.com/   default: https://hoverair.com/ ",
+      "visible_if": "{{ block.settings.shop_select == 'JP' }}"
+    },
   ],
   "presets": [
     {
@@ -74,6 +90,8 @@
   data-x1-img='{{block.settings.img_130_icon | image_url}}'
   data-x1pro-links='{{block.settings.links_141 | url_encode }}'
   data-x1-links='{{block.settings.links_130 | url_encode }}'
+  data-x121-links='{{block.settings.links_121 | url_encode }}'
+  data-x121-img='{{block.settings.img_121_icon | image_url}}'
   data-request-type='{{ block.settings.request_type }}'
   data-shop-select='{{ block.settings.shop_select }}'
 >
@@ -91,7 +109,11 @@
         class='tw-flex-1  tw-border-none tw-h-full tw-rounded-[21px] tw-text-[13px] lg:tw-text-[16px] tw-bg-transparent tw-text-black tw-transition-colors'
         style='font-size: 16px;'
       >
-        X1
+        {% if block.settings.shop_select == 'JP' %}
+          X1 Smart
+        {% else %}
+          X1
+        {% endif %}
       </button>
     </div>
   </div>
@@ -137,6 +159,8 @@
     data-x1-img='{{block.settings.img_130_icon | image_url}}'
     data-x1pro-links='{{block.settings.links_141 | url_encode }}'
     data-x1-links='{{block.settings.links_130 | url_encode }}'
+    data-x121-img='{{block.settings.img_121_icon | image_url}}'
+    data-x121-links='{{block.settings.links_121 | url_encode }}'
     data-request-type='{{ block.settings.request_type }}'
   >
     <!-- 蒙层 -->
@@ -461,7 +485,7 @@
           </svg>
         </div>
         
-        <world-video-comments-dialog data-request-type='{{ block.settings.request_type }}'>
+        <world-video-comments-dialog data-request-type='{{ block.settings.request_type }}' data-shop-select='{{ block.settings.shop_select }}'>
           <div
             class='world-video-comments-mask lg:tw-hidden tw-z-[1007] tw-bg-black/60 tw-fixed tw-inset-0 tw-z-[1000]'
           ></div>

package/package.json

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

package/sections/zz-navigation-tab-v3.liquid

@@ -208,8 +208,7 @@
           const offsetTop = target.offsetTop - headerHeight;
           scrollPaginationToCenter();
           window.scrollTo(0, offsetTop);
-          dataLayer.push({
-            event: "141_productpage_click_header_tab_item",
+          window.zzAnalytics && window.zzAnalytics.trackEvent('141_productpage_click_header_tab_item', {
             timestamp: new Date().toISOString(),
             header_module_name: id,
           });
@@ -314,8 +313,7 @@
       const btns = document.querySelectorAll('.{{ btn_class }}');
       btns.forEach(btn => {
         btn.addEventListener('click', (event) => {
-          dataLayer.push({
-            event: "{{ section.settings.buy_now_click_event_class_name }}",
+          window.zzAnalytics && window.zzAnalytics.trackEvent("{{ section.settings.buy_now_click_event_class_name }}", {
             timestamp: new Date().toISOString(),
           });
         });

package/sections/zz-navigation-tab.liquid

@@ -212,16 +212,10 @@
           }
           scrollPaginationToCenter();
           window.scrollTo(0, offsetTop);
-          dataLayer.push({
-            event: "141_productpage_click_header_tab_item",
+          window.zzAnalytics && window.zzAnalytics.trackEvent("141_productpage_click_header_tab_item", {
             timestamp: new Date().toISOString(),
             header_module_name: id,
           });
-          console.log('tag-data', {
-            event: "141_productpage_click_header_tab_item",
-            timestamp: new Date().toISOString(),
-            header_module_name: id,
-          })
           
         });
       });
@@ -326,8 +320,7 @@
       const btns = document.querySelectorAll('.{{ btn_class }}');
       btns.forEach(btn => {
         btn.addEventListener('click', (event) => {
-          dataLayer.push({
-            event: "{{ section.settings.buy_now_click_event_class_name }}",
+          window.zzAnalytics && window.zzAnalytics.trackEvent("{{ section.settings.buy_now_click_event_class_name }}", {
             timestamp: new Date().toISOString(),
           });
         });

package/sections/zz-swiper-banner.liquid

@@ -720,17 +720,10 @@
                   item.addEventListener('click', (event) => {
                     
                     event.stopPropagation();
-                    console.log('banner.settings.banner_name', {
-                      event: "banner_click",
-                      timestamp: new Date().toISOString(),
+                    window.zzAnalytics && window.zzAnalytics.trackEvent("banner_click", {
                       event_type_attribute: "{{ banner.settings.banner_name }}",
                       section_name: "swiper_banner_v3",
-                    })
-                    dataLayer.push({
-                      event: "banner_click",
                       timestamp: new Date().toISOString(),
-                      event_type_attribute: "{{ banner.settings.banner_name }}",
-                      section_name: "swiper_banner_v3",
                     });
                   });
                 });
@@ -953,8 +946,7 @@
           if (entry.isIntersecting) {
             const bannerName = entry.target.dataset.bannerName;
             console.log('banner_show', bannerName);
-            dataLayer.push({
-              event: "banner_show",
+            window.zzAnalytics && window.zzAnalytics.trackEvent("banner_show", {
               timestamp: new Date().toISOString(),
               event_type_attribute: bannerName,
               section_name: "swiper_banner_v3",