zz-shopify-components 0.32.0 → 0.32.1-beta.1

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

@@ -109,12 +109,15 @@
 <div class="tw-w-full tw-px-8">
   <div class="zz-navigation-pc-tab max-lg:tw-hidden lg:tw-h-[50px] tw-flex tw-items-center tw-justify-between tw-max-w-[1660px] lg:tw-px-[20px] tw-w-full tw-mx-auto">
     <img 
-      class="tw-w-[134px] tw-h-[12px]"
+      class="zz-navigation-pc-logo tw-w-[134px] tw-h-[12px]"
       src="{{ section.settings.icon | image_url: width: 200 }}" alt="{{ section.settings.icon.alt }}" width="134" height="12">
     <div class="zz-navigation-pc-item-box tw-flex tw-items-center  tw-overflow-x-scroll tw-ml-[40px] tw-pr-[60px]">
       {%- if section.blocks.size > 0 -%}
         {% for block in section.blocks %}
-          <div class="pc-tab-item tw-flex-shrink-0 tw-px-[30px]">
+          <div 
+            class="pc-tab-item tw-flex-shrink-0 tw-px-[30px]"
+            data-track-zz-element='zz-navigation_item_{{ block.settings.module_name | downcase }}'
+          >
             
               <span 
                 class="zz-navigation-tab-item-text tw-cursor-pointer tw-text-[#9E9E9E] tw-text-[14px] tw-leading-[14px] tw-font-[400]"
@@ -154,11 +157,14 @@
   <div class="mb-navigation-box-item zz-navigation-mb-item-box tw-flex tw-items-center tw-gap-[24px] tw-pr-[120px]  tw-h-[52px] tw-overflow-x-scroll">
     {%- if section.blocks.size == 0 -%}
       <img 
-        class="tw-w-[134px] tw-h-[12px]"
+        class="zz-navigation-mb-logo tw-w-[134px] tw-h-[12px]"
         src="{{ section.settings.icon | image_url: width: 200 }}" alt="{{ section.settings.icon.alt }}" width="134" height="12">
     {%- endif -%}
     {% for block in section.blocks %}
-      <div class="pc-tab-item tw-flex-shrink-0">
+      <div 
+        class="pc-tab-item tw-flex-shrink-0"
+        data-track-zz-element='zz-navigation_item_{{ block.settings.module_name | downcase }}'
+      >
         
           <span 
             class="zz-navigation-tab-item-text tw-cursor-pointer tw-text-[#9E9E9E] tw-text-[13px] tw-leading-[13px] tw-font-[400]"
@@ -241,8 +247,10 @@
         tab.addEventListener('click', () => {
           const id = tab.dataset.target;
           const target = document.querySelector(`[data-zz-module-name="${id}"]`);
+          if (!target) return;
           const headerHeight = isDesktop ? 50 : 50;
-          const offsetTop = target.offsetTop - headerHeight;
+          const rect = target.getBoundingClientRect();
+          const offsetTop = rect.top + window.scrollY - headerHeight;
           scrollPaginationToCenter();
           window.scrollTo(0, offsetTop);
           window.zzAnalytics && window.zzAnalytics.trackEvent('141_productpage_click_header_tab_item', {

package/sections/zz-swiper-gallery-center.liquid

@@ -0,0 +1,549 @@
+
+
+{% assign swiper_blocks = section.blocks | where: 'type', 'video' %}
+
+
+<style>
+  #shopify-section-{{ section.id }} {
+    background: {{ section.settings.bg_color }};
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: {{ section.settings.mobile_padding_top }}px;
+    padding-bottom: {{ section.settings.mobile_padding_bottom }}px;
+  }
+  
+
+  #shopify-section-{{ section.id }} .pagination-item {
+    flex-shrink: 0;  
+    overflow: hidden;  
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+
+  #shopify-section-{{ section.id }} .center-title-content {
+      top: 72px;
+      left: 20px;
+      right: 20px;
+    }
+
+   @media screen and (max-width: 1024px) {
+    #shopify-section-{{ section.id }} { 
+      padding-left: 20px;
+      padding-right: 20px;
+    }
+
+    #shopify-section-{{ section.id }} .progress-div {
+      position: absolute;
+      bottom: 0px;
+      left: 6px;
+      right: 6px;
+      height: 1px;
+    }
+    #shopify-section-{{ section.id }} .progress-line {
+      height: 1px;
+      background-color: #FFFFFF;
+      transition: width 0.2s;
+    }
+
+     #shopify-section-{{ section.id }} .zz-swiper-gallery-center .swiper-slide .media-box {
+       width: 100% !important;
+       aspect-ratio: 375 / 690;
+     }
+   }
+
+   @media screen and (min-width: 1024px) {
+    #shopify-section-{{ section.id }}  {
+      padding-top: {{ section.settings.pc_padding_top }}px;
+      padding-bottom: {{ section.settings.pc_padding_bottom }}px;
+    }
+    #shopify-section-{{ section.id }} .progress-div {
+      position: absolute;
+      bottom: 0px;
+      left: 8px;
+      right: 8px;
+      height: 2px;
+      z-index: 20;
+    }
+    #shopify-section-{{ section.id }} .progress-line {
+      height: 2px;
+      background-color: #FFFFFF;
+      transition: width 0.2s;
+    }
+    #shopify-section-{{ section.id }} .pagination-item-active .bullet-desc {
+      display: block !important;
+    }
+    #shopify-section-{{ section.id }} .pagination-item-active .pagination-item-bg {
+      background: #00000087;
+    }
+    #shopify-section-{{ section.id }} .center-title-content {
+      top: 85px;
+    }
+    #shopify-section-{{ section.id }} .pagination-item-active {
+      width: 556px !important;
+    }
+
+   }
+   
+
+
+
+</style>
+
+<div
+    {% if section.settings.module_id != blank %}
+      data-track-zz-section="{{ section.settings.module_id }}"
+    {% endif %}
+    {% if section.settings.is_exposure != false %}
+      data-track-zz-exposure="true"
+    {% endif %}
+    {% if section.settings.module_name != blank %}data-zz-module-name="{{ section.settings.module_name }}"{% endif %}
+  
+>
+    
+    <div class='zz-swiper-gallery-center tw-relative tw-w-screen zz-swiper-gallery-center-{{ section.id }}'>
+      <div class='swiper-wrapper'>
+        {% for banner in swiper_blocks %}
+              <div class='swiper-slide'>
+                <div class='media-box tw-w-screen lg:tw-h-screen lg:tw-min-h-[700px] tw-relative tw-overflow-hidden'>
+                  {% if banner.settings.video_pc != blank or banner.settings.video_url_pc != blank %}
+                    {% if banner.settings.video_url_pc != blank %}
+                      {% assign pc_video = banner.settings.video_url_pc %}
+                    {% else %}
+                      {% assign pc_video = banner.settings.video_pc %}
+                    {% endif %}
+                    {% render 'zz-video',
+                      pc_video: pc_video,
+                      pc_poster: banner.settings.poster_pc,
+                      mb_video: banner.settings.video_mb,
+                      mb_poster: banner.settings.poster_mb,
+                      lazy: true,
+                      class: 'tw-w-full tw-h-full tw-object-cover',
+                      autoplay: true,
+                      loop: false,
+                      muted: true
+                    %}
+                  {% else %}
+                    {%- if banner.settings.poster_pc != blank -%}
+                      {%
+                        render 'zz-img',
+                        pc_image: banner.settings.poster_pc,
+                        mb_image: banner.settings.poster_mb | default: banner.settings.poster_pc,
+                        image_alt: banner.settings.slide_title | escape,
+                      %}
+                    {% endif %}
+                  {% endif %}
+                  <div class="mb-desc tw-absolute tw-bottom-0 tw-h-[100px] lg:tw-hidden max-lg:tw-px-[20px] tw-overflow-y-auto
+                    tw-leading-[1.2] tw-text-white">{{ banner.settings.slide_content }}</div>
+                </div>
+              </div>
+            {% endfor %}
+        
+      </div>
+
+      <!-- Pagination indicator -->
+      <div class='custom-pagination zz-overflow-scrollbar-hidden tw-px-[20px] lg:tw-px-[80px] tw-z-10 tw-w-full tw-absolute tw-left-0 tw-bottom-[122px] lg:tw-bottom-[20px] tw-flex tw-flex-nowrap tw-overflow-x-auto tw-overflow-y-hidden tw-justify-start lg:tw-justify-center tw-gap-[15px]'>
+        {% for block in swiper_blocks %}
+          <div class="pagination-item tw-cursor-pointer tw-text-white tw-relative tw-rounded-[10px] tw-w-[196px] tw-h-[95px] lg:tw-w-[389px] lg:tw-h-[213px]" 
+            {% if section.settings.module_id != blank %} data-track-zz-element="{{ section.settings.module_id }}_change" {% endif %}
+            style="background-image:url({{ block.settings.nav_image | image_url: width:800 }});">
+            <div class="pagination-item-bg tw-w-full tw-h-full max-lg:tw-p-[10px] lg:tw-py-[10px] lg:tw-px-[16px]">
+              <div class="bullet-title tw-text-left tw-text-[16px] tw-leading-[1.5] lg:tw-text-[21px] tw-font-bold tw-mb-[10px] lg:tw-mb-[16px] tw-flex">
+               {{ block.settings.slide_title }}
+              </div>
+              <div class="bullet-desc tw-hidden tw-text-left tw-text-[10px] lg:tw-text-[16px] tw-leading-[1.4]">{{ block.settings.slide_content }}</div>
+              <div class="progress-div">
+                <div class="progress-line tw-z-30">&nbsp;</div>
+              </div>
+            </div>
+                        
+              
+          </div>
+        {% endfor %}
+
+      </div>
+
+      {% comment %} 居中对齐 {% endcomment %}
+      <div class="center-title-content tw-absolute tw-z-10">
+        {% render 'zz-h4',
+            title: section.settings.pc_title,
+            title_mb: section.settings.mb_title,
+            title_color: section.settings.text_color,
+            class_name: 'content-title tw-text-center tw-mb-[18px]',
+        %}
+
+        {% assign content_color = section.settings.text_color 
+          | color_modify: 'alpha', 0.7
+        %}
+
+        {% render 'zz-content-text',
+          text: section.settings.description_pc,
+          mb_text: section.settings.description_mb,
+          text_color: content_color,
+          pc_font_size: 16,
+          mobile_font_size: 12,
+          pc_text_align: 'center',
+          mobile_text_align: 'center',
+          class_name: 'max-lg:!tw-text-white'
+        %}
+      </div>
+
+
+    </div>
+
+     
+
+
+  
+</div>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    const section = document.getElementById('shopify-section-{{section.id}}');
+
+    // 获取所有pagination-item 监听点击事件，点击后swiper切换到对应的slide
+    const paginationItems = section.querySelectorAll('.pagination-item');
+    paginationItems.forEach((item, index) => {
+        item.addEventListener('click', () => {
+          prevSwiper.slideToLoop(index);
+        });
+    });
+
+
+    const swiperClassName = '.zz-swiper-gallery-center-{{ section.id }}';
+    let isDesktop = window.innerWidth > 1023;
+    // 获取 class zz-accessories-swiper 的元素 且data-id 为 section.id 的元素
+    const zzAccessoriesSwiper = document.querySelector(swiperClassName);
+    const swiperWrapper = zzAccessoriesSwiper.querySelector('.swiper-wrapper');
+
+    let progressInterval = null;
+    let progressTimer = null;
+    const prevSwiper = new Swiper(swiperClassName, {
+      loop: true,
+      slidesPerView: 1,
+      centeredSlides: true,
+      spaceBetween: isDesktop ? 30 : 8,
+      effect: 'fade',
+      on: {
+        slideChangeTransitionEnd: function () {
+          handleVideoOnSlideChange();
+        },
+        slideChangeTransitionStart: function () {
+          if (progressInterval) {
+            clearInterval(progressInterval);
+          }
+          if (progressTimer) {
+            clearTimeout(progressTimer);
+          }
+        },
+        slideChange: function () {
+          updateNavActive(this.realIndex);
+          if (!isDesktop) {
+            scrollPaginationToCenter();
+          }
+            section
+              .querySelectorAll('.pagination-item')
+              .forEach((bullet) => {
+                const progressBar = bullet.querySelector('.progress-line');
+                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);
+    }
+
+    const endedHandler = function () {
+
+      if (prevSwiper.isEnd) {
+        prevSwiper.slideTo(0);
+      } else {
+        prevSwiper.slideNext();
+      }
+      if (progressInterval) {
+        clearInterval(progressInterval);
+      }
+      this.removeEventListener('ended', endedHandler);
+    };
+
+    function scrollPaginationToCenter() {
+      // 获取当前section
+      const section = document.getElementById(
+        'shopify-section-{{section.id}}'
+      );
+      const paginationContainer = section.querySelector('.custom-pagination');
+      const activeBullet = paginationContainer.querySelector('.pagination-item-active');
+
+      if (activeBullet) {
+        const containerWidth = paginationContainer.offsetWidth;
+        const bulletLeft = activeBullet.offsetLeft;
+        const bulletWidth = activeBullet.offsetWidth;
+
+        // 计算需要滚动的位置，使当前bullet居中
+        const scrollPosition = bulletLeft - (containerWidth / 2) + (bulletWidth / 2);
+
+        paginationContainer.scrollTo({
+          left: scrollPosition,
+          behavior: 'smooth'
+        });
+      }
+    }
+
+
+    function updataMediaProgress(type, videoDom) {
+      const activeBullet = section.querySelector(
+        '.pagination-item-active'
+      );
+      const progressBar = activeBullet.querySelector('.progress-line');
+      if (progressBar) {
+        if (progressInterval) {
+          clearInterval(progressInterval);
+        }
+        if (progressTimer) {
+          clearTimeout(progressTimer);
+        }
+        if (type === 'video') {
+          // 添加新的事件监听器
+       
+            progressInterval = setInterval(() => {
+              const progress = videoDom.currentTime / videoDom.duration;
+              progressBar.style.width = `${progress * 100}%`;
+            }, 100);
+      
+
+          videoDom.addEventListener('ended', endedHandler);
+        } else if (type === 'image') {
+          
+            progressBar.style.transition = '10s linear';
+            progressBar.style.width = '100%';
+          
+          progressTimer = setTimeout(() => {
+            if (prevSwiper.isEnd) {
+              prevSwiper.slideTo(0);
+            } else {
+              prevSwiper.slideNext();
+            }
+          }, 10000);
+        }
+      }
+    }
+
+    function handleVideoOnSlideChange() {
+    
+      const allvideo = section.querySelectorAll('video');
+      // 播放当前 active slide 中的视频
+      const activeSlide = section.querySelector('.swiper-slide-active');
+      const media = getVisibleDisplayMedias(activeSlide);
+      // 重置进度条
+      const activeBullet = section.querySelector(
+          '.pagination-item-active'
+        );
+        const progressBar = activeBullet.querySelector('.progress-line');
+        if (progressBar) {
+          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();
+            }
+
+            updataMediaProgress('video', media.video);
+          } else {
+            item.pause();
+          }
+        });
+      } else if (media.type === 'image') {
+        // 处理图片的情况
+        updataMediaProgress('image', media.image);
+        allvideo.forEach((item) => {
+          item.pause();
+        });
+      }
+    }
+    
+
+  // 更新当前高亮的导航
+    function updateNavActive(activeIndex) {
+      paginationItems.forEach((item, i) => {
+        item.classList.toggle('pagination-item-active', i === activeIndex);
+      });
+    }
+
+
+  });
+</script>
+
+{% schema %}
+{
+  "name": "Swiper Gallery Center",
+  "class": "zz-swiper-gallery-center",
+  "settings": [
+     {
+      "type": "color_background",
+      "id": "bg_color",
+      "default": "#ffffff",
+      "label": "背景色"
+    },
+    {
+      "type": "richtext",
+      "id": "pc_title",
+      "label": "PC标题内容 (PC Title Content)",
+      "default": "<p>这里是标题</p>"
+    },
+    {
+      "type": "richtext",
+      "id": "mb_title",
+      "label": "移动标题内容 (Mobile Title Content)"
+    },
+    {
+      "type": "color",
+      "id": "text_color",
+      "label": "文字颜色",
+      "default": "#000000"
+    },
+    {
+      "type": "richtext",
+      "id": "description_pc",
+      "label": "Description PC"
+    },
+    {
+      "type": "richtext",
+      "id": "description_mb",
+      "label": "Description Mobile"
+    },
+    {
+      "type": "number",
+      "id": "pc_padding_top",
+      "label": "PC上内边距 (Padding Top)",
+      "default": 80
+    },
+    {
+      "type": "number",
+      "id": "pc_padding_bottom",
+      "label": "PC下内边距 (Padding Bottom)",
+      "default": 80
+    },
+    {
+      "type": "number",
+      "id": "mobile_padding_top",
+      "label": "移动上内边距 (Padding Top)",
+
+      "default": 40
+    },
+    {
+      "type": "number",
+      "id": "mobile_padding_bottom",
+      "label": "移动下内边距 (Padding Bottom)",
+      "default": 40
+    },
+     {
+      "type": "header",
+      "content": "统计相关"
+    },
+   {
+      "type": "text",
+      "id": "module_id",
+      "label": "唯一业务id",
+      "info": "需要唯一不要与其他模块重复，用户定位、埋点统计、代码隐藏控制等"
+    },
+    {
+      "type": "checkbox",
+      "id": "is_exposure",
+      "label": "是否曝光统计",
+      "default": false,
+      "info": "勾选后会对section模块进行曝光统计埋点, 必须填写唯一业务id"
+    },
+     {
+      "type": "text",
+      "id": "module_name",
+      "label": "模块定位id",
+      "info": "模块定位"
+    }
+  ],
+  "blocks": [
+    {
+      "name": "Video",
+      "type": "video",
+      "settings": [
+        {
+          "type": "text",
+          "id": "slide_title",
+          "label": "标题"
+        },
+        {
+          "type": "text",
+          "id": "video_url_pc",
+          "label": "Video url PC",
+          "info": "使用cdn视频时，填写视频url。防止视频模糊"
+        },
+        {
+          "type": "video",
+          "id": "video_pc",
+          "label": "Video"
+        },
+        {
+          "type": "image_picker",
+          "id": "poster_pc",
+          "label": "视频封面 PC 没有视频时显示封面"
+        },
+        {
+          "type": "video",
+          "id": "video_mb",
+          "label": "Video Mobile"
+        },
+        {
+          "type": "image_picker",
+          "id": "poster_mb",
+          "label": "视频封面 Mobile"
+        },
+
+        {
+          "type": "image_picker",
+          "id": "nav_image",
+          "label": "导航小图",
+          "info": "分页导航小图，建议尺寸 556x213px，未选中时展示中间区域，PC端选中展示完整图片"
+        },
+
+        {
+          "type": "richtext",
+          "id": "slide_content",
+          "label": "内容"
+        }
+    
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Swiper Gallery Center",
+       "category": "Swiper Section"
+    },
+  ]
+}
+{% endschema %}