zz-shopify-components 0.0.1-beta.1

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

@@ -0,0 +1,745 @@
+{% assign non_collapsible_blocks = section.blocks
+  | reject: 'type', 'video'
+%}
+{% assign swiper_blocks = section.blocks | where: 'type', 'video' %}
+{% assign block_size = swiper_blocks.size %}
+
+<style>
+  #shopify-section-{{ section.id }} {
+    background: {{ section.settings.bg_color }};
+    padding-top: {{ section.settings.mobile_padding_top }}px;
+    padding-bottom: {{ section.settings.mobile_padding_bottom }}px;
+  }
+  #shopify-section-{{ section.id }} .swiper-slide{
+    background: {{ section.settings.bg_color }};
+  }
+  @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-tab-swiper {
+     width: 100%;
+     letter-spacing: 0;
+   }
+
+   #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets {
+     bottom: 9px;
+   }
+   #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets .swiper-pagination-bullet {
+     padding: 0 8px;
+     background-color: {{ section.settings.pagination_color }};
+     opacity: 0.5;
+   }
+   #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets .swiper-pagination-bullet-active {
+     opacity: 1;
+   }
+
+   #shopify-section-{{ section.id }} .swiper-slide-active .active-box-content {
+    display: block !important;
+   }
+   @media screen and (max-width: 1024px) {
+     #shopify-section-{{ section.id }} .zz-video-tab-swiper {
+       width: 100%;
+       padding: 0 20px;
+     }
+
+     #shopify-section-{{ section.id }} .zz-banner-tab-swiper {
+       width: 100%;
+
+     }
+     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-slide {
+       width: 100% !important;
+     }
+     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-slide .media-box {
+       position: relative;
+       width: 100%;
+       aspect-ratio: 16 / 9;
+     }
+     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets {
+       bottom: 85px;
+       left: 50%;
+       transform: translateX(-50%);
+       width: 90vw;
+       height: 48px;
+     }
+     #shopify-section-{{ section.id }}  .swiper-pagination-horizontal {
+       overflow-x: auto;       /* 启用横向滚动 */
+       white-space: nowrap;    /* 不换行，强制所有子项在一行 */
+       -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 */
+     }
+     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets {
+      border-bottom: 1px solid {{ section.settings.mb_tab_line_color }};
+     }
+     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets .swiper-pagination-bullet {
+       box-sizing: content-box;
+       margin: 0;
+       margin-right: 20px;
+       width: fit-content;
+       height: 47px;
+       line-height: 47px;
+       border-radius: 0;
+       background: none;
+       border-top: 0;
+       color: {{ section.settings.tab_title_color }};
+       opacity: 1;
+       font-weight: 700;
+       margin-bottom: -1px;
+     }
+     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets .swiper-pagination-bullet:last-child {
+      margin: 0;
+     }
+     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets .swiper-pagination-bullet-active {
+       border-bottom: 2px solid {{ section.settings.mb_tab_active_line_color }};
+       height: 45px;
+       line-height: 45px;
+       
+       color: {{ section.settings.tab_title_active_color }};
+     }
+
+   }
+   @media screen and (min-width: 1024px) {
+     #shopify-section-{{ section.id }} .zz-banner-tab-swiper {
+       width: 80vw;
+     }
+     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-slide {
+       width: 80vw;
+     }
+     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-slide .media-box {
+       position: relative;
+       width: 80vw;
+       height: calc(80vw / 16 * 9);
+     }
+     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets {
+       bottom: 135px;
+       left: 50%;
+       transform: translateX(-50%);
+       width: 70vw;
+       height: 48px;
+       display: flex;
+       border-radius: 4px;
+       background: {{ section.settings.tab_bar_bg_color }};
+
+     }
+     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets .swiper-pagination-bullet {
+       box-sizing: content-box;
+       margin: 0;
+       width: calc(100% / {{ block_size }});
+       height: 47px;
+       line-height: 47px;
+       border-radius: 0;
+       background: none;
+       border-top: 0;
+       color: {{ section.settings.tab_title_color }};
+       opacity: 1;
+       font-weight: 700;
+       font-size: 18px;
+     }
+     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets .swiper-pagination-bullet-active {
+       border-top: 2px solid {{ section.settings.pc_tab_active_line_color }};
+       height: 45px;
+       line-height: 45px;
+       color: {{ section.settings.tab_title_active_color }};
+       font-weight: 700;
+     }
+
+   }
+   @media screen and (min-width: 1280px) {
+     #shopify-section-{{ section.id }} .zz-banner-tab-swiper {
+      width: 1220px;
+     }
+     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-slide {
+      width: 1220px;
+     }
+     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-slide .media-box {
+       position: relative;
+       width: 1220px;
+        height: 686px;
+     }
+     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets {
+       width: 1030px;
+     }
+   }
+
+</style>
+
+<div 
+  class='zz-video-tab-swiper'
+  {% if section.settings.module_name != blank %}data-zz-module-name="{{ section.settings.module_name }}"{% endif %}
+>
+  <div class='fade-in-box tw-flex tw-flex-col tw-justify-center'>
+    {% for block in non_collapsible_blocks %}
+      {% case block.type %}
+        {% when 'title' %}
+          {% 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'
+          %}
+          <style>
+            #shopify-section-{{section.id}} .content-title {
+              margin-bottom: {{ block.settings.mobile_margin_bottom }}px;
+            }
+            @media screen and (min-width: 1024px) {
+              #shopify-section-{{section.id}} .content-title {
+                margin-bottom: {{ block.settings.pc_margin_bottom }}px;
+              }
+            }
+          </style>
+        {% when 'text_content' %}
+          {% render 'zz-content-text',
+            text: block.settings.pc_text,
+            mb_text: block.settings.mb_text,
+            text_color: block.settings.text_color,
+            class_name: 'content-text tw-text-center'
+          %}
+          <style>
+            #shopify-section-{{section.id}} .content-text {
+              margin-bottom: {{ block.settings.mobile_margin_bottom }}px;
+            }
+            @media screen and (min-width: 1024px) {
+              #shopify-section-{{section.id}} .content-text {
+                margin-bottom: {{ block.settings.pc_margin_bottom }}px;
+              }
+            }
+          </style>
+      {% endcase %}
+    {% endfor %}
+  </div>
+
+  <div class='zz-swiper-container'>
+    <div
+      class='swiper zz-banner-tab-swiper zz-banner-tab-swiper-{{ section.id }} lg:tw-w-[80vw] xl:tw-w-[64vw]'
+    >
+      <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 class='slide-box tw-mt-[78px] lg:tw-mt-[148px] tw-h-[60px] lg:tw-h-[80px]'>
+              <div class='active-box-content tw-hidden slide-content lg:tw-w-[814px] lg:tw-mx-auto tw-mt-[8px]'>
+                {% render 'zz-content-text',
+                  text: banner.settings.slide_content,
+                  mb_text: banner.settings.slide_content_mb,
+                  text_color: banner.settings.content_color,
+                  pc_font_size: 16,
+                  mobile_font_size: 12,
+                  pc_text_align: 'center',
+                  mobile_text_align: 'center'
+                %}
+              </div>
+            </div>
+          </div>
+        {% endfor %}
+      </div>
+
+      <!-- Pagination indicator -->
+      <div class='swiper-pagination'></div>
+    </div>
+  </div>
+</div>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    let isDesktop = window.innerWidth > 1023;
+  // 添加标题数组
+  const slideTitles = [
+    {% for block in swiper_blocks %}
+      "{{ block.settings.slide_title }}",
+    {% endfor %}
+  ];
+
+  const swiperClassName = '.zz-banner-tab-swiper-{{ section.id }}';
+    const tabSwiper = new Swiper(swiperClassName, {
+      loop: true,
+      slidesPerView: 'auto',
+      centeredSlides: true,
+      spaceBetween: isDesktop ? 24 : 8,
+
+      pagination: {
+        el: '.swiper-pagination',
+        clickable: true,
+        renderBullet: function (index, className) {
+          const title = slideTitles[index % slideTitles.length];
+          return '<span class="' + className + '">' + title + '</span>';
+        }
+      },
+      effect: 'fade',
+      on: {
+
+        slideChangeTransitionEnd: function () {
+          handleVideoOnSlideChange()
+        },
+        slideChange: function (e) {
+          if (!isDesktop) {
+            scrollPaginationToCenter();
+          }
+        },
+        slideChangeTransitionStart: function () {
+          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);
+          if (media.type === 'video') {
+            media.video.removeEventListener('ended', endedHandler);
+          }
+        }
+      },
+    });
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          // 当 swiper-wrapper 第一次出现在视口中时执行
+          setTimeout(() => {
+            handleVideoOnSlideChange();
+          }, 200);
+          // 执行一次后取消观察
+          observer.unobserve(entry.target);
+        }
+      });
+    }, {
+      threshold: 0.2 // 当 20% 的元素可见时触发
+    });
+    const section = document.getElementById(
+      'shopify-section-{{section.id}}'
+    );
+    const swiperWrapper = section.querySelector('.swiper-wrapper');
+    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;
+    }
+
+    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 endedHandler () {
+        if (tabSwiper.isEnd) {
+          tabSwiper.slideTo(0);
+        } else {
+          tabSwiper.slideNext();
+        }
+        this.removeEventListener('ended', endedHandler);
+    };
+    function handleMediaNext(type, videoDom) {
+      if (type === 'video') {
+        videoDom.addEventListener('ended', endedHandler);
+      } else if (type === 'image') {
+
+        setTimeout(() => {
+          if (tabSwiper.isEnd) {
+            tabSwiper.slideTo(0);
+          } else {
+            tabSwiper.slideNext();
+          }
+        }, 5000);
+      }
+    }
+
+    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);
+      if (media.type === 'video') {
+        allvideo.forEach((item) => {
+          if (item === media.video) {
+            media.video.currentTime = 0;
+            media.video.play();
+            handleMediaNext('video', media.video);
+
+          } else {
+            item.currentTime = 0;
+            item.pause();
+          }
+        });
+      } else if (media.type === 'image') {
+        // 处理图片的情况
+        handleMediaNext('image', media.image);
+        allvideo.forEach((item) => {
+          item.pause();
+          item.currentTime = 0;
+        });
+      }
+
+    }
+
+  })
+</script>
+
+{% schema %}
+{
+  "name": "Video Img Swiper Tab",
+  "settings": [
+    {
+      "type": "color",
+      "id": "bg_color",
+      "default": "#ffffff",
+      "label": "背景色"
+    },
+
+    {
+      "type": "color",
+      "id": "pagination_color",
+      "default": "#ffffff",
+      "label": "轮播导航圆圈颜色"
+    },
+    {
+      "type": "color",
+      "id": "tab_bar_bg_color",
+      "label": "PC Tab栏背景颜色",
+      "default": "#00000012"
+    },
+    {
+      "type": "color",
+      "id": "tab_title_active_color",
+      "label": "Tab标题激活颜色",
+      "default": "#000000"
+    },
+    {
+      "type": "color",
+      "id": "tab_title_color",
+      "label": "Tab标题颜色",
+      "default": "#767473"
+    },
+    {
+      "type": "color",
+      "id": "pc_tab_active_line_color",
+      "label": "PC Tab栏激活划线颜色",
+      "default": "#000000"
+    },
+    {
+      "type": "color",
+      "id": "mb_tab_line_color",
+      "label": "移动Tab栏划线颜色",
+      "default": "#D9D6D2"
+    },
+    {
+      "type": "color",
+      "id": "mb_tab_active_line_color",
+      "label": "mb Tab栏激活划线颜色",
+      "default": "#2B2B2A"
+    },
+
+    {
+      "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": "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
+        }
+      ]
+    },
+    {
+      "type": "text_content",
+      "name": "文字内容",
+      "settings": [
+        {
+          "type": "richtext",
+          "id": "pc_text",
+          "label": "PC文字内容 (PC Text Content)",
+          "default": "<p>这里是文字内容</p>"
+        },
+        {
+          "type": "richtext",
+          "id": "mb_text",
+          "label": "移动文字内容 (Mobile Text Content)",
+          "default": "<p>这里是文字内容</p>"
+        },
+        {
+          "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": "内容(PC)"
+        },
+        {
+          "type": "richtext",
+          "id": "slide_content_mb",
+          "label": "内容(Mobile)"
+        },
+        {
+          "type": "color",
+          "id": "content_color",
+          "default": "#8F8882",
+          "label": "内容描述颜色"
+        }
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Tab栏的视频轮播",
+    },
+    {
+      "name": "Tab栏的视频轮播-预设",
+      "settings": {
+        "bg_color": "#ffffff",
+        "pagination_color": "#ffffff",
+        "tab_bar_bg_color": "#00000012",
+        "tab_title_active_color": "#000000",
+        "tab_title_color": "#767473",
+        "pc_tab_active_line_color": "#000000",
+        "mb_tab_line_color": "#d9d6d2",
+        "mb_tab_active_line_color": "#2b2b2a",
+        "pc_padding_top": 80,
+        "pc_padding_bottom": 80,
+        "mobile_padding_top": 40,
+        "mobile_padding_bottom": 40
+      },
+      "blocks": [
+        {
+          "type": "title",
+          "settings": {
+            "pc_title": "<p>Tab栏的视频轮播</p>",
+            "mb_title": "<p>Tab栏的视频轮播</p>",
+            "text_color": "#010101",
+            "pc_margin_bottom": 40,
+            "mobile_margin_bottom": 20
+          }
+        },
+        {
+          "type": "text_content",
+          "settings": {
+            "pc_text": "<p>Tab栏的视频轮播 视频与图片 下面是tab栏切换，新增Video Block添加tab选项</p>",
+            "mb_text": "<p>Tab栏的视频轮播 视频与图片 下面是<br/>tab栏切换，新增Video Block添加tab选项</p>",
+            "text_color": "#010101",
+            "pc_margin_bottom": 40,
+            "mobile_margin_bottom": 20
+          }
+        },
+        {
+          "type": "video",
+          "settings": {
+            "slide_title": "Tab name",
+            "video_url_pc": "",
+            "video_pc": "shopify://files/videos/preset_pc_swiper_video_video.mp4",
+            "poster_pc": "shopify://shop_images/preset_pc_swiper_video_poster.png",
+            "video_mb": "shopify://files/videos/preset_mobile_swiper_video_video.mp4",
+            "poster_mb": "shopify://shop_images/preset_mobile_swiper_video_poster.png",
+            "slide_content": "<p>Description set here, Description set here<br/>Description set here<br/></p>",
+            "slide_content_mb": "<p>Description set here, Description set here, Description set here</p>",
+            "content_color": "#5d544c"
+          }
+        },
+        {
+          "type": "video",
+          "settings": {
+            "slide_title": "Tab name",
+            "video_url_pc": "",
+            "video_pc": "shopify://files/videos/preset_pc_swiper_video_video_1.mp4",
+            "poster_pc": "shopify://shop_images/preset_pc_swiper_video_poster_1.png",
+            "video_mb": "shopify://files/videos/preset_mobile_swiper_video_video_1.mp4",
+            "poster_mb": "shopify://shop_images/preset_mobile_swiper_video_poster_1.png",
+            "slide_content": "<p>Description set here, Description set here<br/>Description set here</p>",
+            "slide_content_mb": "<p>Description set here, Description set here<br/>Description set here</p>",
+            "content_color": "#5d544c"
+          }
+        }
+      ]
+    }
+  ]
+}
+{% endschema %}