zz-shopify-components 0.32.1-beta.4 → 0.32.1-beta.5

package/assets/zz-components.js

@@ -451,6 +451,25 @@ function getVisibleDisplayMedias(container) {
 // component 统一的初始化入口
 document.addEventListener('DOMContentLoaded', (event) => {
   const isDesktop = window.innerWidth > 1023;
+
+  // 处理所有组件可见逻辑处理
+  const compIntersectionObserver = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      const el = entry.target;
+      if (entry.isIntersecting) {
+        
+      } else {
+        if (el.classList.contains('zz-card-animate-list')) {
+          // 重置所有
+          el.querySelectorAll('.zz-card-inner').forEach(card => {
+            card.classList.remove('is-active');
+          });
+        }
+      }
+    });
+  });
+
+
   if (!isDesktop) {
     const switchCard = document.querySelectorAll('.product-switch-card');
     if (switchCard.length > 0) {
@@ -481,5 +500,28 @@ document.addEventListener('DOMContentLoaded', (event) => {
   });
 
 
-});
+  // zz-card-animate-text.liquid
+  const cardListGroup = document.querySelectorAll('.zz-card-animate-list');
+  cardListGroup.forEach((list) => {
+    if (!list) return;
+    if (isDesktop) return;
+    list.addEventListener('click', (e) => {
+      const item = e.target.closest('.zz-card-inner');
+      if (!item || !list.contains(item)) return;
+
+      console.log('click card item');
+
+      // 重置所有
+      list.querySelectorAll('.zz-card-inner').forEach(el => {
+        el.classList.remove('is-active');
+      });
+
+      // 当前设为 B 状态
+      item.classList.add('is-active');
+    });
+    compIntersectionObserver.observe(list);
+
+  });
+
 
+});

package/blocks/zz-card-animate-text.liquid

@@ -0,0 +1,229 @@
+{% schema %}
+{
+  "name": "Card Animate Text",
+  "class": "zz-card-animate-text",
+  "settings": [
+    {
+      "type": "select",
+      "id": "bg_type",
+      "label": "背景类型",
+      "options": [
+        { "value": "image", "label": "图片" },
+        { "value": "video", "label": "视频" }
+      ],
+      "default": "image"
+    },
+    {
+      "type": "header",
+      "content": "PC端设置"
+    },
+    {
+      "type": "image_picker",
+      "id": "desktop_image",
+      "label": "PC端图片"
+    },
+
+    {
+      "type": "range",
+      "id": "pc_width",
+      "min": 0,
+      "max": 100,
+      "step": 1,
+      "unit": "%",
+      "label": "PC端占父容器的百分比，单位%",
+      "default": 50
+    },
+    {
+      "type": "number",
+      "id": "desktop_border_radius",
+      "label": "PC端圆角",
+      "default": 16,
+      "info": "单位：px"
+    },
+    {
+      "type": "header",
+      "content": "移动端设置"
+    },
+    {
+      "type": "image_picker",
+      "id": "mobile_image",
+      "label": "移动端图片"
+    },
+
+    {
+      "type": "range",
+      "id": "mobile_width",
+      "min": 0,
+      "max": 100,
+      "step": 1,
+      "unit": "%",
+      "label": "移动端占父容器的百分比，单位%",
+      "default": 100
+    },
+    {
+      "type": "number",
+      "id": "mobile_border_radius",
+      "label": "移动端圆角",
+      "default": 10,
+      "info": "单位：px"
+    },
+    {
+      "type": "html",
+      "id": "front_text",
+      "label": "正面文案",
+      "default": "<p>Enter your content here</p>"
+    },
+    {
+      "type": "select",
+      "id": "front_text_position",
+      "label": "正面文案位置",
+      "default": "left_top",
+      "options": [
+        { "value": "left_top", "label": "左上" },
+        { "value": "left_bottom", "label": "左下" }
+      ],
+    },
+    {
+      "type": "richtext",
+      "id": "hover_text",
+      "label": "hover文案"
+    },
+    {
+      "type": "video",
+      "id": "pc_background_video",
+      "label": "PC端背景视频",
+      "visible_if": "{{ block.settings.bg_type == 'video' }}"
+    },
+    {
+      "type": "video",
+      "id": "mobile_background_video",
+      "label": "移动端视频",
+      "visible_if": "{{ block.settings.bg_type == 'video' }}"
+    },
+  ],
+  "presets": [
+    {
+      "name": "Card Animate Text",
+    }
+  ]
+}
+{% endschema %}
+
+
+
+<div class="zz-card-inner tw-relative">
+    <div class="main-face tw-w-full tw-h-full">
+      {% render 'zz-img',
+            pc_image: block.settings.desktop_image,
+            mb_image: block.settings.mobile_image,
+            image_alt: 'image',
+            class_name: "card-inner-image tw-w-full tw-h-auto",
+        %}
+
+        <div class="main-text tw-absolute tw-text-white">
+          {{ block.settings.front_text }}
+        </div>
+
+        <div class="add-btn tw-absolute tw-w-[21px] tw-h-[21px] lg:tw-w-[45px] lg:tw-h-[45px] tw-right-[7px] tw-bottom-[7px] lg:tw-right-[20px] lg:tw-bottom-[20px]">
+         <span class="tw-w-[6px] tw-h-[7px] lg:tw-w-[14px] lg:tw-h-[15px]">
+            <svg width="100%" height="100%" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <line y1="6.875" x2="13.75" y2="6.875" stroke="white" stroke-width="1.25"/>
+            <line x1="6.87524" y1="2.73196e-08" x2="6.87524" y2="15" stroke="white" stroke-width="1.25"/>
+            </svg>
+         </span>
+
+      </div>
+    </div>
+    <div class="cover-face tw-hidden tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full tw-bg-black/50">
+      {% if block.settings.bg_type == 'video'  %}
+
+         {% render 'zz-video',
+          pc_video: block.settings.pc_background_video,
+          pc_poster: block.settings.desktop_image,
+          mb_video: block.settings.mobile_background_video,
+          mb_poster: block.settings.mobile_image,
+          lazy: true,
+          class: 'card-inner-video tw-w-full tw-h-full tw-object-cover',
+          autoplay: true,
+          loop: true,
+          muted: true
+        %}
+
+      {% else %}
+        <div class="cover-text tw-flex tw-items-center tw-px-[10px] lg:tw-px-[25px] tw-h-full tw-w-full max-lg:tw-leading-[1.5] lg:tw-leading-[1.2] 
+          tw-text-[14px] lg:tw-text-[24px] tw-font-bold tw-text-white">
+          {{ block.settings.hover_text }}
+        </div>
+      {% endif %}
+        
+    </div>
+</div>
+
+
+<style>
+ 
+  #shopify-block-{{ block.id }} {
+    cursor: pointer;
+    border-radius: {{ block.settings.mobile_border_radius }}px;
+    width: {% if block.settings.mobile_width > 0 %}{{ block.settings.mobile_width }}%{% else %}100%{% endif %};
+    overflow: hidden;
+  }
+  #shopify-block-{{ block.id }} .main-text {
+    font-weight: 700;
+    font-size: 12px;
+    line-height: 120%;
+    right: 10px;
+    {% if block.settings.front_text_position == 'left_top' %}
+      top: 10px;
+      left: 10px;
+    {% else %}
+      bottom: 10px;
+      left: 10px;
+    {% endif %}
+  }
+  #shopify-block-{{ block.id }} .zz-card-inner:hover .cover-face {
+    display: block !important;
+  }
+  #shopify-block-{{ block.id }} .zz-card-inner:hover .main-text {
+    display: none !important;
+  }
+   #shopify-block-{{ block.id }} .zz-card-inner:hover .add-btn {
+    display: none !important;
+  }
+  #shopify-block-{{ block.id }} .zz-card-inner.is-active .cover-face {
+    display: block !important;
+  }
+  #shopify-block-{{ block.id }} .zz-card-inner.is-active .main-text {
+    display: none !important;
+  }
+    #shopify-block-{{ block.id }} .zz-card-inner.is-active .add-btn {
+    display: none !important;
+  }
+  #shopify-block-{{ block.id }} .add-btn {
+    background: rgba(255, 255, 255, 0.3);
+    backdrop-filter: blur(10px);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+
+  @media screen and (min-width: 1024px) {
+    #shopify-block-{{ block.id }} {
+      border-radius: {{ block.settings.desktop_border_radius }}px;
+      width: {% if block.settings.pc_width > 0 %}{{ block.settings.pc_width }}%{% else %}100%{% endif %};
+    }
+    #shopify-block-{{ block.id }} .main-text {
+      font-size: 24px;
+      right: 20px;
+      {% if block.settings.front_text_position == 'left_top' %}
+        top: 20px;
+        left: 20px;
+      {% else %}
+        bottom: 20px;
+        left: 20px;
+      {% endif %}
+    }
+  }
+</style>

package/blocks/zz-normal-swiper.liquid

@@ -683,7 +683,7 @@
       "id": "enable_long_image_scroll",
       "label": "启用超长图横向滚动模式",
       "info": "开启后，单张图片可横向滑动查看，常用于超宽全景图。此时请将可见数(Mobile/PC)设置为1。",
-      "default": true
+      "default": false
     },
     {
       "type": "range",

package/blocks/zz-swiper-marquee.liquid

@@ -0,0 +1,398 @@
+{% comment %}
+  ZZ Swiper Marquee Row
+  这是一个高性能、可复用的单行跑马灯组件。
+  支持嵌套子 Block，支持匀速滚动、悬停暂停和手动拖拽。
+{% endcomment %}
+
+{% schema %}
+{
+  "name": "ZZ Swiper Marquee Row",
+  "class": "zz-swiper-marquee-row",
+  "settings": [
+    {
+      "type": "header",
+      "content": "跑马灯配置 (Animation)"
+    },
+    {
+      "type": "select",
+      "id": "direction",
+      "label": "滚动方向",
+      "options": [
+        { "value": "ltr", "label": "从左向右 (Left-to-Right)" },
+        { "value": "rtl", "label": "从右向左 (Right-to-Left)" }
+      ],
+      "default": "rtl"
+    },
+    {
+      "type": "number",
+      "id": "marquee_speed",
+      "label": "滚动速度 (数值越小越快)",
+      "default": 8000,
+      "info": "这是完成一次完整循环所需的时间(ms)。建议值 4000-12000"
+    },
+    {
+      "type": "checkbox",
+      "id": "enable_autoplay_pc",
+      "label": "桌面端开启自动滚动",
+      "default": true
+    },
+    {
+      "type": "checkbox",
+      "id": "enable_autoplay_mobile",
+      "label": "移动端开启自动滚动",
+      "default": true
+    },
+    {
+      "type": "checkbox",
+      "id": "pause_on_hover",
+      "label": "鼠标悬停时暂停",
+      "default": true
+    },
+    {
+      "type": "checkbox",
+      "id": "enable_grab",
+      "label": "允许手动拖拽",
+      "default": false
+    },
+    {
+      "type": "header",
+      "content": "布局与尺寸 (Layout)"
+    },
+    {
+      "type": "number",
+      "id": "desktop_height",
+      "label": "桌面端高度 (px)",
+      "default": 400
+    },
+    {
+      "type": "number",
+      "id": "card_width_desktop",
+      "label": "桌面端卡片宽度 (px)",
+      "default": 300,
+      "info": "设置卡片的固定宽度，留空或0为自适应"
+    },
+    {
+      "type": "number",
+      "id": "mobile_height",
+      "label": "移动端高度 (px)",
+      "default": 250
+    },
+    {
+      "type": "number",
+      "id": "card_width_mobile",
+      "label": "移动端卡片宽度 (px)",
+      "default": 200,
+      "info": "设置卡片的固定宽度，留空或0为自适应"
+    },
+    {
+      "type": "range",
+      "id": "gap_desktop",
+      "label": "桌面端间距 (px)",
+      "default": 20,
+      "min": 0,
+      "max": 100,
+      "step": 2
+    },
+    {
+      "type": "range",
+      "id": "gap_mobile",
+      "label": "移动端间距 (px)",
+      "default": 12,
+      "min": 0,
+      "max": 50,
+      "step": 1
+    },
+    {
+      "type": "color",
+      "id": "bg_color",
+      "label": "背景底色",
+      "default": "transparent"
+    },
+    {
+      "type": "header",
+      "content": "媒体控制 (Media)"
+    },
+    {
+      "type": "checkbox",
+      "id": "video_autoplay",
+      "label": "视频自动播放",
+      "default": true,
+      "info": "开启后，内部视频块将默认静音自动播放"
+    }
+  ],
+  "blocks": [
+    {
+      "type": "@theme"
+    }
+  ],
+  "presets": [
+    {
+      "name": "ZZ Swiper Marquee Row",
+      "category": "ZZ Components",
+      "blocks": [
+        { "type": "zz-video-img-item" },
+        { "type": "zz-video-img-item" },
+        { "type": "zz-video-img-item" }
+      ]
+    }
+  ]
+}
+{% endschema %}
+
+<style>
+  #shopify-block-{{ block.id }} {
+    --marquee-speed: {{ block.settings.marquee_speed | default: 8000 }}ms;
+    --marquee-height: {{ block.settings.desktop_height | default: 400 }}px;
+    --marquee-gap: {{ block.settings.gap_desktop | default: 20 }}px;
+    --marquee-bg: {{ block.settings.bg_color | default: 'transparent' }};
+    
+    {% if block.settings.card_width_desktop > 0 %}
+      --card-width: {{ block.settings.card_width_desktop }}px;
+      --child-width: 100%;
+    {% else %}
+      --card-width: auto;
+      --child-width: auto;
+    {% endif %}
+
+    background: var(--marquee-bg);
+    width: 100%;
+    max-width: 100%;
+    overflow: hidden;
+    position: relative;
+    box-sizing: border-box;
+    display: block; /* 确保作为块级元素占满整行 */
+  }
+
+  #shopify-block-{{ block.id }} .active-box-content {
+    display: none;
+    margin: 0 !important;
+  }
+
+  #shopify-block-{{ block.id }} .media-box {
+    height: 100%;
+  }
+
+  @media (max-width: 749px) {
+    #shopify-block-{{ block.id }} {
+      --marquee-height: {{ block.settings.mobile_height | default: 250 }}px;
+      --marquee-gap: {{ block.settings.gap_mobile | default: 12 }}px;
+      
+      {% if block.settings.card_width_mobile > 0 %}
+        --card-width: {{ block.settings.card_width_mobile }}px;
+        --child-width: 100%;
+      {% else %}
+        --card-width: auto;
+        --child-width: auto;
+      {% endif %}
+    }
+  }
+
+  /* 宽度设置：占满父容器 100% 宽度 */
+  #shopify-block-{{ block.id }} .zz-marquee-container {
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+  }
+
+  #shopify-block-{{ block.id }} .zz-marquee-swiper {
+    height: var(--marquee-height);
+    width: 100%;
+    /* 移除 grab 手势，参考 comment-splide 使用默认或指针样式 */
+    cursor: default;
+  }
+
+  /* 核心核心：强制线性过渡曲线，消除 Swiper 的加速减速感 */
+  #shopify-block-{{ block.id }} .swiper-wrapper {
+    transition-timing-function: linear !important;
+  }
+
+  #shopify-block-{{ block.id }} .swiper-slide {
+    width: var(--card-width);
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: var(--marquee-gap);
+    overflow: hidden; /* Fix: Ensure internal media is clipped to the card shape */
+    border-radius: 16px; /* Desktop default */
+  }
+
+  @media (max-width: 749px) {
+    #shopify-block-{{ block.id }} .swiper-slide {
+      border-radius: 12px; /* Mobile default */
+    }
+  }
+
+  #shopify-block-{{ block.id }} .swiper-slide > * {
+    height: 100% !important;
+    width: var(--child-width) !important;
+    max-width: var(--child-width) !important;
+  }
+  
+  /* 强力覆盖子元素样式：针对 zz-video-img-item 等可能自带宽高的子组件 */
+  #shopify-block-{{ block.id }} .swiper-slide > [id^="shopify-block-"] {
+    width: var(--child-width) !important;
+    height: 100% !important;
+    margin: 0 !important;
+    transform: none !important;
+  }
+  /* 覆盖子组件内部媒体元素 */
+  #shopify-block-{{ block.id }} .swiper-slide .image-video-box,
+  #shopify-block-{{ block.id }} .swiper-slide video,
+  #shopify-block-{{ block.id }} .swiper-slide img {
+    width: var(--child-width) !important;
+    height: 100% !important;
+    object-fit: cover !important;
+    aspect-ratio: auto !important; /* 解除原有比例限制，听从 marquee 宽高 */
+  }
+</style>
+
+<div class="zz-marquee-container" id="zz-marquee-{{ block.id }}">
+  <div class="zz-marquee-swiper swiper">
+    <div class="swiper-wrapper">
+      {% comment %}
+        最佳实践：智能循环复制
+        Swiper loop 模式要求内容宽度至少达到容器宽度的 2 倍。
+        我们这里动态计算需要复制多少份，既保证了 Loop 稳定性，又避免了 DOM 过度膨胀。
+        目标：确保 Slide 总数至少达到 10 个以上 (或者更多，视宽度而定)。
+      {% endcomment %}
+      {% assign min_slides_target = 12 %}
+      {% assign block_size = block.blocks.size | default: 1 %}
+      {% if block_size == 0 %}{% assign block_size = 1 %}{% endif %}
+      
+      {% assign loop_count = min_slides_target | divided_by: block_size | ceil %}
+      {% if loop_count < 2 %}{% assign loop_count = 2 %}{% endif %}
+      {% if loop_count > 10 %}{% assign loop_count = 10 %}{% endif %}
+
+      {% for i in (1..loop_count) %}
+        {% for slide_block in block.blocks %}
+          <div class="swiper-slide">
+            {% render slide_block %}
+          </div>
+        {% endfor %}
+      {% endfor %}
+    </div>
+  </div>
+</div>
+
+  <script>
+    (function() {
+    const initMarquee = () => {
+      const blockContainer = document.querySelector('#zz-marquee-{{ block.id }}');
+      const swiperContainer = blockContainer.querySelector('.zz-marquee-swiper');
+      if (!swiperContainer || swiperContainer.swiper) return;
+
+      const speed = parseInt({{ block.settings.marquee_speed | default: 8000 }});
+      const direction = '{{ block.settings.direction | default: "rtl" }}';
+      const pauseOnHover = {{ block.settings.pause_on_hover | default: true }};
+      const enableGrab = {{ block.settings.enable_grab | default: true }};
+      const videoAutoplay = {{ block.settings.video_autoplay | default: true }};
+
+      const enableAutoplayPc = {{ block.settings.enable_autoplay_pc | json }};
+      const enableAutoplayMobile = {{ block.settings.enable_autoplay_mobile| json }};
+      const isMobile = window.innerWidth < 750;
+      const shouldAutoplay = isMobile ? enableAutoplayMobile : enableAutoplayPc;
+
+      const swiper = new Swiper(swiperContainer, {
+        loop: true,
+        speed: speed,
+        freeMode: true,
+        slidesPerView: 'auto',
+        spaceBetween: 0,
+        centeredSlides: true,
+        allowTouchMove: enableGrab,
+        autoplay: shouldAutoplay ? {
+          delay: 0,
+          disableOnInteraction: false,
+          // pauseOnMouseEnter 在 linear marquee 中可能不够稳定，下面将使用手动监听
+          reverseDirection: direction === 'ltr'
+        } : false,
+        // 关键：确保有足够的 Slide 进行 Loop 计算
+        loopedSlides: 20, 
+        observer: true,
+        observeParents: true,
+      });
+      
+      // 暴力启动，防止某些情况下 linear 不自动开始
+      if (shouldAutoplay) {
+        swiper.autoplay.start();
+      }
+
+      let lastNeedSwiperSpeed = speed;
+
+      const handlePause = () => {
+        try {
+          if (!swiper.autoplay.running) return;
+          const currentTranslate = swiper.getTranslate();
+          const targetTranslate = swiper.translate;
+          const slides = swiper.slides;
+          const activeIndex = swiper.activeIndex;
+          
+          if (slides && slides[activeIndex]) {
+            const currentSlideWidth = slides[activeIndex].offsetWidth;
+            const spaceBetween = swiper.params.spaceBetween || 0;
+            // 计算当前移动比例，从而得出恢复时需要的速度（剩余时间）
+            lastNeedSwiperSpeed = (Math.abs(Math.abs(currentTranslate) - Math.abs(targetTranslate)) / (currentSlideWidth + spaceBetween)) * speed;
+          }
+
+          swiper.setTranslate(currentTranslate);
+          swiper.autoplay.stop();
+        } catch (e) {
+          console.error('Marquee pause error:', e);
+        }
+      };
+
+      const handleResume = () => {
+        try {
+          // 使用计算出的剩余时间滑动到目标位置，然后重启 autoplay
+          swiper.slideTo(swiper.activeIndex, lastNeedSwiperSpeed);
+          setTimeout(() => {
+            if (shouldAutoplay) swiper.autoplay.start();
+          }, 300);
+        } catch (e) {
+          console.error('Marquee resume error:', e);
+        }
+      };
+
+      // 1. 手动处理悬停暂停 (参考 comment-splide / comments-swiper-contral.js 逻辑)
+      if (pauseOnHover && shouldAutoplay) {
+        swiperContainer.addEventListener('mouseenter', handlePause);
+        swiperContainer.addEventListener('mouseleave', handleResume);
+      }
+
+      // 2. 视频控制逻辑
+      const controlVideos = (play) => {
+        if (!videoAutoplay) return;
+        const videos = swiperContainer.querySelectorAll('video');
+        videos.forEach(v => {
+          if (play) {
+            v.play().catch(() => {});
+          } else {
+            v.pause();
+          }
+        });
+      };
+
+      // 3. 性能优化：仅在视口内播放
+      const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            if (shouldAutoplay) swiper.autoplay.start();
+            controlVideos(true);
+          } else {
+            if (shouldAutoplay) swiper.autoplay.stop();
+            controlVideos(false);
+          }
+        });
+      }, { threshold: 0.1 });
+
+      observer.observe(swiperContainer);
+    };
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', initMarquee);
+    } else {
+      initMarquee();
+    }
+  })();
+</script>