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

package/blocks/zz-scroll-animate-bg-text.liquid

@@ -20,6 +20,13 @@
       "id": "mobile_image",
       "label": "移动端图片"
     },
+    {
+      "type": "checkbox",
+      "id": "is_compatible",
+      "label": "兼容顶部导航栏",
+      "default": false,
+      "info": "防止顶部导航栏遮住标题"
+    },
     {
       "type": "richtext",
       "id": "pc_title",
@@ -140,7 +147,7 @@
       {% render 'zz-img',
         pc_image: block.settings.desktop_image,
         mb_image: block.settings.mobile_image,
-        image_alt: block.settings.alt | escape,
+        image_alt: block.settings.alt,
         class_name: 'tw-w-full tw-h-full tw-object-cover',
       %}
 
@@ -151,7 +158,7 @@
       {% when 'h2' %}
         {% render 'zz-h2', 
           title: block.settings.pc_title, 
-          title_mb: block.settings.mb_title | default: block.settings.pc_title,
+          title_mb: block.settings.mb_title,
           title_color: block.settings.text_color,
 
           class_name: 'scroll-animate-bg-title'
@@ -159,7 +166,7 @@
       {% when 'h3' %}
         {% render 'zz-h3', 
           title: block.settings.pc_title, 
-          title_mb: block.settings.mb_title | default: block.settings.pc_title,
+          title_mb: block.settings.mb_title,
           title_color: block.settings.text_color,
           class_name: 'scroll-animate-bg-title'
         
@@ -167,14 +174,14 @@
       {% when 'h4' %}
           {% render 'zz-h4', 
             title: block.settings.pc_title, 
-            title_mb: block.settings.mb_title | default: block.settings.pc_title,
+            title_mb: block.settings.mb_title,
             title_color: block.settings.text_color,
             class_name: 'scroll-animate-bg-title'
           %}
       {% when 'h5' %}
         {% render 'zz-h5', 
           title: block.settings.pc_title, 
-          title_mb: block.settings.mb_title | default: block.settings.pc_title,
+          title_mb: block.settings.mb_title,
           title_color: block.settings.text_color,
           class_name: 'scroll-animate-bg-title'
         %}
@@ -225,9 +232,12 @@
   
   }
   @media screen and (min-width: 1024px) {
-    #shopify-block-{{ block.id }} {
-      
-    }
+    {% if block.settings.is_compatible == true %}
+      #shopify-block-{{ block.id }} .scroll-block-scroll-animate {
+        padding-top: 50px;
+      }
+    {% endif %}
+   
     #shopify-block-{{ block.id }} .text-overlay {
       position: absolute;
       top: {{ block.settings.pc_top }}%;

package/blocks/zz-swiper-title-in-item.liquid

@@ -39,7 +39,8 @@
 <div class='media-box tw-relative banner-item {{ media_class }}'>
   {% render 'zz-h6',
       title: block.settings.heading,
-      title_color: block.settings.title_color,
+      title_mb: block.settings.heading_mb,
+      title_color: block.settings.text_color,
       class_name: 'media-box-title tw-text-left max-lg:tw-hidden tw-absolute tw-top-[20px] tw-left-[20px] tw-right-[20px]'
     %}
   {% if block.settings.video_pc != blank %}
@@ -65,7 +66,7 @@
       render 'zz-img',
       pc_image: block.settings.poster_pc,
       mb_image: block.settings.poster_mb,
-      image_alt: block.settings.heading | escape,
+      image_alt: block.settings.heading,
       class_name: 'image-video-box',
     %}
   {% endif %}
@@ -75,19 +76,38 @@
 <div class='active-box-content max-lg:tw-mt-[20px]'>
     {% render 'zz-h5',
       title: block.settings.heading,
-      title_color: block.settings.title_color,
+      title_color: block.settings.text_color,
       class_name: 'tw-text-center lg:tw-hidden !tw-text-[16px]'
     %}
-    <div class='tw-mt-[8px] lg:tw-mt-[16px]'>
-      {% render 'zz-content-text',
-        text: block.settings.row_content,
-        mb_text: block.settings.row_content,
-        pc_font_size: 16,
-        mobile_font_size: 12,
-        text_color: block.settings.content_color,
-        class_name: 'max-lg:tw-text-center lg:tw-text-left',
+    {% if block.settings.row_content != blank %}
+      {% assign content_color = block.settings.text_color | color_modify: 'alpha', 0.7 %}
+      <div class='tw-mt-[8px] lg:tw-mt-[16px]'>
+        {% render 'zz-content-text',
+          text: block.settings.row_content,
+          mb_text: block.settings.row_content,
+          pc_font_size: 16,
+          mobile_font_size: 12,
+          text_color: content_color,
+          class_name: 'max-lg:tw-text-center lg:tw-text-left',
+        %}
+      </div>
+    {% endif %}
+    {% if block.settings.row_content_2 != blank %}
+      {% assign content_color_2 = block.settings.text_color 
+        | color_modify: 'alpha', 0.45
       %}
-    </div>
+      <div class='tw-mt-[8px] lg:tw-mt-[16px]'>
+        {% render 'zz-content-text',
+          text: block.settings.row_content_2,
+          mb_text: block.settings.row_content_2,
+          pc_font_size: 14,
+          mobile_font_size: 10,
+          text_color: content_color_2,
+          class_name: 'max-lg:tw-text-center lg:tw-text-left',
+        %}
+      </div>
+    {% endif %}
+    
   </div>
 
 
@@ -123,15 +143,16 @@
       "label": "Poster(Mobile)"
     },
     {
-      "type": "text",
+      "type": "richtext",
       "id": "heading",
       "label": "标题"
     },
     {
       "type": "color",
-      "id": "title_color",
-      "default": "#2D2D2D",
-      "label": "标题颜色"
+      "id": "text_color",
+      "default": "#ffffff",
+      "label": "文本颜色",
+      "info": "标题颜色，文案根据这个颜色， 70%， 45%透明度"
     },
     {
       "type": "richtext",
@@ -139,10 +160,9 @@
       "label": "description"
     },
     {
-      "type": "color",
-      "id": "content_color",
-      "default": "#B2B2B2",
-      "label": "内容颜色"
+      "type": "richtext",
+      "id": "row_content_2",
+      "label": "description2"
     },
     {
       "type": "text",

package/blocks/zz-text.liquid

@@ -39,7 +39,12 @@
       ],
       "default": "400"
     },
-
+    {
+        "type": "checkbox",
+        "id": "italic",
+        "label": "是否斜体 (Italic)",
+        "default": false
+      },
     {
       "type": "header",
       "content": "PC Settings"
@@ -195,6 +200,7 @@
   pc_text_align: block.settings.pc_text_align,
   mobile_text_align: block.settings.mobile_text_align,
   font_weight: block.settings.font_weight,
+  italic: block.settings.italic,
   class_name: block.settings.animation
 %}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-shopify-components",
-  "version": "0.36.1-beta.4",
+  "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-swiper-banner.liquid

@@ -981,7 +981,7 @@
                     </div>
                     <div
                       class='banner-title lg:tw-hidden tw-p-0 {% if banner.settings.banner_type == 'title_description_type' %} tw-font-bold {% endif %} max-lg:tw-leading-[1.2] max-lg:tw-text-center'
-                        style='color: {{ banner.settings.color | default: 'white' }};'
+                      style='color: {{ banner.settings.color | default: 'white' }};'
                     >
                       {{ banner.settings.title_mb }}
                     </div>