zz-shopify-components 0.36.1-beta.5 → 0.36.1-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-shopify-components",
-  "version": "0.36.1-beta.5",
+  "version": "0.36.1-beta.6",
   "description": "Reusable Shopify components for theme projects",
   "keywords": [
     "shopify",

package/sections/zz-products-specs.liquid

@@ -0,0 +1,388 @@
+{%- comment -%}
+  Products Specs comparison table.
+
+  Two block types:
+    - "product": a column header (product select + image + description).
+    - "specs":   a row of spec values, one value per product.
+
+  Product columns render in block order. For each spec row, the value shown
+  under a product is chosen from the spec block's fields according to that
+  product's selected type (X1 / X1 PRO / X1 PROMAX / AQUA).
+{%- endcomment -%}
+
+{%- assign product_blocks = section.blocks | where: 'type', 'product' -%}
+{%- assign spec_blocks = section.blocks | where: 'type', 'specs' -%}
+{%- assign product_block_count = product_blocks.size | at_least: 1 -%}
+{%- assign uid = section.id -%}
+
+<div 
+  id="ProductsSpecs-{{ uid }}" class="tw-box-border"
+  data-zz-module-name="compare-id"
+>
+  <div class="tw-box-border tw-mx-auto tw-max-w-[1220px] lg:tw-py-[80px] max-lg:tw-pt-[48px] max-lg:tw-pb-[30px]">
+    {%- if section.settings.title != blank -%}
+      <div class="tw-mb-[3rem] lg:tw-mb-[100px] tw-text-center tw-font-bold tw-text-[#2d2d2d] tw-leading-[1] tw-text-[2.8rem] lg:tw-text-[40px]">
+        {{ section.settings.title | escape }}
+      </div>
+    {%- endif -%}
+
+    <div class="max-lg:tw-overflow-x-auto tw-px-[20px] lg:tw-px-[40px] tw-py-[30px] lg:tw-py-[60px] tw-rounded-[10px] lg:tw-rounded-[16px] tw-bg-[#fafafa] [-webkit-overflow-scrolling:touch]" data-specs-scroll>
+      <div class="products-specs-content" data-specs-content>
+        {%- comment -%} Header: empty first cell + one column per product {%- endcomment -%}
+        <div class="tw-flex tw-items-stretch lg:tw-pb-[40px]  max-lg:tw-pb-[30px]" data-specs-header>
+          <div class="lg:tw-w-[220px] tw-shrink-0 max-lg:tw-hidden">&nbsp;</div>
+          <div class="tw-flex tw-gap-[20px] lg:tw-gap-[30px] tw-flex-1" data-specs-header-row>
+            {%- for product in product_blocks -%}
+              <div
+                class="value-item tw-box-border tw-flex tw-flex-col tw-items-start tw-gap-[10px] lg:tw-gap-[12px]"
+                data-specs-product-col
+                data-specs-heading="{{ product.settings.heading | escape }}"
+                {{ product.shopify_attributes }}
+              >
+                {% assign product_all = all_products[product.settings.product] %}
+                {% assign variant_id = product.settings.variant_id | times: 1 %}
+                {% assign variant = product_all.variants | where: 'id', variant_id | first %}
+                {%- if product.settings.image != blank -%}
+                  {{
+                    product.settings.image
+                    | image_url: width: 400
+                    | image_tag:
+                      class: 'product-image tw-w-[128px] lg:tw-w-[168px] tw-object-contain tw-object-center tw-aspect-[168/132]',
+                      loading: 'lazy',
+                      alt: product.settings.heading
+                  }}
+                {%- endif -%}
+                <div class="tw-break-words tw-font-bold tw-leading-[1.5] tw-mt-[10px] lg:tw-mt-[18px] tw-text-[#2d2d2d] lg:tw-text-[28px] max-lg:tw-text-[1.8rem]">{{ product.settings.heading | escape }}</div>
+                
+                {%- if product.settings.description != blank -%}
+                  <div class="tw-break-words tw-text-[1.2rem] lg:tw-text-[14px] tw-font-bold tw-leading-[1.5] tw-text-[#2d2d2d]">{{ product.settings.description | escape | newline_to_br }}</div>
+                {%- endif -%}
+                <div class="tw-align-middle tw-text-center tw-text-[1.4rem] lg:tw-text-[20px]  tw-leading-[1.5] tw-tracking-[0px] tw-text-[#2D2D2DCC]">{{ section.settings.price_prefix }} {{ variant.price | money_without_trailing_zeros }}</div>
+              </div>
+            {%- endfor -%}
+          </div>
+        </div>
+
+        {%- comment -%} Spec rows: name cell + value per product (ordered by header) {%- endcomment -%}
+        {%- for spec in spec_blocks -%}
+          <div class="tw-flex tw-items-stretch tw-border-b max-lg:tw-w-fit tw-border-solid tw-border-[rgba(45,45,45,0.1)] tw-py-[15px] lg:tw-py-[30px] max-lg:tw-flex-col max-lg:tw-items-start" {{ spec.shopify_attributes }}>
+            <div class="tw-break-words tw-font-bold tw-leading-[1.5] tw-text-[#2d2d2d] lg:tw-w-[220px] lg:tw-text-[16px] max-lg:tw-w-[14rem] max-lg:tw-mb-[10px] max-lg:tw-shrink-0 max-lg:tw-text-[12px]">{{ spec.settings.heading | escape | newline_to_br }}</div>
+            <div class="tw-flex tw-flex-1 tw-items-center tw-gap-[20px] lg:tw-gap-[30px]">
+              {%- for product in product_blocks -%}
+                {%- case product.settings.heading -%}
+                  {%- when 'X1' -%}
+                    {%- assign cell_value = spec.settings.x1_value -%}
+                  {%- when 'X1 PRO' -%}
+                    {%- assign cell_value = spec.settings.x1_pro_value -%}
+                  {%- when 'X1 PROMAX' -%}
+                    {%- assign cell_value = spec.settings.x1_promax_value -%}
+                  {%- when 'AQUA' -%}
+                    {%- assign cell_value = spec.settings.aqua_value -%}
+                  {%- else -%}
+                    {%- assign cell_value = '' -%}
+                {%- endcase -%}
+                <div class="value-item tw-break-words tw-text-[10px] lg:tw-text-[16px] tw-leading-[1.5] tw-text-[rgba(45,45,45,0.8)]" 
+                  >{{ cell_value | escape | newline_to_br }}</div>
+              {%- endfor -%}
+            </div>
+          </div>
+        {%- endfor -%}
+      </div>
+    </div>
+  </div>
+
+  <div class="specs-floating-head" data-specs-float aria-hidden="true">
+    <div class="specs-floating-head__inner" data-specs-float-inner>
+      <div class="specs-floating-head__spacer max-lg:tw-hidden" data-specs-float-spacer>&nbsp;</div>
+      <div class="specs-floating-head__row" data-specs-float-row>
+        {%- for product in product_blocks -%}
+          <div class="specs-floating-head__cell value-item tw-font-bold tw-leading-[1.5] tw-mt-[10px] lg:tw-mt-[18px] tw-text-[#2d2d2d] lg:tw-text-[28px] max-lg:tw-text-[1.8rem]" data-specs-float-cell>{{ product.settings.heading | escape }}</div>
+        {%- endfor -%}
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  @media screen and (max-width: 1023px) {
+    #shopify-section-{{section.id}} .value-item {
+      width: 14.5rem;
+      flex-shrink: 0;
+    }
+  }
+  @media screen and (min-width: 1023px) {
+    #shopify-section-{{section.id}} .value-item {
+      flex-basis: calc(100% / {{ product_block_count }});
+    }
+  }
+
+  {%- comment -%} Floating heading row: fixed to viewport, hidden by default {%- endcomment -%}
+  #shopify-section-{{ section.id }} .specs-floating-head {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 30;
+    display: none;
+    overflow: hidden;
+    background: #fafafa;
+    box-shadow: 0 4px 12px rgba(45, 45, 45, 0.06);
+    pointer-events: none;
+  }
+  #shopify-section-{{ section.id }} .specs-floating-head.is-visible {
+    display: block;
+  }
+  #shopify-section-{{ section.id }} .specs-floating-head__inner {
+    display: flex;
+    align-items: stretch;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    will-change: transform;
+  }
+  #shopify-section-{{ section.id }} .specs-floating-head__spacer {
+    flex-shrink: 0;
+  }
+  #shopify-section-{{ section.id }} .specs-floating-head__row {
+    display: flex;
+    flex: 1 1 auto;
+    gap: 20px;
+  }
+ 
+  @media screen and (min-width: 1024px) {
+    #shopify-section-{{ section.id }} .specs-floating-head__inner {
+      padding-top: 18px;
+      padding-bottom: 18px;
+    }
+    #shopify-section-{{ section.id }} .specs-floating-head__row {
+      gap: 30px;
+    }
+    
+  }
+</style>
+
+<script>
+  (function () {
+    var root = document.getElementById('ProductsSpecs-{{ uid }}');
+    if (!root || root.dataset.specsFloatBound === 'true') { return; }
+    root.dataset.specsFloatBound = 'true';
+
+    var scroller = root.querySelector('[data-specs-scroll]');
+    var content = root.querySelector('[data-specs-content]');
+    var header = root.querySelector('[data-specs-header]');
+    var headerRow = root.querySelector('[data-specs-header-row]');
+    var floatEl = root.querySelector('[data-specs-float]');
+    var floatInner = root.querySelector('[data-specs-float-inner]');
+    var floatSpacer = root.querySelector('[data-specs-float-spacer]');
+    var floatRow = root.querySelector('[data-specs-float-row]');
+    var srcCols = Array.prototype.slice.call(root.querySelectorAll('[data-specs-product-col]'));
+    var floatCells = Array.prototype.slice.call(root.querySelectorAll('[data-specs-float-cell]'));
+
+    if (!scroller || !content || !header || !headerRow || !floatEl) { return; }
+
+    var isVisible = false;
+    var ticking = false;
+
+    {%- comment -%} Height of the visible content-nagivation bar (mobile vs pc) {%- endcomment -%}
+    function getNavHeight() {
+      var pc = document.querySelector('.content-nagivation-pc');
+      var mobile = document.querySelector('.content-nagivation-mobile');
+      {%- comment -%} the hidden one (wrong breakpoint) reports offsetHeight 0 {%- endcomment -%}
+      var pcH = pc ? pc.offsetHeight : 0;
+      var mobileH = mobile ? mobile.offsetHeight : 0;
+      return Math.max(pcH, mobileH, 0);
+    }
+
+    {%- comment -%} Match float bar geometry to the scroller (width, left, padding, column sizing) {%- endcomment -%}
+    function syncLayout() {
+      var scRect = scroller.getBoundingClientRect();
+      var cs = window.getComputedStyle(scroller);
+      var padLeft = parseFloat(cs.paddingLeft) || 0;
+      var padRight = parseFloat(cs.paddingRight) || 0;
+
+      floatEl.style.left = scRect.left + 'px';
+      floatEl.style.top = getNavHeight() + 'px';
+      floatEl.style.width = scRect.width + 'px';
+      floatInner.style.paddingLeft = padLeft + 'px';
+      floatInner.style.paddingRight = padRight + 'px';
+
+      {%- comment -%} spacer = first empty label cell width (desktop only; hidden on mobile) {%- endcomment -%}
+      var firstEmpty = header.firstElementChild;
+      if (firstEmpty && floatSpacer) {
+        floatSpacer.style.width = firstEmpty.getBoundingClientRect().width + 'px';
+      }
+
+      {%- comment -%} match each float cell width to its source column {%- endcomment -%}
+      for (var i = 0; i < floatCells.length; i++) {
+        var src = srcCols[i];
+        if (!src) { continue; }
+        var w = src.getBoundingClientRect().width;
+        floatCells[i].style.flex = '0 0 ' + w + 'px';
+        floatCells[i].style.width = w + 'px';
+      }
+      {%- comment -%} match the header row gap so cells align 1:1 {%- endcomment -%}
+      var rowCs = window.getComputedStyle(headerRow);
+      floatRow.style.gap = rowCs.columnGap || rowCs.gap || '20px';
+    }
+
+    {%- comment -%} A方案核心: follow horizontal scroll of the table {%- endcomment -%}
+    function syncScrollX() {
+      floatInner.style.transform = 'translateX(' + (-scroller.scrollLeft) + 'px)';
+    }
+
+    function update() {
+      ticking = false;
+      var navH = getNavHeight();
+      var headRect = header.getBoundingClientRect();
+      var contentRect = content.getBoundingClientRect();
+      var floatH = floatEl.offsetHeight || headRect.height;
+
+      {%- comment -%} show once product row scrolls under the nav, hide when content bottom passes {%- endcomment -%}
+      var shouldShow = headRect.bottom <= navH && contentRect.bottom > navH + floatH;
+
+      if (shouldShow && !isVisible) {
+        isVisible = true;
+        syncLayout();
+        syncScrollX();
+        floatEl.classList.add('is-visible');
+        floatEl.setAttribute('aria-hidden', 'false');
+      } else if (!shouldShow && isVisible) {
+        isVisible = false;
+        floatEl.classList.remove('is-visible');
+        floatEl.setAttribute('aria-hidden', 'true');
+      }
+    }
+
+    function onScroll() {
+      if (!ticking) {
+        ticking = true;
+        window.requestAnimationFrame(update);
+      }
+    }
+
+    window.addEventListener('scroll', onScroll, { passive: true });
+    window.addEventListener('resize', function () {
+      if (isVisible) { syncLayout(); syncScrollX(); }
+      onScroll();
+    }, { passive: true });
+    scroller.addEventListener('scroll', function () {
+      if (isVisible) { syncScrollX(); }
+    }, { passive: true });
+
+    {%- comment -%} initial run (defer to allow images/layout to settle) {%- endcomment -%}
+    if (document.readyState === 'complete') {
+      update();
+    } else {
+      window.addEventListener('load', update, { once: true });
+    }
+    update();
+  })();
+</script>
+
+{% schema %}
+{
+  "name": "ZZ Products Specs",
+  "tag": "section",
+  "class": "products-specs-section",
+  "settings": [
+    {
+      "type": "text",
+      "id": "title",
+      "label": "Section title",
+      "default": "Specs"
+    },
+    {
+      "type": "text",
+      "id": "price_prefix",
+      "label": "Price prefix",
+      "default": "from"
+    }
+  ],
+  "blocks": [
+    {
+      "type": "product",
+      "name": "Product",
+      "settings": [
+        {
+          "type": "select",
+          "id": "heading",
+          "label": "Product",
+          "options": [
+            { "value": "X1", "label": "X1" },
+            { "value": "X1 PRO", "label": "X1 PRO" },
+            { "value": "X1 PROMAX", "label": "X1 PROMAX" },
+            { "value": "AQUA", "label": "AQUA" }
+          ],
+          "default": "X1"
+        },
+        {
+          "type": "product",
+          "id": "product",
+          "label": "Product",
+          "info": "选择产品，获取价格"
+        },
+        {
+          "type": "text",
+          "id": "variant_id",
+          "label": "Variant ID",
+          "placeholder": "变体ID",
+          "info": "输入变体ID，变体ID可以在产品编辑页面查看，获取价格"
+        },
+        {
+          "type": "image_picker",
+          "id": "image",
+          "label": "Product image"
+        },
+        {
+          "type": "textarea",
+          "id": "description",
+          "label": "Description"
+        }
+      ]
+    },
+    {
+      "type": "specs",
+      "name": "Spec",
+      "settings": [
+        {
+          "type": "textarea",
+          "id": "heading",
+          "label": "Spec name"
+        },
+        {
+          "type": "textarea",
+          "id": "x1_value",
+          "label": "X1 value"
+        },
+        {
+          "type": "textarea",
+          "id": "x1_pro_value",
+          "label": "X1 PRO value"
+        },
+        {
+          "type": "textarea",
+          "id": "x1_promax_value",
+          "label": "X1 PROMAX value"
+        },
+        {
+          "type": "textarea",
+          "id": "aqua_value",
+          "label": "AQUA value"
+        }
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "ZZ Products Specs",
+      "blocks": [
+        { "type": "product" },
+        { "type": "product" },
+        { "type": "product" },
+        { "type": "product" },
+        { "type": "specs" },
+        { "type": "specs" },
+        { "type": "specs" }
+      ]
+    }
+  ]
+}
+{% endschema %}

package/sections/zz-video-cards.liquid

@@ -0,0 +1,558 @@
+{%- liquid
+  assign video_blocks = section.blocks | where: 'type', 'video'
+  assign uid = section.id
+-%}
+
+<style>
+  #shopify-section-{{ section.id }} {
+    background: {{ section.settings.bg_color }};
+  }
+  .zz-vc-{{ uid }} {
+    padding-top: {{ section.settings.mobile_padding_top }}px;
+    padding-bottom: {{ section.settings.mobile_padding_bottom }}px;
+    overflow: hidden;
+  }
+  .zz-vc-{{ uid }} .zz-vc__title {
+    color: {{ section.settings.title_color }};
+    text-align: center;
+    font-weight: 700;
+    font-size: 28px;
+    line-height: normal;
+    padding: 0 2rem;
+    margin: 0;
+  }
+  .zz-vc-{{ uid }} .zz-vc__head {
+    margin-bottom: 30px;
+  }
+  .zz-vc-{{ uid }} .zz-vc__viewport {
+    position: relative;
+    width: 100%;
+  }
+  .zz-vc-{{ uid }} .zz-vc-swiper {
+    width: 100%;
+    overflow: hidden;
+  }
+  .zz-vc-{{ uid }} .swiper-wrapper {
+    align-items: flex-start;
+  }
+  .zz-vc-{{ uid }} .zz-vc__card {
+    position: relative;
+    overflow: hidden;
+    background: #fff;
+  }
+  .zz-vc-{{ uid }} .zz-vc__media {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+  }
+  .zz-vc-{{ uid }} .zz-vc__media img,
+  .zz-vc-{{ uid }} .zz-vc__media video {
+    width: 100% !important;
+    height: 100% !important;
+    object-fit: cover;
+  }
+  .zz-vc-{{ uid }} .zz-vc__caption {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    padding: 20px;
+    font-weight: 700;
+    font-size: 18px;
+    line-height: normal;
+    word-break: break-word;
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0));
+    pointer-events: none;
+  }
+  .zz-vc-{{ uid }} .zz-vc__nav {
+    display: none;
+  }
+
+  /* ------- Mobile: one card per swipe (offset handled by Swiper) ------- */
+  @media screen and (max-width: 1023.98px) {
+    .zz-vc-{{ uid }} .zz-vc__card {
+      /* 2rem left offset + ~40px peek of the next card on the right */
+      width: 30rem;
+      aspect-ratio: 3 / 4;
+      border-radius: 12px;
+    }
+  }
+
+  /* ------- PC: auto carousel + hover ------- */
+  @media screen and (min-width: 1024px) {
+    .zz-vc-{{ uid }} {
+      padding-top: {{ section.settings.pc_padding_top }}px;
+      padding-bottom: {{ section.settings.pc_padding_bottom }}px;
+    }
+    .zz-vc-{{ uid }} .zz-vc__title {
+      font-size: 40px;
+      padding: 0;
+    }
+    .zz-vc-{{ uid }} .zz-vc__head {
+      margin-bottom: 100px;
+    }
+    .zz-vc-{{ uid }} .zz-vc__card {
+      width: 318px;
+      height: 564px;
+      border-radius: 16px;
+      cursor: pointer;
+    }
+    .zz-vc-{{ uid }} .zz-vc__caption {
+      font-size: 20px;
+    }
+    .zz-vc-{{ uid }} .zz-vc__nav {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 48px;
+      height: 48px;
+      border: none;
+      border-radius: 100px;
+      background: rgba(0, 0, 0, 0.3);
+      backdrop-filter: blur(5px);
+      -webkit-backdrop-filter: blur(5px);
+      cursor: pointer;
+      z-index: 2;
+      transition: opacity 0.3s;
+    }
+    .zz-vc-{{ uid }} .zz-vc__nav svg {
+      width: 24px;
+      height: 24px;
+    }
+    .zz-vc-{{ uid }} .zz-vc__nav.swiper-button-disabled {
+      opacity: 0;
+      pointer-events: none;
+    }
+    .zz-vc-{{ uid }} .zz-vc__prev {
+      left: 68px;
+    }
+    .zz-vc-{{ uid }} .zz-vc__prev svg {
+      transform: scaleX(-1);
+    }
+    .zz-vc-{{ uid }} .zz-vc__next {
+      right: 68px;
+    }
+  }
+</style>
+
+<div
+  class="zz-vc-{{ uid }}"
+  data-zz-video-cards
+  {% if section.settings.module_id != blank %}
+    data-track-zz-section="{{ section.settings.module_id }}"
+    data-zz-module-name="{{ section.settings.module_id }}"
+  {% endif %}
+>
+  {%- if section.settings.heading != blank -%}
+    <div class="zz-vc__head">
+      <h2 class="zz-vc__title">{{ section.settings.heading }}</h2>
+    </div>
+  {%- endif -%}
+
+  <div class="zz-vc__viewport max-lg:tw-pl-[2rem]">
+    <div class="swiper zz-vc-swiper zz-vc-swiper-{{ uid }}">
+      <div class="swiper-wrapper">
+        {%- for round in (1..2) -%}
+          {%- for block in video_blocks -%}
+            <div
+              class="swiper-slide zz-vc__card"
+              data-vc-index="{{ forloop.index0 }}"
+              {% if block.settings.video_pc == blank and block.settings.video_mb == blank %}
+                data-vc-image="true"
+              {% endif %}
+              {% if block.settings.block_module_id != blank %}
+                data-track-zz-element="{{ block.settings.block_module_id }}"
+              {% endif %}
+              {{ block.shopify_attributes }}
+            >
+              <div class="zz-vc__media">
+                {%- if block.settings.video_pc != blank or block.settings.video_mb != blank -%}
+                  {% render 'zz-video',
+                    pc_video: block.settings.video_pc,
+                    pc_poster: block.settings.poster_pc,
+                    mb_video: block.settings.video_mb,
+                    mb_poster: block.settings.poster_mb,
+                    lazy: true,
+                    class: 'tw-w-full tw-h-full tw-object-cover',
+                    autoplay: false,
+                    loop: false,
+                    muted: true,
+                    module_id: block.settings.block_module_id
+                  %}
+                {%- elsif block.settings.poster_pc != blank or block.settings.poster_mb != blank -%}
+                  {% render 'zz-img',
+                    pc_image: block.settings.poster_pc,
+                    mb_image: block.settings.poster_mb,
+                    image_alt: block.settings.heading,
+                    id: block.settings.block_module_id
+                  %}
+                {%- endif -%}
+              </div>
+              {%- if block.settings.heading != blank -%}
+                <div class="zz-vc__caption" style="color: {{ block.settings.title_color }};">
+                  {{ block.settings.heading }}
+                </div>
+              {%- endif -%}
+            </div>
+          {%- endfor -%}
+        {%- endfor -%}
+      </div>
+    </div>
+
+    <button type="button" class="zz-vc__nav zz-vc__prev zz-vc__prev-{{ uid }}" aria-label="Previous">
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M9 6l6 6-6 6" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    </button>
+    <button type="button" class="zz-vc__nav zz-vc__next zz-vc__next-{{ uid }}" aria-label="Next">
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M9 6l6 6-6 6" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    </button>
+  </div>
+</div>
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    var root = document.querySelector('#shopify-section-{{ section.id }} [data-zz-video-cards]');
+    if (!root) return;
+    var swiperEl = root.querySelector('.zz-vc-swiper-{{ uid }}');
+    var slides = Array.prototype.slice.call(root.querySelectorAll('.zz-vc__card'));
+    if (!swiperEl || !slides.length || typeof Swiper === 'undefined') return;
+
+    var IMAGE_DURATION = 10000;
+    var mq = window.matchMedia('(min-width: 1024px)');
+    var swiper = null;
+    var hovering = false;
+    var visible = false;
+    var imageTimer = null;
+    var armed = { video: null, fn: null };
+
+    function isDesktop() { return mq.matches; }
+
+    // zz-video renders up to two <video> tags:
+    //   - PC video   carries `max-lg:tw-hidden` (hidden below 1024px)
+    //   - Mobile video carries `lg:tw-hidden`    (hidden at/above 1024px)
+    // A single-video config has no hiding class. Match the one for the current
+    // breakpoint explicitly; never fall back to the wrong (hidden) one.
+    function cardVideo(card) {
+      var videos = card.querySelectorAll('video');
+      
+      if (!videos.length) return null;
+      var pcVideo = null;
+      var mbVideo = null;
+      var plain = null;
+      for (var i = 0; i < videos.length; i++) {
+        var v = videos[i];
+        if (v.classList.contains('max-lg:tw-hidden')) pcVideo = v;
+        else if (v.classList.contains('lg:tw-hidden')) mbVideo = v;
+        else plain = v; // single-video config (no breakpoint class)
+      }
+      
+      if (isDesktop()) return pcVideo || plain || null;
+      return mbVideo || plain || null;
+    }
+
+    // Lazy <video> ships its url in <source data-src>; set it before first play.
+    function hydrate(video) {
+      if (!video || video.dataset.vcHydrated) return;
+      video.dataset.vcHydrated = '1';
+      Array.prototype.forEach.call(video.querySelectorAll('source'), function (s) {
+        if (!s.getAttribute('src') && s.dataset.src) s.setAttribute('src', s.dataset.src);
+      });
+      try { video.load(); } catch (e) {}
+    }
+
+    function clearImageTimer() {
+      if (imageTimer) { clearTimeout(imageTimer); imageTimer = null; }
+    }
+
+    function disarm() {
+      if (armed.video && armed.fn) armed.video.removeEventListener('ended', armed.fn);
+      armed.video = null;
+      armed.fn = null;
+    }
+
+    // Query videos live from the DOM so loop-mode clones are included too.
+    function pauseAllExcept(except) {
+      var videos = swiperEl.querySelectorAll('video');
+      Array.prototype.forEach.call(videos, function (v) {
+        if (v !== except) { try { v.pause(); } catch (e) {} }
+      });
+    }
+
+    // Advance one card; loop mode wraps back to the start automatically.
+    function goNext() {
+      if (!swiper) return;
+      swiper.slideNext();
+    }
+
+    // The live active slide (may be a loop-mode clone, so read it from Swiper's DOM).
+    function activeCard() {
+      if (!swiper) return null;
+      return swiper.slides[swiper.activeIndex] || null;
+    }
+
+    // Play the currently active card, then auto-advance when its media finishes.
+    function playActive() {
+      if (!swiper) return; // slideChange can fire during Swiper init
+      clearImageTimer();
+      disarm();
+      if (!visible) return; // section off screen -> don't start playback
+      if (hovering) return; // hover has taken over playback
+      var card = activeCard();
+      if (!card) return;
+      pauseAllExcept(null);
+
+      var video = cardVideo(card);
+      if (!video || card.dataset.vcImage === 'true') {
+        // image-only card -> hold 10s, then next
+        imageTimer = setTimeout(goNext, IMAGE_DURATION);
+        return;
+      }
+      hydrate(video);
+      video.loop = false;
+      video.muted = true;
+      try { video.currentTime = 0; } catch (e) {}
+      var p = video.play();
+      if (p && p.catch) p.catch(function () {});
+
+      var onEnded = function () {
+        disarm();
+        if (hovering) return;
+        goNext();
+      };
+      armed.video = video;
+      armed.fn = onEnded;
+      video.addEventListener('ended', onEnded);
+    }
+
+    /* -------- PC hover: play hovered card on repeat, pause the auto one -------- */
+    function onEnter(card) {
+      if (!isDesktop()) return;
+      hovering = true;
+      clearImageTimer();
+      disarm();
+      var video = cardVideo(card);
+      pauseAllExcept(video);
+      if (!video) return; // hovered an image card
+      hydrate(video);
+      video.muted = true;
+      video.loop = true; // keep replaying while hovered
+      var p = video.play();
+      if (p && p.catch) p.catch(function () {});
+    }
+
+    function onLeave(card) {
+      if (!isDesktop()) return;
+      hovering = false;
+      var video = cardVideo(card);
+      if (video) video.loop = false;
+      playActive(); // resume the auto loop from the active card
+    }
+
+    // Delegate hover so loop-mode clones react too.
+    swiperEl.addEventListener('mouseenter', function (e) {
+      var card = e.target.closest('.zz-vc__card');
+      if (card && swiperEl.contains(card)) onEnter(card);
+    }, true);
+    swiperEl.addEventListener('mouseleave', function (e) {
+      var card = e.target.closest('.zz-vc__card');
+      if (card && swiperEl.contains(card)) onLeave(card);
+    }, true);
+
+    /* -------- Swiper setup -------- */
+    function offsetBefore() {
+      if (!isDesktop()) return 0; // mobile: 2rem
+      var w = window.innerWidth;
+      if (w >= 1280) return Math.max(0, (w - 1200) / 2);
+      return w * 0.10; // 1024-1280: 10vw
+    }
+
+    swiper = new Swiper(swiperEl, {
+      slidesPerView: 'auto',
+      spaceBetween: isDesktop() ? 20 : 12,
+      slidesOffsetBefore: offsetBefore(),
+      slidesOffsetAfter: 40,
+      longSwipes: false, // one card per swipe gesture
+      watchOverflow: true,
+      loop: true,
+      navigation: {
+        nextEl: '.zz-vc__next-{{ uid }}',
+        prevEl: '.zz-vc__prev-{{ uid }}'
+      },
+      on: {
+        slideChange: function (sw) {
+          playActive();
+          updatePrevVisibility(sw);
+        }
+      }
+    });
+
+    // Hide the left arrow on the first card: the blank space to its left is the
+    // section's aligned margin, so there is nothing to navigate "back" to.
+    function updatePrevVisibility(sw) {
+      sw = sw || swiper;
+      if (!sw) return;
+      var prev = root.querySelector('.zz-vc__prev-{{ uid }}');
+      if (!prev) return;
+      if (sw.realIndex === 0) prev.classList.add('swiper-button-disabled');
+      else prev.classList.remove('swiper-button-disabled');
+    }
+    updatePrevVisibility(swiper);
+
+    /* -------- Drive playback by section visibility -------- */
+    // Play/loop only while the section is on screen; pause everything when it
+    // scrolls away so we don't decode video or advance slides in the background.
+    function stopPlayback() {
+      clearImageTimer();
+      disarm();
+      pauseAllExcept(null);
+    }
+    var vis = new IntersectionObserver(function (entries) {
+      entries.forEach(function (entry) {
+        if (entry.isIntersecting && !visible) {
+          visible = true;
+          if (!hovering) playActive();
+        } else if (!entry.isIntersecting && visible) {
+          visible = false;
+          stopPlayback();
+        }
+      });
+    }, { threshold: 0.2 });
+    vis.observe(root);
+
+    /* -------- Keep offset / spacing correct across breakpoints -------- */
+    var resizeRAF = null;
+    window.addEventListener('resize', function () {
+      if (resizeRAF) cancelAnimationFrame(resizeRAF);
+      resizeRAF = requestAnimationFrame(function () {
+        if (!swiper) return;
+        swiper.params.spaceBetween = isDesktop() ? 20 : 12;
+        swiper.params.slidesOffsetBefore = offsetBefore();
+        swiper.update();
+      });
+    });
+  });
+</script>
+
+{% schema %}
+{
+  "name": "ZZ Video Cards",
+  "class": "zz-video-cards-section",
+  "settings": [
+    {
+      "type": "text",
+      "id": "heading",
+      "label": "标题"
+    },
+    {
+      "type": "color",
+      "id": "title_color",
+      "default": "#2D2D2D",
+      "label": "标题颜色"
+    },
+    {
+      "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": 48
+    },
+    {
+      "type": "number",
+      "id": "mobile_padding_bottom",
+      "label": "移动下内边距 (Padding Bottom)",
+      "default": 48
+    },
+    {
+      "type": "header",
+      "content": "统计相关"
+    },
+    {
+      "type": "text",
+      "id": "module_id",
+      "label": "唯一业务id",
+      "info": "需要唯一,埋点统计"
+    }
+  ],
+  "blocks": [
+    {
+      "type": "video",
+      "name": "Video",
+      "settings": [
+        {
+          "type": "video",
+          "id": "video_pc",
+          "label": "Video"
+        },
+        {
+          "type": "image_picker",
+          "id": "poster_pc",
+          "label": "Poster"
+        },
+        {
+          "type": "video",
+          "id": "video_mb",
+          "label": "Video(Mobile)"
+        },
+        {
+          "type": "image_picker",
+          "id": "poster_mb",
+          "label": "Poster(Mobile)"
+        },
+        {
+          "type": "text",
+          "id": "heading",
+          "label": "标题"
+        },
+        {
+          "type": "color",
+          "id": "title_color",
+          "default": "#FFFFFF",
+          "label": "标题颜色"
+        },
+        {
+          "type": "text",
+          "id": "block_module_id",
+          "label": "唯一业务id",
+          "info": "需要唯一,埋点统计"
+        }
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "ZZ Video Cards",
+      "blocks": [
+        { "type": "video" },
+        { "type": "video" },
+        { "type": "video" },
+        { "type": "video" }
+      ]
+    }
+  ]
+}
+{% endschema %}