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

package/sections/zz-video-progress-swiper.liquid

@@ -0,0 +1,625 @@
+
+{% assign non_collapsible_blocks = section.blocks
+  | reject: 'type', 'video'
+%}
+{% 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 }} .bullet-title , #shopify-section-{{ section.id }} .bullet-desc {
+    text-align: left;
+    font-weight: 400 !important;
+    color: #FFFFFF80;
+
+  }
+   #shopify-section-{{ section.id }} .zz-video-progress-swiper .swiper-pagination-bullets {
+      display: flex;
+      gap: 16px;
+      justify-content: space-between;
+      top: 0px;
+      left: 0px;
+      right:0px;
+     bottom: unset;
+     height: fit-content;
+   }
+
+
+  #shopify-section-{{ section.id }} .zz-video-progress-swiper .swiper-pagination-bullets .swiper-pagination-bullet {
+    width: fit-content;
+    box-sizing: border-box;
+    margin: 0;
+    height: fit-content;
+    position: relative;
+    border-bottom: 2px solid #FFFFFF4F !important;
+    padding-bottom: 23px;
+    border-radius: unset;
+    flex: 1;
+    opacity: 1;
+  }
+   #shopify-section-{{ section.id }} .swiper-pagination-bullet .bullet-title {
+    white-space: nowrap;
+  }
+  #shopify-section-{{ section.id }} .swiper-pagination-bullet .progress-line {
+    position: absolute;
+    bottom: -2px;
+    left: 0;
+    height: 2px;
+    width: 0;
+    background-color: #FFFFFF;
+    transition: width 0.2s;
+  }
+  #shopify-section-{{ section.id }} .bullet-normal-icon {
+    display: inline-block;
+  }
+  #shopify-section-{{ section.id }} .swiper-pagination-bullets .swiper-pagination-bullet {
+    background: none;
+  }
+  #shopify-section-{{ section.id }} .swiper-pagination-bullet-active .bullet-normal-icon {
+    display: none !important;
+  }
+  #shopify-section-{{ section.id }} .swiper-pagination-bullet-active .bullet-active-icon {
+    display: inline-block !important;
+  }
+  #shopify-section-{{ section.id }} .swiper-pagination-bullet-active .bullet-title {
+    color: #FFFFFF;
+    font-weight: 700 !important;
+  }
+  #shopify-section-{{ section.id }} .swiper-pagination-bullet-active .bullet-desc{
+    color: #FFFFFF;
+  }
+
+ 
+  @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 }} .zz-video-progress-swiper .swiper-pagination-bullets .swiper-pagination-bullet {
+      padding-bottom: 30px;
+    }
+  }
+   @media screen and (max-width: 1024px) {
+    #shopify-section-{{ section.id }} { 
+      padding-left: 20px;
+      padding-right: 20px;
+    }
+
+    #shopify-section-{{ section.id }} .content-title {
+      margin-bottom: var(--zz-video-progress-title-mb-mb);
+    }
+
+     #shopify-section-{{ section.id }} .zz-video-progress-swiper {
+       width: 100%;
+
+     }
+     #shopify-section-{{ section.id }} .zz-video-progress-swiper .swiper-slide {
+       width: 100% !important;
+     }
+     #shopify-section-{{ section.id }} .zz-video-progress-swiper .swiper-slide .media-box {
+       position: relative;
+       width: 100%;
+       aspect-ratio: 335 / 252;
+     }
+     #shopify-section-{{ section.id }} .zz-video-progress-swiper .swiper-pagination-bullets {
+       overflow-y: hidden;
+       top: 0px;
+       left: 0px;
+     }
+     #shopify-section-{{ section.id }} .swiper-pagination-bullet {
+        min-width:190px;
+     }
+     #shopify-section-{{ section.id }}  .swiper-pagination-horizontal {
+       overflow-x: auto;       /* 启用横向滚动 */
+       -webkit-overflow-scrolling: touch; /* 移动端流畅滚动（可选） */
+       scrollbar-width: none;     /* Firefox */
+       -ms-overflow-style: none;  /* IE 和 Edge */
+     }
+     #shopify-section-{{ section.id }}  .swiper-pagination-horizontal::-webkit-scrollbar {
+       display: none;             /* Chrome, Safari */
+     }
+   }
+   @media screen and (min-width: 1024px) {
+     #shopify-section-{{ section.id }} .content-title {
+      margin-bottom: var(--zz-video-progress-title-pc-mb);
+    }
+     #shopify-section-{{ section.id }} .zz-video-progress-swiper {
+       width: 90vw;
+     }
+     #shopify-section-{{ section.id }} .zz-video-progress-swiper .swiper-slide {
+       width: 90vw;
+     }
+     #shopify-section-{{ section.id }} .zz-video-progress-swiper .swiper-slide .media-box {
+       position: relative;
+       aspect-ratio: 16 / 9;
+     }
+     #shopify-section-{{ section.id }} .zz-video-progress-swiper .swiper-pagination-bullets {
+       top: 0px;
+       left: 0px;
+       width: 100%;
+
+     }
+     #shopify-section-{{ section.id }} .zz-video-progress-swiper .swiper-pagination-bullets .swiper-pagination-bullet {
+       box-sizing: border-box;
+       margin: 0;
+      
+     }
+     #shopify-section-{{ section.id }} .zz-video-progress-swiper .swiper-pagination-bullets .swiper-pagination-bullet-active {
+       font-weight: 700;
+     }
+
+   }
+   @media screen and (min-width: 1440px) {
+    #shopify-section-{{ section.id }} .zz-video-progress-swiper , #shopify-section-{{ section.id }} .zz-video-progress-swiper .swiper-slide {
+      width: 1220px;
+     }
+     #shopify-section-{{ section.id }} .zz-video-progress-swiper .swiper-slide .media-box {
+       position: relative;
+       width: 1220px;
+       aspect-ratio: 16 / 9;
+       
+     }
+   }
+   
+
+
+
+</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="video-progress-title-desc fade-in-box tw-flex tw-flex-col tw-justify-center">
+        {% for block in non_collapsible_blocks %}
+            {% case block.type %}
+                {% when 'title' %}
+                    <div style="--zz-video-progress-title-mb-mb: {{ block.settings.mobile_margin_bottom }}px;
+                                --zz-video-progress-title-pc-mb: {{ block.settings.pc_margin_bottom }}px;">
+                        {% render 'zz-h2',
+                            title: block.settings.pc_title,
+                            title_mb: block.settings.mb_title,
+                            title_color: block.settings.text_color,
+                            class_name: 'content-title tw-text-center',
+                        %}
+
+                    </div>
+
+            {% endcase %}
+        {% endfor %}
+    </div>
+    <div class='zz-video-progress-swiper lg:tw-pt-[166px] tw-pt-[146px] tw-relative zz-video-progress-swiper-{{ section.id }}'>
+      <div class='swiper-wrapper'>
+        {% for banner in swiper_blocks %}
+              <div class='swiper-slide'>
+                <div class='media-box tw-rounded-[10px] lg:tw-rounded-[16px] 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>
+              </div>
+            {% endfor %}
+        
+      </div>
+
+      <!-- Pagination indicator -->
+      <div class='swiper-pagination'></div>
+
+
+    </div>
+</div>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    const swiperClassName = '.zz-video-progress-swiper-{{ 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 slideTitles = [
+      {% for block in swiper_blocks %}
+        "{{ block.settings.slide_title }}",
+      {% endfor %}
+    ];
+
+    const slideDescs = [
+      {% for block in swiper_blocks %}
+        "{{ block.settings.slide_content | strip_html | escape }}",
+      {% endfor %}
+    ];
+
+    const prevSwiper = new Swiper(swiperClassName, {
+      loop: false,
+      slidesPerView: 1,
+      centeredSlides: true,
+      spaceBetween: isDesktop ? 30 : 8,
+      centeredSlides: isDesktop ? false: true,
+      pagination: {
+        el: '.swiper-pagination',
+        clickable: true,
+        renderBullet: function (index, className) {
+            const title = slideTitles[index % slideTitles.length];
+            const desc = slideDescs[index % slideDescs.length];
+               return `<div class="${className}" {% if section.settings.module_id != blank %} data-track-zz-element="{{ section.settings.module_id }}_change" {% endif %}>
+                        <div class="bullet-title tw-text-left tw-text-[14px] lg:tw-text-[24px] tw-mb-[10px] lg:tw-mb-[16px] tw-flex tw-items-center tw-gap-[10px]">
+                          <span class="bullet-active-icon tw-hidden tw-w-[17px] tw-h-[17px] lg:tw-w-[32px] lg:tw-h-[32px]">
+                            <img class="tw-w-full tw-h-full tw-object-contain" src="{{ section.settings.active_icon | image_url: width: 40 }}" alt="Specs Header" width="40" height="auto">
+                            
+                          </span>
+                          <span class="bullet-normal-icon tw-w-[10px] tw-h-[17px] lg:tw-w-[14px] lg:tw-h-[32px]">
+                            <svg  class="tw-w-full tw-h-full"  viewBox="0 0 14 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                              <path d="M13.572 15.1499L1.81194 6.23102C1.47494 5.97525 1.01596 5.92788 0.630426 6.10883C0.244728 6.28975 0 6.66731 0 7.08114V24.9189C0 25.3327 0.244728 25.7103 0.630426 25.8912C0.785849 25.9642 0.953352 26 1.11986 26C1.36622 26 1.61081 25.9216 1.81194 25.769L13.5719 16.8502C13.8422 16.6451 14 16.3318 14 16C14 15.6683 13.8422 15.355 13.572 15.1499ZM2.24003 22.6946V9.30547L11.0671 16L2.24003 22.6946Z" fill="white" fill-opacity="0.3"/>
+                            </svg>
+
+                          </span>
+                          ${title}
+                        </div>
+                        <div class="bullet-desc tw-text-left tw-text-[10px] lg:tw-text-[16px] tw-leading-[1.5]">${desc}</div>
+                        <span class="progress-line"></span>
+                      </div>`;
+        }
+      },
+      effect: isDesktop ?  'fade' : 'slide',
+      on: {
+        slideChangeTransitionEnd: function () {
+          handleVideoOnSlideChange();
+        },
+        slideChangeTransitionStart: function () {
+          if (progressInterval) {
+            clearInterval(progressInterval);
+          }
+          if (progressTimer) {
+            clearTimeout(progressTimer);
+          }
+        },
+        slideChange: function () {
+          if (!isDesktop) {
+            scrollPaginationToCenter();
+          }
+          const section = document.getElementById('shopify-section-{{section.id}}');
+            section
+              .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);
+    }
+
+    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('.swiper-pagination');
+      const activeBullet = paginationContainer.querySelector('.swiper-pagination-bullet-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 section = document.getElementById('shopify-section-{{section.id}}');
+      const activeBullet = section.querySelector(
+        '.swiper-pagination-bullet-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.transition = '0.2s';
+              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 section = document.getElementById('shopify-section-{{section.id}}');
+      const allvideo = section.querySelectorAll('video');
+      // 播放当前 active slide 中的视频
+      const activeSlide = section.querySelector('.swiper-slide-active');
+      const media = getVisibleDisplayMedias(activeSlide);
+      // 重置进度条
+      const activeBullet = section.querySelector(
+          '.swiper-pagination-bullet-active'
+        );
+        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();
+            }
+
+            updataMediaProgress('video', media.video);
+          } else {
+            item.pause();
+          }
+        });
+      } else if (media.type === 'image') {
+        // 处理图片的情况
+        updataMediaProgress('image', media.image);
+        allvideo.forEach((item) => {
+          item.pause();
+        });
+      }
+    }
+  });
+</script>
+
+{% schema %}
+{
+  "name": "Video Progress Swiper",
+  "class": "zz-video-progress-swiper-section",
+  "settings": [
+    {
+      "type": "color_background",
+      "id": "bg_color",
+      "default": "#ffffff",
+      "label": "背景色"
+    },
+    {
+      "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": "image_picker",
+        "id": "active_icon",
+        "label": "播放图标",
+        "info": "分页指示器激活状态下的图标"
+      },
+     {
+      "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": [
+    {
+      "type": "title",
+      "name": "标题",
+      "settings": [
+        {
+          "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": "number",
+          "id": "pc_margin_bottom",
+          "label": "PC下外边距 (Margin Bottom)",
+          "default": 40
+        },
+        {
+          "type": "number",
+          "id": "mobile_margin_bottom",
+          "label": "移动下外边距 (Margin Bottom)",
+          "default": 20
+        }
+      ]
+    },
+    {
+      "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": "richtext",
+          "id": "slide_content",
+          "label": "内容"
+        }
+    
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Video Progress Swiper",
+       "category": "Swiper Section"
+    },
+  ]
+}
+{% endschema %}