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

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/blocks/zz-bottom-popup.liquid

@@ -170,7 +170,11 @@
         </svg>
       </button>
 
-      <div class="zz-bottom-popup__body zz-overflow-scrollbar-hidden">
+      <div 
+        {% if block.settings.modal_id != blank %}
+        data-track-zz-scroll="{{ block.settings.modal_id }}"
+        {% endif %}
+        class="zz-bottom-popup__body zz-overflow-scrollbar-hidden">
         <div class="zz-bottom-popup__inner" id="{{ modal_id }}-title">
           {% content_for 'blocks' %}
         </div>

package/package.json

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

package/sections/zz-FAQ.liquid

@@ -46,7 +46,7 @@
   {% if section.settings.is_exposure != false %}
     data-track-zz-exposure="true"
   {% endif %} 
-  data-zz-module-name="faq"
+  data-zz-module-name="faq-id"
   class="faq-custom max-lg:tw-px-[20px] lg:tw-mx-auto lg:tw-w-[95.3125vw] xl:tw-w-[1220px] fade-in-box">
   {% render 'content-h2',
     title_color: section.settings.title_color,

package/sections/zz-content-navigation.liquid

@@ -0,0 +1,409 @@
+{% schema %}
+{
+  "name": "页面内容导航",
+  "tag": "section",
+  "class": "zz-content-navigation",
+  "settings": [
+     {
+      "type": "image_picker",
+      "id": "logo",
+      "label": "Logo"
+    },
+    {
+      "type": "text",
+      "id": "aftershow",
+      "label": "在某个模块后显示",
+      "default": "product-buy"
+    },
+    {
+      "type": "color",
+      "id": "bg",
+      "label": "背景颜色",
+      "default": "#000000"
+    },
+    {
+      "type": "select",
+      "id": "text_color",
+      "options": [
+        {
+          "value": "dark",
+          "label": "深色模式"
+        },
+        {
+          "value": "white",
+          "label": "白色模式"
+        }
+      ],
+      "default": "white",
+      "label": "文案颜色模式"
+    },
+  ],
+  "blocks": [
+    {
+      "type": "item",
+      "name": "内容导航项",
+      "settings": [
+        {
+          "type": "text",
+          "id": "title",
+          "label": "标题"
+        },
+        {
+          "type": "text",
+          "id": "module_id",
+          "label": "模块id"
+        }
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "page content navigation"
+    }
+  ]
+}
+{% endschema %}
+<style>
+  #shopify-section-{{ section.id }} {
+    position: sticky;
+    height: 50px;
+    top: 0;
+    z-index: 501;
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(-100%);
+    transition: opacity 0.2s ease, transform 0.2s ease;
+  }
+
+  #shopify-section-{{ section.id }}.content-navigation--visible {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(0);
+  }
+
+  #shopify-section-{{ section.id }} .content-navigation-item--active {
+    opacity: 1;
+  }
+
+  #shopify-section-{{ section.id }} .nav-swiper-shadow {
+    position: relative;
+    overflow: hidden;
+  }
+
+  /* 移动端导航箭头位置 */
+  #shopify-section-{{ section.id }} .nav-swiper-button-prev,
+  #shopify-section-{{ section.id }} .nav-swiper-button-next {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 40;
+    pointer-events: auto;
+  }
+
+  /* 阴影加在左右箭头的伪元素上 */
+  #shopify-section-{{ section.id }} .nav-swiper-button-prev::before,
+  #shopify-section-{{ section.id }} .nav-swiper-button-next::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 40px;
+    pointer-events: none;
+    z-index: -1;
+  }
+
+  /* 左侧渐变阴影，从左箭头往内容方向淡出 */
+  #shopify-section-{{ section.id }} .nav-swiper-button-prev::before {
+    left: -4px;
+    background: linear-gradient(
+      to right,
+      {{ section.settings.bg }} 0%,
+      rgba(0, 0, 0, 0) 70%
+    );
+  }
+
+  /* 右侧渐变阴影，从右箭头往内容方向淡出 */
+  #shopify-section-{{ section.id }} .nav-swiper-button-next::before {
+    right: -4px;
+    background: linear-gradient(
+      to left,
+      {{ section.settings.bg }} 0%,
+      rgba(0, 0, 0, 0) 70%
+    );
+  }
+
+
+  #shopify-section-{{ section.id }} .nav-swiper-button-prev {
+    left: -4px;
+  }
+
+  #shopify-section-{{ section.id }} .nav-swiper-button-next {
+    right: -4px;
+  }
+{% comment %} 
+  #shopify-section-{{ section.id }} {
+    scroll-behavior: auto ;
+  } {% endcomment %}
+</style>
+
+<!-- PC端 -->
+<div
+  data-track-zz-section="page_content_nav"
+  class='content-navigation content-navigation-pc  tw-h-[50px] max-lg:tw-hidden'
+  style='background-color: {{ section.settings.bg }};'
+>
+  <div class=' tw-max-w-[1660px] lg:tw-px-[20px] tw-w-full tw-mx-auto tw-h-full tw-flex tw-items-center tw-justify-between'>
+    <div class='content-navigation-logo'>
+      {% if section.settings.logo != blank %}
+        {{
+          section.settings.logo
+          | image_url: width: 200
+          | image_tag: class: 'tw-w-auto tw-h-[12px]'
+        }}
+      {% endif %}
+    </div>
+    <div class='content-navigation-items tw-flex tw-items-center tw-space-x-[20px]'>
+      {% for block in section.blocks %}
+        <button
+          data-module-id='{{ block.settings.module_id }}'
+          data-track-zz-element='quick_nav_{{ block.settings.module_id | downcase}}'
+          class='content-navigation-item tw-opacity-[0.6] {% if section.settings.text_color == 'white' %} tw-text-white {% else %} tw-text-black {% endif %} tw-text-[14px] tw-font-medium'
+        >
+          {{ block.settings.title }}
+        </button>
+        {%- if forloop.last == false -%}
+          <div class='tw-w-[1px] tw-h-[16px] tw-bg-[#9E9E9E]'>&nbsp;</div>
+        {%- endif -%}
+      {% endfor %}
+    </div>
+  </div>
+</div>
+
+<!-- 移动端 -->
+<div
+  data-track-zz-section="page_content_nav"
+  class='content-navigation content-navigation-mobile  lg:tw-hidden tw-px-[20px]'
+  style='background-color: {{ section.settings.bg }};'
+>
+  <div class='tw-py-[12px]'>
+    {% if section.settings.logo != blank %}
+      {{
+        section.settings.logo
+        | image_url: width: 200
+        | image_tag: class: 'tw-h-[10px] tw-object-contain tw-w-auto'
+      }}
+    {% endif %}
+  </div>
+  <div class='nav-swiper-shadow'>
+    <div class=' swiper'>
+      <div class='swiper-wrapper tw-px-[20px]'>
+        {% for block in section.blocks %}
+          <div class='swiper-slide tw-py-[12px] tw-max-w-[30vw]'> 
+            <button
+              data-module-id='{{ block.settings.module_id }}'
+              data-track-zz-element='quick_nav_{{ block.settings.module_id | downcase }}'
+              class='content-navigation-item tw-opacity-[0.6] tw-w-full tw-text-center {% if section.settings.text_color == 'white' %} tw-text-white {% else %} tw-text-black {% endif %} tw-text-[13px] tw-font-medium'
+            >
+              {{ block.settings.title }}
+            </button>
+          </div>
+        {% endfor %}
+      </div>
+
+      <div class="nav-swiper-button-prev">
+        <svg
+        width='24'
+        height='24'
+        viewBox='0 0 24 24'
+        fill='none'
+        xmlns='http://www.w3.org/2000/svg'
+      >
+        {% if section.settings.text_color == 'white' %}
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M7 12L14.0711 4.92893L14.0608 7.11487L9.17571 12L14.0711 16.8718L14.0711 19.0711L7 12Z" fill="white"/>
+        {% else %}
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M7 12L14.0711 4.92893L14.0608 7.11487L9.17571 12L14.0711 16.8718L14.0711 19.0711L7 12Z" fill="black"/>
+        {% endif %}
+        
+      </svg>
+      </div>
+
+      <div class="nav-swiper-button-next">
+        <svg
+          width='24'
+          height='24'
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+        >
+          {% if section.settings.text_color == 'white' %}
+           <path fill-rule="evenodd" clip-rule="evenodd" d="M17 12L9.92893 4.92893L9.93916 7.11487L14.8243 12L9.92893 16.8718L9.92893 19.0711L17 12Z" fill="white"/> 
+          {% else %}
+           <path fill-rule="evenodd" clip-rule="evenodd" d="M17 12L9.92893 4.92893L9.93916 7.11487L14.8243 12L9.92893 16.8718L9.92893 19.0711L17 12Z" fill="black"/>
+          {% endif %}
+        </svg>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  document.addEventListener('DOMContentLoaded', (event) => {
+    const isDesktop = window.innerWidth > 1024;
+    const currentSection = document.getElementById(
+      'shopify-section-{{ section.id }}'
+    );
+    let exposure = false;
+    // 显示逻辑
+    const afterShowModuleName = '{{ section.settings.aftershow | strip | escape }}';
+    const isDesignMode =
+      typeof Shopify !== 'undefined' && Shopify.designMode === true;
+
+    if (currentSection) {
+      if (!afterShowModuleName || isDesignMode) {
+        currentSection.classList.add('content-navigation--visible');
+      } else {
+        const afterShowTarget = document.querySelector(
+          `[data-zz-module-name="${afterShowModuleName}"]`
+        );
+
+        if (afterShowTarget) {
+          const afterShowObserver = new IntersectionObserver(
+            (entries) => {
+              entries.forEach((entry) => {
+                const shouldShow = entry.boundingClientRect.bottom <= 0;
+                  console.log('shouldShow', shouldShow);
+                  const element = currentSection.querySelector('[data-track-zz-section="page_content_nav"]');
+                  const hpm = window.zzGetElementHpm ? zzGetElementHpm(element, 'section') : null;
+                  if (!exposure && shouldShow && hpm) {
+                    exposure = true; // 只触发一次曝光
+                    window.zzAnalytics && window.zzAnalytics.trackEvent('exposure', {
+                        page_element: {
+                            hpm,
+                        }
+                    });
+                  }
+                  
+                currentSection.classList.toggle(
+                  'content-navigation--visible',
+                  shouldShow
+                );
+              });
+            },
+            {
+              root: null,
+              rootMargin: '0px 0px -200px 0px',
+              threshold: 0,
+            }
+          );
+
+          afterShowObserver.observe(afterShowTarget);
+        } else {
+          currentSection.classList.add('content-navigation--visible');
+        }
+      }
+    }
+
+    
+    const navItems = currentSection.querySelectorAll('.content-navigation-item');
+    const sections = [];
+    let swiper = null;
+    const moduleIdToSlideIndex = {};
+
+    navItems.forEach((item) => {
+      const id = item.getAttribute('data-module-id');
+      if (!id) return;
+
+      const target = document.querySelector(`[data-zz-module-name="${id}"]`);
+      if (!target) return;
+
+      sections.push(target);
+
+      item.addEventListener('click', (e) => {
+        e.preventDefault();
+        const headerHeight = isDesktop ? 64 : 82;
+        const rect = target.getBoundingClientRect();
+        const offsetTop = rect.top + window.pageYOffset - headerHeight;
+
+        window.scrollTo({ top: offsetTop, behavior: 'smooth' })
+      });
+    });
+
+    if (sections.length) {
+      const observerOptions = {
+        root: null,
+        rootMargin: '0px 0px -200px 0px',
+        threshold: 0.1,
+      };
+
+        const observer = new IntersectionObserver((entries) => {
+          entries.forEach((entry) => {
+            if (!entry.isIntersecting) return;
+
+            const id = entry.target.dataset.zzModuleName;
+            navItems.forEach((item) => {
+              const isActive = item.getAttribute('data-module-id') === id;
+              item.classList.toggle('content-navigation-item--active', isActive);
+            });
+
+            if (swiper && moduleIdToSlideIndex[id] != null) {
+              const targetIndex = moduleIdToSlideIndex[id];
+              if (swiper.activeIndex !== targetIndex) {
+                swiper.slideTo(targetIndex);
+              }
+            }
+          });
+        }, observerOptions);
+
+      sections.forEach((sec) => observer.observe(sec));
+    }
+
+    /* 移动端 */
+    const swiperEl = currentSection.querySelector('.swiper');
+    const nextBtn = currentSection.querySelector('.nav-swiper-button-next');
+    const prevBtn = currentSection.querySelector('.nav-swiper-button-prev');
+
+    if (swiperEl) {
+      swiper = new Swiper(swiperEl, {
+        slidesPerView: 3.2,
+        spaceBetween: 12,
+        centeredSlides: false,
+        slidesOffsetAfter: 20,
+        navigation: {
+          nextEl: nextBtn,
+          prevEl: prevBtn,
+        },
+        clickable: true,
+      });
+
+      const slides = swiperEl.querySelectorAll('.swiper-slide');
+      slides.forEach((slide, index) => {
+        const btn = slide.querySelector('[data-module-id]');
+        if (!btn) return;
+        const id = btn.getAttribute('data-module-id');
+        if (!id) return;
+        moduleIdToSlideIndex[id] = index;
+      });
+
+      const updateNavState = () => {
+        const atBeginning = swiper.isBeginning;
+        const atEnd = swiper.isEnd;
+
+        if (prevBtn) {
+          prevBtn.style.display = atBeginning ? 'none' : 'flex';
+        }
+
+        if (nextBtn) {
+          nextBtn.style.display = atEnd ? 'none' : 'flex';
+        }
+      };
+
+      updateNavState();
+      swiper.on('slideChange', updateNavState);
+      swiper.on('resize', updateNavState);
+    }
+  });
+</script>

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

@@ -47,17 +47,25 @@
                     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]',
+                      class: 'product-image tw-w-[128px] lg:tw-w-[168px] xl:tw-w-[200px] tw-object-contain tw-object-center tw-aspect-[200/134]',
                       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>
+                <div class="tw-break-words tw-font-bold tw-leading-[1.5] 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>
+                  <div class="product-image-desc 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 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]">
+                  {%- if section.settings.from_type == 'prefix' -%}
+                    {{ section.settings.price_prefix }}&nbsp;
+                  {%- endif -%}
+                  {{ variant.price | money_without_trailing_zeros }}
+                  {% if section.settings.from_type == 'suffix' %}
+                    &nbsp;{{ section.settings.price_prefix }}
+                  {% endif %}
+                </div>
               </div>
             {%- endfor -%}
           </div>
@@ -78,6 +86,8 @@
                     {%- assign cell_value = spec.settings.x1_promax_value -%}
                   {%- when 'AQUA' -%}
                     {%- assign cell_value = spec.settings.aqua_value -%}
+                  {%- when 'X1 Smart' -%}
+                    {%- assign cell_value = spec.settings.x1_smart_value -%}
                   {%- else -%}
                     {%- assign cell_value = '' -%}
                 {%- endcase -%}
@@ -181,10 +191,10 @@
     var isVisible = false;
     var ticking = false;
 
-    {%- comment -%} Height of the visible content-nagivation bar (mobile vs pc) {%- endcomment -%}
+    {%- comment -%} Height of the visible content-navigation bar (mobile vs pc) {%- endcomment -%}
     function getNavHeight() {
-      var pc = document.querySelector('.content-nagivation-pc');
-      var mobile = document.querySelector('.content-nagivation-mobile');
+      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;
@@ -288,11 +298,27 @@
       "id": "title",
       "label": "Section title",
       "default": "Specs"
+    },
+     {
+      "type": "select",
+      "id": "from_type",
+      "label": "文案颜色模式",
+      "default": "prefix",
+      "options": [
+        {
+          "value": "prefix",
+          "label": "前缀"
+        },
+        {
+          "value": "suffix",
+          "label": "后缀"
+        }
+      ]
     },
     {
       "type": "text",
       "id": "price_prefix",
-      "label": "Price prefix",
+      "label": "Price prefix suffix",
       "default": "from"
     }
   ],
@@ -309,7 +335,8 @@
             { "value": "X1", "label": "X1" },
             { "value": "X1 PRO", "label": "X1 PRO" },
             { "value": "X1 PROMAX", "label": "X1 PROMAX" },
-            { "value": "AQUA", "label": "AQUA" }
+            { "value": "AQUA", "label": "AQUA" },
+            { "value": "X1 Smart", "label": "X1 Smart" }
           ],
           "default": "X1"
         },
@@ -366,6 +393,11 @@
           "type": "textarea",
           "id": "aqua_value",
           "label": "AQUA value"
+        },
+         {
+          "type": "textarea",
+          "id": "x1_smart_value",
+          "label": "X1 Smart value"
         }
       ]
     }

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>