zz-shopify-components 0.36.1-beta.7 → 0.36.1-beta.9

package/assets/zz-buy-now-product-bar.js

@@ -314,8 +314,22 @@ class BuyNowBottomBar extends HTMLElement {
       // 计算折扣
       const discountEl = this.querySelectorAll('.price-discouter');
       if (discountEl.length > 0) {
-        const percent = total_price.times(100).dividedBy(total_before);
-        const discountPercent = 100 - percent;
+        const discountPercent = total_before
+          .minus(total_price)
+          .times(100)
+          .dividedBy(total_before)
+          .toNumber();
+        const percentRound = this.dataset.percentRound || 'floor';
+        let roundedDiscountPercent = discountPercent;
+
+        if (percentRound === 'round') {
+          roundedDiscountPercent = Math.round(discountPercent);
+        } else if (percentRound === 'ceil') {
+          roundedDiscountPercent = Math.ceil(discountPercent);
+        } else {
+          roundedDiscountPercent = Math.floor(discountPercent);
+        }
+
         const discountValue = total_before.minus(total_price);
 
         discountEl.forEach((el) => {
@@ -323,7 +337,7 @@ class BuyNowBottomBar extends HTMLElement {
             el.classList.remove('tw-hidden');
             el.textContent =
               this.dataset.discountType === 'percent'
-                ? '- ' + Math.round(discountPercent) + '%'
+                ? '- ' + roundedDiscountPercent + '%'
                 : 'Save ' + this.currency + discountValue;
           } else {
             el.classList.add('tw-hidden');

package/package.json

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

package/sections/zz-product-buy-now.liquid

@@ -28,6 +28,17 @@
       ],
       "default": "percent"
     },
+    {
+      "type": "select",
+      "id": "percent_round",
+      "label": "购买区折扣百分比取整方式",
+      "options": [
+        { "value": "floor", "label": "向下取整" },
+        { "value": "round", "label": "四舍五入" },
+        { "value": "ceil", "label": "向上取整" }
+      ],
+      "default": "floor"
+    },
     {
       "type": "select",
       "id": "bar_discount_type",
@@ -38,6 +49,17 @@
       ],
       "default": "percent"
     },
+    {
+      "type": "select",
+      "id": "bar_percent_round",
+      "label": "底部Bar折扣百分比取整方式",
+      "options": [
+        { "value": "floor", "label": "向下取整" },
+        { "value": "round", "label": "四舍五入" },
+        { "value": "ceil", "label": "向上取整" }
+      ],
+      "default": "floor"
+    },
     {
       "type": "header",
       "content": "Main Settings"
@@ -229,6 +251,7 @@
         blocks: section.blocks,
         show_basic: section.settings.show_basic_price,
         discount_type: section.settings.discount_type,
+        percent_round: section.settings.percent_round,
         basic_title: section.settings.basic_title
       %}
     </div>
@@ -250,6 +273,7 @@
   btn_out_of_stock: section.settings.bar_btn_out_of_stock,
   product_title: section.settings.title,
   discount_type: section.settings.bar_discount_type,
+  percent_round: section.settings.bar_percent_round,
 %}
 
 

package/sections/zz-product-subnav.liquid

@@ -49,6 +49,26 @@
           "label": "白色"
         }
       ]
+    },
+    {
+      "type": "checkbox",
+      "id": "show_active_underline",
+      "label": "是否下划线",
+      "default": true,
+      "info": "开启时，选中的 Tab 会显示下划线"
+    },
+    {
+      "type": "checkbox",
+      "id": "show_divider",
+      "label": "是否有中间线",
+      "default": false,
+      "info": "开启时，Tab 之间显示分隔中间线"
+    },
+    {
+      "type": "checkbox",
+      "id": "smooth_scroll",
+      "label": "是否平滑滚动",
+      "default": false,
     }
   ],
   "blocks": [
@@ -87,15 +107,19 @@
 
 {%- assign top_offset = section.settings.top_offset | default: 50 -%}
 {%- assign text_color_mode = section.settings.text_color_mode | default: 'black' -%}
+{%- assign show_active_underline = section.settings.show_active_underline -%}
+{%- assign show_divider = section.settings.show_divider -%}
 {%- if text_color_mode == 'white' -%}
   {%- assign tab_text_color = 'rgba(255,255,255,0.8)' -%}
   {%- assign tab_active_text_color = '#FFFFFF' -%}
+  {%- assign divider_color = 'rgba(255,255,255,0.6)' -%}
 {%- else -%}
   {%- assign tab_text_color = 'rgba(45,45,45,0.8)' -%}
   {%- assign tab_active_text_color = '#2D2D2D' -%}
+  {%- assign divider_color = 'rgba(45,45,45,0.6)' -%}
 {%- endif -%}
 
-<nav class="zz-product-subnav" aria-label="Product sub navigation">
+<nav class="zz-product-subnav{% if show_active_underline %} zz-product-subnav--underline{% endif %}{% if show_divider %} zz-product-subnav--divider{% endif %}" aria-label="Product sub navigation">
   <div class="zz-product-subnav__wrap">
     <div class="zz-product-subnav__track" role="tablist">
       {%- for block in section.blocks -%}
@@ -123,7 +147,7 @@
   #shopify-section-{{ section.id }} {
     position: sticky;
     top: {{ top_offset }}px;
-    z-index: 30;
+    z-index: 501;
   }
 
   #shopify-section-{{ section.id }} .zz-product-subnav {
@@ -178,7 +202,7 @@
     white-space: nowrap;
   }
 
-  #shopify-section-{{ section.id }} .zz-product-subnav__tab.is-active {
+  #shopify-section-{{ section.id }} .zz-product-subnav--underline .zz-product-subnav__tab.is-active {
     border-bottom-color: {{ tab_active_text_color }};
   }
 
@@ -187,6 +211,21 @@
     color: {{ tab_active_text_color }};
   }
 
+  #shopify-section-{{ section.id }} .zz-product-subnav--divider .zz-product-subnav__tab {
+    position: relative;
+  }
+
+  #shopify-section-{{ section.id }} .zz-product-subnav--divider .zz-product-subnav__tab:not(:first-child)::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: -30px;
+    transform: translateY(-50%);
+    width: 1px;
+    height: 13px;
+    background: {{ divider_color }};
+  }
+
   @media (max-width: 1023px) {
     #shopify-section-{{ section.id }} .zz-product-subnav__wrap {
       padding: 0 20px;
@@ -204,7 +243,16 @@
     #shopify-section-{{ section.id }} .zz-product-subnav__tabText {
       font-size: 14px;
     }
+
+    #shopify-section-{{ section.id }} .zz-product-subnav--divider .zz-product-subnav__tab:not(:first-child)::before {
+      left: -12px;
+    }
   }
+  {% if section.settings.smooth_scroll == false %}
+    html {
+      scroll-behavior: auto;
+    }
+  {% endif %}
 </style>
 
 <script>
@@ -270,7 +318,11 @@
       if (!target) return;
       const rect = target.getBoundingClientRect();
       const offsetTop = rect.top + window.scrollY - getScrollOffset();
-      window.scrollTo({ top: offsetTop, behavior: 'smooth' });
+      {% if section.settings.smooth_scroll == false %}
+        window.scrollTo(0, offsetTop);
+      {% else %}
+        window.scrollTo({ top: offsetTop, behavior: 'smooth' });
+      {% endif %}
     }
 
     // Click to scroll
@@ -361,6 +413,10 @@
     }
 
     function tryStartSpyWithWait() {
+      if (window.USER_AGENT && window.USER_AGENT.isApp) {
+        // top 设置成 top_offset-50px
+        sectionEl.style.top = '0px';
+      }
       if (startSpy()) return;
 
       // Targets not in DOM yet: wait for insertion

package/sections/zz-products-specs.liquid

@@ -21,7 +21,7 @@
 >
   <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]">
+      <div class="tw-mb-[3rem] lg:tw-mb-[100px] max-lg:tw-px-[2rem] 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 -%}
@@ -190,15 +190,21 @@
 
     var isVisible = false;
     var ticking = false;
+    var lastNavOffset = -1;
 
-    {%- comment -%} Height of the visible content-navigation bar (mobile vs pc) {%- endcomment -%}
-    function getNavHeight() {
-      var pc = document.querySelector('.content-navigation-pc');
-      var mobile = document.querySelector('.content-navigation-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 -%}
+      Offset of the floating head.
+      没有 content-nagivation--visible 元素时贴顶 0px;
+      存在时取导航条实际高度(PC / 移动端), 取不到则 PC 40px / 移动端 80px。
+    {%- endcomment -%}
+    function getNavOffset() {
+      var visibleNav = document.querySelector('.content-nagivation--visible');
+      if (!visibleNav) { return 0; }
+      var isDesktop = window.innerWidth > 1024;
+      var el = document.querySelector(isDesktop ? '.content-nagivation-pc' : '.content-nagivation-mobile');
+      var h = el ? el.offsetHeight : 0;
+      if (h) { return h; }
+      return isDesktop ? 40 : 80;
     }
 
     {%- comment -%} Match float bar geometry to the scroller (width, left, padding, column sizing) {%- endcomment -%}
@@ -209,7 +215,7 @@
       var padRight = parseFloat(cs.paddingRight) || 0;
 
       floatEl.style.left = scRect.left + 'px';
-      floatEl.style.top = getNavHeight() + 'px';
+      floatEl.style.top = getNavOffset() + 'px';
       floatEl.style.width = scRect.width + 'px';
       floatInner.style.paddingLeft = padLeft + 'px';
       floatInner.style.paddingRight = padRight + 'px';
@@ -240,16 +246,23 @@
 
     function update() {
       ticking = false;
-      var navH = getNavHeight();
+      var navOffset = getNavOffset();
       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;
+      var shouldShow = headRect.bottom <= navOffset && contentRect.bottom > navOffset + floatH;
+
+      {%- comment -%} nav offset changed (navigation shown/hidden or breakpoint switch): re-sync {%- endcomment -%}
+      if (isVisible && navOffset !== lastNavOffset) {
+        lastNavOffset = navOffset;
+        syncLayout();
+      }
 
       if (shouldShow && !isVisible) {
         isVisible = true;
+        lastNavOffset = navOffset;
         syncLayout();
         syncScrollX();
         floatEl.classList.add('is-visible');
@@ -302,7 +315,7 @@
      {
       "type": "select",
       "id": "from_type",
-      "label": "文案颜色模式",
+      "label": "价格前后缀",
       "default": "prefix",
       "options": [
         {
@@ -318,7 +331,7 @@
     {
       "type": "text",
       "id": "price_prefix",
-      "label": "Price prefix suffix",
+      "label": "Price prefix",
       "default": "from"
     }
   ],

package/snippets/zz-buy-now-bottom-bar.liquid

@@ -18,6 +18,7 @@
   data-currency='{{ cart.currency.symbol }}'
   data-btn-text='{{ btn }}'
   data-discount-type='{{ discount_type }}'
+  data-percent-round='{{ percent_round | default: "floor" }}'
   data-btn-out-of-stock-text='{{ btn_out_of_stock }}'
   data-care-guide='{{ care_guide_type }}'
   data-is-edu-product='{{ is_edu_product }}'
@@ -50,7 +51,8 @@
         {% render 'zz-price-discouter',
           before: product.selected_or_first_available_variant.compare_at_price,
           after: product.selected_or_first_available_variant.price,
-          discount_type: discount_type
+          discount_type: discount_type,
+          percent_round: percent_round
         %}
       </div>
       <div class='bar-title-desc max-md:tw-mb-[12px]'>
@@ -98,7 +100,8 @@
           {% render 'zz-price-discouter',
             before: product.selected_or_first_available_variant.compare_at_price,
             after: product.selected_or_first_available_variant.price,
-            discount_type: discount_type
+            discount_type: discount_type,
+            percent_round: percent_round
           %}
         </div>
         {% if has_installment %}

package/snippets/zz-price-discouter.liquid

@@ -1,7 +1,18 @@
+{% comment %}
+  percent_round: floor (default) | round | ceil — 对折扣百分比 (before-after)/before*100 取整
+{% endcomment %}
 {% assign discount_value = before | minus: after %}
 {% assign discount_value = discount_value | money_without_trailing_zeros %}
-{%- assign percent = after | times: 100.0 | divided_by: before | round -%}
-{%- assign percent = 100 | minus: percent -%}
+{% assign percent_round = percent_round | default: 'floor' %}
+{% assign percent = before | minus: after | times: 100.0 | divided_by: before %}
+{% case percent_round %}
+  {% when 'round' %}
+    {% assign percent = percent | round %}
+  {% when 'ceil' %}
+    {% assign percent = percent | ceil %}
+  {% else %}
+    {% assign percent = percent | floor %}
+{% endcase %}
 <span
   class='discount_percentage tw-whitespace-nowrap {% if before == blank or before <= after %} tw-hidden {% endif %} price-discouter lg:tw-px-[8px] tw-px-[4px] tw-inline-flex tw-justify-center tw-leading-[19px] tw-items-center tw-h-[19px] tw-text-[10px] tw-rounded-lg tw-text-white tw-bg-[#FC6C0F]'
 >

package/snippets/zz-product-buy-now-select.liquid

@@ -37,7 +37,8 @@
             option_type: option_type,
             show_basic: show_basic,
             basic_title: basic_title,
-            discount_type: discount_type
+            discount_type: discount_type,
+            percent_round: percent_round
           %}
         </div>
       {% else %}

package/snippets/zz-product-swiper.liquid

@@ -72,13 +72,21 @@
       opacity 0.25s ease,
       transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
   }
-  .product-swiper-container:hover .product-swiper-list-thumbs {
-    opacity: 1;
-    transform: translateY(0) scale(1);
+  /* 触屏上 :hover 会粘滞，会导致滑动后分页点被隐藏，故只对鼠标设备生效 */
+  @media (hover: hover) and (pointer: fine) {
+    .product-swiper-container:hover .product-swiper-list-thumbs {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+    .product-swiper-container:hover .swiper-pagination {
+      display: none;
+      transition: none;
+    }
   }
-  .product-swiper-container:hover .swiper-pagination {
-    display: none;
-    transition: none;
+  @media (hover: none) {
+    .product-swiper-list-thumbs {
+      pointer-events: none;
+    }
   }
 
   .product-swiper-list-thumbs .swiper-slide {

package/snippets/zz-version-detail-dialog.liquid

@@ -94,7 +94,8 @@
               {% render 'zz-price-discouter',
                 before: variant_for_value.compare_at_price,
                 after: variant_for_value.price,
-                discount_type: section.settings.discount_type
+                discount_type: section.settings.discount_type,
+                percent_round: section.settings.percent_round
               %}
             {% endif %}
           </div>

package/snippets/zz-version-selector-simple.liquid

@@ -110,7 +110,8 @@
                   {% render 'zz-price-discouter',
                     before: variant_for_value.compare_at_price,
                     after: variant_for_value.price,
-                    discount_type: discount_type
+                    discount_type: discount_type,
+                    percent_round: percent_round
                   %}
                 {% endif %}
               </div>

package/snippets/zz-version-selector.liquid

@@ -110,7 +110,8 @@
                   {% render 'zz-price-discouter',
                     before: variant_for_value.compare_at_price,
                     after: variant_for_value.price,
-                    discount_type: discount_type
+                    discount_type: discount_type,
+                    percent_round: percent_round
                   %}
                 {% endif %}
               </div>