zz-shopify-components 0.16.3-beta.7 → 0.16.3-beta.8

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-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.7",
+  "version": "0.16.3-beta.8",
   "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",