zz-shopify-components 0.36.1-beta.0 → 0.36.1-beta.10

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/blocks/zz-count-down.liquid

@@ -42,11 +42,10 @@
     
     align-items: center;
     justify-content: center;
+    background: #FFFFFF33;
     {% if block.settings.theme_color == 'white' %}
-        background: #FFFFFF33;
         color: #FFFFFF;
     {% else %}
-      background: #2D2D2D66;
       color:#2D2D2D;
     {% endif %}
   

package/blocks/zz-email-subscribe.liquid

@@ -0,0 +1,323 @@
+{{ 'component-newsletter.css' | asset_url | stylesheet_tag }}
+
+{%- style -%}
+  #shopify-block-{{ block.id }} {
+    width: 100%;
+  }
+  #shopify-block-{{ block.id }} .subscribe-consent {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    letter-spacing: 0px;
+  }
+  #shopify-block-{{ block.id }} .subscribe-consent .newsletter-form {
+    align-items: flex-start;
+    gap: 20px;
+  }
+  #shopify-block-{{ block.id }} .subscribe-consent .newsletter-form__field-wrapper {
+    max-width: 100%;
+    /* width: {{ block.settings.input_width }}px; */
+  }
+  #shopify-block-{{ block.id }} .subscribe-consent .field {
+    z-index: 0;
+  }
+  #shopify-block-{{ block.id }} .subscribe-consent .field__input {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 10px 52px 10px 16px;
+    background: {{ block.settings.input_color }};
+    border: 1px solid {{ block.settings.input_border_color }};
+    border-radius: 3px;
+    font-size: 12px;
+    height: 36px;
+    color: {{ block.settings.input_text_color }};
+    box-shadow: none;
+    letter-spacing: 0px;
+  }
+  #shopify-block-{{ block.id }} .subscribe-consent input::placeholder {
+    opacity: 1;
+    color: {{ block.settings.placeholder_color }};
+    font-weight: 600;
+  }
+  #shopify-block-{{ block.id }} .subscribe-consent .newsletter-form__button {
+    top: 0;
+    right: 0;
+    width: 42px;
+    height: 36px;
+    padding: 0;
+    border-radius: 3px;
+    background: {{ block.settings.btn_color }};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: opacity 0.2s ease;
+  }
+  #shopify-block-{{ block.id }} .subscribe-consent .newsletter-form__button .icon-email {
+    width: 20px;
+    height: 20px;
+  }
+  #shopify-block-{{ block.id }} .subscribe-consent .field:after,
+  #shopify-block-{{ block.id }} .subscribe-consent .field:before {
+    box-shadow: none;
+    outline: none;
+    border: none;
+  }
+  #shopify-block-{{ block.id }} .subscribe-consent .newsletter-form__message {
+    color: {{ block.settings.input_text_color }};
+  }
+  #shopify-block-{{ block.id }} .subscribe-consent__agree {
+    display: flex;
+    align-items: flex-start;
+    gap: 5px;
+    cursor: pointer;
+    position: relative;
+  }
+  #shopify-block-{{ block.id }} .subscribe-consent__checkbox {
+    appearance: none;
+    -webkit-appearance: none;
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    margin: 0;
+    opacity: 0;
+    cursor: pointer;
+  }
+  #shopify-block-{{ block.id }} .subscribe-consent__icon {
+    display: block;
+    flex: 0 0 auto;
+    width: 16px;
+    height: 16px;
+    position: relative;
+    pointer-events: none;
+  }
+  #shopify-block-{{ block.id }} .subscribe-consent__icon svg {
+    display: block;
+    position: absolute;
+    inset: 0;
+  }
+  #shopify-block-{{ block.id }} .subscribe-consent__icon--on {
+    opacity: 0;
+  }
+  #shopify-block-{{ block.id }} .subscribe-consent__checkbox:checked + .subscribe-consent__icon .subscribe-consent__icon--off {
+    opacity: 0;
+  }
+  #shopify-block-{{ block.id }} .subscribe-consent__checkbox:checked + .subscribe-consent__icon .subscribe-consent__icon--on {
+    opacity: 1;
+  }
+  #shopify-block-{{ block.id }} .subscribe-consent__checkbox:focus-visible + .subscribe-consent__icon {
+    outline: 1px solid {{ block.settings.consent_text_color }};
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
+  #shopify-block-{{ block.id }} .subscribe-consent__text {
+    font-size: 12px;
+    line-height: 1.2;
+    color: {{ block.settings.consent_text_color }};
+    font-weight: 400;
+  }
+  #shopify-block-{{ block.id }} .subscribe-consent__text a {
+    color: inherit;
+    text-decoration: underline;
+  }
+  @media screen and (min-width: 1024px) {
+    #shopify-block-{{ block.id }} .subscribe-consent .field__input {
+      height: 48px;
+      font-size: 14px;
+    }
+    #shopify-block-{{ block.id }} .subscribe-consent .newsletter-form__button {
+      height: 48px;
+    }
+  }
+{%- endstyle -%}
+
+<div
+  class='newsletter subscribe-email subscribe-consent'
+  id='shopify-block-{{ block.id }}'
+  {{ block.shopify_attributes }}
+>
+  {% form 'customer', class: 'newsletter-form' %}
+    <input type='hidden' name='contact[tags]' value='newsletter'>
+    <div
+      class='newsletter-form__field-wrapper'
+      {% if settings.animations_reveal_on_scroll %}
+        data-cascade
+      {% endif %}
+    >
+      <div class='field'>
+        <input
+          id='NewsletterForm--{{ block.id }}'
+          type='email'
+          name='contact[email]'
+          class='field__input'
+          value='{{ form.email }}'
+          aria-required='true'
+          autocorrect='off'
+          autocapitalize='off'
+          autocomplete='email'
+          {% if form.errors %}
+            autofocus
+            aria-invalid='true'
+            aria-describedby='Newsletter-error--{{ block.id }}'
+          {% elsif form.posted_successfully? %}
+            aria-describedby='Newsletter-success--{{ block.id }}'
+          {% endif %}
+          placeholder='{{ block.settings.placeholder }}'
+          required
+        >
+        <button
+          type='submit'
+          class='newsletter-form__button field__button'
+          name='commit'
+          id='Subscribe-{{ block.id }}'
+          aria-label='{{ 'newsletter.button_label' | t }}'
+        >
+          <span class='icon-email' aria-hidden='true'>
+            <svg
+              width='20'
+              height='20'
+              viewBox='0 0 20 20'
+              fill='none'
+              xmlns='http://www.w3.org/2000/svg'
+            >
+              <rect x='2.5' y='4.5' width='15' height='11' rx='1.5' stroke='{{ block.settings.btn_icon_color }}'></rect>
+              <path d='M3 5.5L9.4726 10.799C9.7822 11.0525 10.2278 11.0525 10.5374 10.799L17 5.5' stroke='{{ block.settings.btn_icon_color }}'></path>
+            </svg>
+          </span>
+        </button>
+      </div>
+      {%- if form.errors -%}
+        <small
+          class='newsletter-form__message form__message'
+          id='Newsletter-error--{{ block.id }}'
+        >
+          {%- render 'icon-error' -%}
+          {{- form.errors.translated_fields.email | capitalize }}
+          {{ form.errors.messages.email -}}
+        </small>
+      {%- endif -%}
+    </div>
+
+    <label
+      class='subscribe-consent__agree'
+      for='SubscribeConsent--{{ block.id }}'
+    >
+      <input
+        type='checkbox'
+        id='SubscribeConsent--{{ block.id }}'
+        class='subscribe-consent__checkbox'
+        data-subscribe-consent
+        required
+      >
+      <span class='subscribe-consent__icon' aria-hidden='true'>
+        <svg
+          class='subscribe-consent__icon--off'
+          width='14'
+          height='14'
+          viewBox='0 0 14 14'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+        >
+          <rect x='0.4375' y='0.4375' width='13.125' height='13.125' rx='2.1875' stroke='{{ block.settings.consent_text_color }}' stroke-opacity='0.1' stroke-width='0.875'/>
+        </svg>
+        <svg
+          class='subscribe-consent__icon--on'
+          width='16'
+          height='16'
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+        >
+          <rect x='0.75' y='0.75' width='14.5' height='14.5' rx='2.25' stroke='{{ block.settings.consent_text_color }}' stroke-width='1.5'/>
+          <path d='M4.5 7.65039L7.04152 10.1919L11.567 5.66643' stroke='{{ block.settings.consent_text_color }}' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/>
+        </svg>
+      </span>
+      <span class='subscribe-consent__text'>
+        {{- block.settings.consent_text -}}
+      </span>
+    </label>
+
+    {%- if form.posted_successfully? -%}
+      <h3
+        class='newsletter-form__message newsletter-form__message--success form__message'
+        id='Newsletter-success--{{ block.id }}'
+        tabindex='-1'
+        autofocus
+      >
+        {% render 'icon-success' -%}
+        {{- 'newsletter.success' | t }}
+      </h3>
+    {%- endif -%}
+  {% endform %}
+</div>
+
+{% schema %}
+{
+  "name": "ZZ Email Subscribe",
+  "settings": [
+    {
+      "type": "text",
+      "id": "placeholder",
+      "label": "Placeholder",
+      "default": "Your Email"
+    },
+    {
+      "type": "inline_richtext",
+      "id": "consent_text",
+      "label": "Consent Text",
+      "info": "勾选后才能提交。可插入 Privacy Policy 链接。",
+      "default": "I agree to the <a href=\"/policies/privacy-policy\">Privacy Policy</a> and would like to receive HOVERAir news, product updates, and exclusive offers by email. I can unsubscribe at any time."
+    },
+    {
+      "type": "header",
+      "content": "Colors"
+    },
+    {
+      "type": "color",
+      "id": "input_color",
+      "label": "Input Background",
+      "default": "#FFFFFF0F"
+    },
+    {
+      "type": "color",
+      "id": "input_border_color",
+      "label": "Input Border",
+      "default": "#444444"
+    },
+    {
+      "type": "color",
+      "id": "input_text_color",
+      "label": "Input Text Color",
+      "default": "#000000"
+    },
+    {
+      "type": "color",
+      "id": "placeholder_color",
+      "label": "Placeholder Color",
+      "default": "#00000080"
+    },
+    {
+      "type": "color",
+      "id": "btn_color",
+      "label": "Button Background",
+      "default": "#444444"
+    },
+    {
+      "type": "color",
+      "id": "btn_icon_color",
+      "label": "Button Icon Color",
+      "default": "#FFFFFF"
+    },
+    {
+      "type": "color",
+      "id": "consent_text_color",
+      "label": "Consent Text Color",
+      "default": "#2D2D2D"
+    }
+  ],
+  "presets": [
+    {
+      "name": "ZZ Email Subscribe"
+    }
+  ]
+}
+{% endschema %}

package/blocks/zz-overlay-bg-card.liquid

@@ -0,0 +1,198 @@
+{% comment %}
+  zz-bg-overlay-card 背景图叠加图文链接卡片
+  用于放置在其他 section 内部（如 flex 布局、swiper 等）。
+  - 背景图片 PC / Mobile 区分
+  - 宽度 PC / Mobile 区分（Mobile 使用 rem，1rem = 10px）
+  - 宽高比 PC / Mobile 区分（未设置时使用背景图片自身宽高比）
+  - 标题 / 描述 / link 文本 / link 链接
+  - 文案颜色模式：黑 / 白
+  - link 颜色：黑 / 白 / 蓝
+{% endcomment %}
+
+{% liquid
+  assign s = block.settings
+
+  assign text_color = '#2D2D2D'
+  if s.text_color_mode == 'white'
+    assign text_color = '#FFFFFF'
+  endif
+
+  assign link_color = '#2D2D2D'
+  if s.link_color == 'white'
+    assign link_color = '#FFFFFF'
+  elsif s.link_color == 'blue'
+    assign link_color = '#0066CC'
+  endif
+
+  assign ratio_pc = s.aspect_ratio_pc
+  if ratio_pc == blank and s.image_pc != blank
+    assign ratio_pc = s.image_pc.aspect_ratio
+  endif
+
+  assign ratio_mobile = s.aspect_ratio_mobile
+  if ratio_mobile == blank and s.image_mobile != blank
+    assign ratio_mobile = s.image_mobile.aspect_ratio
+  endif
+%}
+
+<style>
+  /* PC */
+  @media (min-width: 1024px) {
+    #shopify-block-{{ block.id }} {
+      {% if s.width_pc != blank %}width: {{ s.width_pc }}px;{% endif %}
+      {% if ratio_pc != blank %}aspect-ratio: {{ ratio_pc }};{% endif %}
+    }
+  }
+
+  /* Mobile */
+  @media (max-width: 1023px) {
+    #shopify-block-{{ block.id }} {
+      {% if s.width_mobile != blank %}width: {{ s.width_mobile | divided_by: 10.0 }}rem;{% endif %}
+      {% if ratio_mobile != blank %}aspect-ratio: {{ ratio_mobile }};{% endif %}
+    }
+  }
+</style>
+
+{%- capture card_inner -%}
+  {%- if s.image_pc != blank -%}
+    {% render 'zz-img',
+      pc_image: s.image_pc,
+      mb_image: s.image_mobile,
+      pc_width: 1200,
+      mb_width: 800,
+      class_name: 'bg-ov-card__media tw-absolute tw-inset-0 tw-z-0 tw-w-full tw-h-full tw-object-cover tw-object-center',
+    %}
+  {%- endif -%}
+  <div class="bg-ov-card__content tw-relative tw-z-[1] tw-flex tw-flex-col tw-items-start tw-gap-[1rem] tw-pt-[3rem] tw-pr-[2rem] tw-pb-[2rem] tw-pl-[2.7rem]" style="color: {{ text_color }};">
+    {%- if s.title != blank -%}
+      <p class="bg-ov-card__title tw-m-0 tw-text-[1.8rem] lg:tw-text-[21px] tw-font-semibold tw-leading-[1.3] tw-capitalize tw-text-inherit tw-break-words">{{ s.title }}</p>
+    {%- endif -%}
+    {%- if s.description != blank -%}
+      <p class="bg-ov-card__desc tw-m-0 tw-text-[1.4rem] lg:tw-text-[14px] max-lg:tw-font-bold tw-leading-[1.3] tw-text-inherit tw-break-words tw-whitespace-pre-line">{{ s.description }}</p>
+    {%- endif -%}
+    {%- if s.link_text != blank -%}
+      <span class="bg-ov-card__link tw-inline-flex tw-items-center tw-gap-[0.2rem] tw-text-[1.4rem] lg:tw-text-[16px] tw-font-bold tw-leading-[1.5] tw-no-underline" style="color: {{ link_color }};">
+        {{ s.link_text }}
+        <svg class="tw-w-[24px] tw-h-[24px] tw-flex-none" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+          <path d="M11 16.9497L15.9498 12L11 7.05025" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </span>
+    {%- endif -%}
+  </div>
+{%- endcapture -%}
+
+{%- if s.link_url != blank -%}
+  <a class='bg-ov-card tw-relative tw-block tw-w-full tw-h-full tw-no-underline tw-rounded-[1rem] lg:tw-rounded-[16px] tw-overflow-hidden' href='{{ s.link_url }}' {{ block.shopify_attributes }}>
+    {{- card_inner -}}
+  </a>
+{%- else -%}
+  <div class='bg-ov-card tw-relative tw-block tw-w-full tw-h-full tw-rounded-[1rem] lg:tw-rounded-[16px] tw-overflow-hidden' {{ block.shopify_attributes }}>{{ card_inner }}</div>
+{%- endif -%}
+
+{% schema %}
+{
+  "name": "ZZ Overlay Bg Card",
+  "class": "bg-overlay-card-block",
+  "settings": [
+    {
+      "type": "header",
+      "content": "背景图片"
+    },
+    {
+      "type": "image_picker",
+      "id": "image_pc",
+      "label": "PC 背景图片"
+    },
+    {
+      "type": "image_picker",
+      "id": "image_mobile",
+      "label": "移动端背景图片"
+    },
+    {
+      "type": "header",
+      "content": "尺寸"
+    },
+    {
+      "type": "text",
+      "id": "width_pc",
+      "label": "PC 宽度",
+      "info": "支持 px 或 %，如 382px、50%。留空为 100%（跟随父容器）"
+    },
+    {
+      "type": "number",
+      "id": "width_mobile",
+      "label": "移动端宽度（px）",
+      "info": "填写设计稿 px 值，自动换算为 rem（1rem = 10px）。留空为 100%"
+    },
+    {
+      "type": "text",
+      "id": "aspect_ratio_pc",
+      "label": "PC 宽高比",
+      "info": "如 382/502。留空则使用 PC 背景图片的宽高比"
+    },
+    {
+      "type": "text",
+      "id": "aspect_ratio_mobile",
+      "label": "移动端宽高比",
+      "info": "如 382/502。留空则使用移动端背景图片的宽高比"
+    },
+    {
+      "type": "header",
+      "content": "内容"
+    },
+    {
+      "type": "text",
+      "id": "title",
+      "label": "标题",
+      "default": "Education Program"
+    },
+    {
+      "type": "textarea",
+      "id": "description",
+      "label": "描述",
+      "default": "Special pricing for students, educators, and their families."
+    },
+    {
+      "type": "text",
+      "id": "link_text",
+      "label": "link 文本",
+      "default": "Learn More"
+    },
+    {
+      "type": "url",
+      "id": "link_url",
+      "label": "link 链接"
+    },
+    {
+      "type": "header",
+      "content": "颜色"
+    },
+    {
+      "type": "select",
+      "id": "text_color_mode",
+      "label": "文案颜色模式",
+      "options": [
+        { "value": "black", "label": "黑" },
+        { "value": "white", "label": "白" }
+      ],
+      "default": "black"
+    },
+    {
+      "type": "select",
+      "id": "link_color",
+      "label": "link 颜色",
+      "options": [
+        { "value": "black", "label": "黑" },
+        { "value": "white", "label": "白" },
+        { "value": "blue", "label": "蓝" }
+      ],
+      "default": "black"
+    }
+  ],
+  "presets": [
+    {
+      "name": "ZZ Overlay Bg Card"
+    }
+  ]
+}
+{% endschema %}

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 }}%;