zz-shopify-components 0.35.1-beta.1 → 0.35.1-beta.10

package/assets/zz-components.css

@@ -311,51 +311,52 @@ body.zz-dialog-open {
 .zz-btn.zz-btn-default.zz-btn-black {
   background: transparent;
   color: #2D2D2D;
-  border: 1.5px solid #2D2D2D;
+  border: 1px solid #2D2D2D;
 }
 
 .zz-btn.zz-btn-default.zz-btn-white {
   background: transparent;
   color: #fff;
-  border: 1.5px solid #FFFFFF4D;
+  border: 1px solid #FFFFFF;
+  font-weight: 400;
 }
 
 .zz-btn.zz-btn-default.zz-btn-orange {
   background: transparent;
   color: #FC6C0F;
-  border: 1.5px solid #FC6C0F;
+  border: 1px solid #FC6C0F;
 }
 
 .zz-btn.zz-btn-default.zz-btn-yellow {
   background: transparent;
   color: #000;
-  border: 1.5px solid #FFEB00;
+  border: 1px solid #FFEB00;
 }
 
 .zz-btn.zz-btn-default.zz-btn-blue {
   background: transparent;
   color: #378DDD;
-  border: 1.5px solid #378DDD;
+  border: 1px solid #378DDD;
 }
 
 .zz-btn.zz-btn-round.zz-btn-black {
   background: transparent;
   color: #2D2D2D;
-  border: 1.5px solid #2D2D2D;
+  border: 1px solid #2D2D2D;
   border-radius: 30px;
 }
 
 .zz-btn.zz-btn-round.zz-btn-white {
   background: transparent;
   color: #fff;
-  border: 1.5px solid #FFFFFF4D;
+  border: 1px solid #FFFFFF4D;
   border-radius: 30px;
 }
 
 .zz-btn.zz-btn-round.zz-btn-orange {
   background: transparent;
   color: #ff9900;
-  border: 1.5px solid #ff9900;
+  border: 1px solid #ff9900;
   border-radius: 30px;
 }
 
@@ -408,6 +409,11 @@ body.zz-dialog-open {
   font-size: 14px;
 }
 
+.zz-btn.zz-btn-large.zz-btn-default {
+  padding: 0px 1.6rem;
+
+}
+
 @media (min-width: 1024px) {
   .zz-btn {
     height: 40px;
@@ -434,6 +440,10 @@ body.zz-dialog-open {
   .zz-btn-link.zz-btn-link-large {
     font-size: 16px;
   }
+
+  .zz-btn.zz-btn-large.zz-btn-default {
+    padding: 0px 30px;
+  }
 }
 
 .zz-video-btn.zz-btn.zz-btn-white {
@@ -511,4 +521,7 @@ body.zz-dialog-open {
   height: 0;
   display: none;
   /* Chrome/Safari/Edge */
-}
+}
+.zz-hidden {
+  display: none !important;
+}

package/assets/zz-components.js

@@ -680,3 +680,54 @@ if (!customElements.get('zz-normal-modal')) {
 
   customElements.define('zz-normal-modal', ZZNormalModal);
 }
+
+function updateCountryVisibility(currentCountry, marketWordList) {
+  console.log('updateCountryVisibility', currentCountry);
+  if (!currentCountry) return;
+
+  // currentCountry 当前国家记录的是PHcountry
+  // 查找currentCountry对应的showCountry
+  const selectCountry = marketWordList.find(
+    (item) => item.PHcountry === currentCountry
+  );
+  if (!selectCountry) return;
+  currentCountry = selectCountry.showCountry;
+  const isEuropeCountry = selectCountry.formState === 'Europe';
+
+  // visibleCountries 使用的是marketWordList中country字段
+  currentCountry = currentCountry.toUpperCase();
+
+  document.querySelectorAll('[data-visibility-rule]').forEach((element) => {
+    if (!element.dataset.visibilityCountries) return;
+
+    const rule = element.dataset.visibilityRule;
+    const countries = (element.dataset.visibilityCountries || '')
+      .split(',')
+      .map((item) => item.trim().toUpperCase())
+      .filter(Boolean);
+    const isMatchedCountry =
+      countries.includes(currentCountry) ||
+      (countries.includes('EU') && isEuropeCountry);
+
+    let visible = true;
+
+    switch (rule) {
+      case 'country_only':
+        visible = isMatchedCountry;
+        break;
+
+      case 'country_exclude':
+        visible = !isMatchedCountry;
+        break;
+
+      default:
+        visible = true;
+    }
+
+    if (visible) {
+      element.classList.remove('zz-hidden');
+    } else {
+      element.classList.add('zz-hidden');
+    }
+  });
+}

package/assets/zz-fade-in-content.js

@@ -143,27 +143,27 @@ document.addEventListener('DOMContentLoaded', () => {
       ease: 'power1.out',
     });
   });
-});
 
-// 跟随滚动缓慢显示
-const slowReveal = document.querySelectorAll('.slow-reveal');
-slowReveal.forEach((element) => {
-  // 过滤出不包含 no-fade-in 类名的子元素
-  const children = Array.from(element.children).filter(
-    (child) => !child.classList.contains('no-fade-in')
-  );
-  gsap.from(children, {
-    scrollTrigger: {
-      trigger: element,
-      start: 'top 80%',
-      end: 'top 60%',
-      scrub: 1, // 平滑跟随滚动
-      toggleActions: 'play none none reverse',
-    },
-    opacity: 1,
-    y: 100,
-    duration: 0.4,
-    stagger: 0.1,
-    ease: 'power1.out',
+  // 跟随滚动缓慢显示
+  const slowReveal = document.querySelectorAll('.slow-reveal');
+  slowReveal.forEach((element) => {
+    // 过滤出不包含 no-fade-in 类名的子元素
+    const children = Array.from(element.children).filter(
+      (child) => !child.classList.contains('no-fade-in')
+    );
+    gsap.from(children, {
+      scrollTrigger: {
+        trigger: element,
+        start: 'top 80%',
+        end: 'top 60%',
+        scrub: 1, // 平滑跟随滚动
+        toggleActions: 'play none none reverse',
+      },
+      opacity: 1,
+      y: 100,
+      duration: 0.4,
+      stagger: 0.1,
+      ease: 'power1.out',
+    });
   });
 });

package/blocks/zz-bottom-popup.liquid

@@ -0,0 +1,327 @@
+{% liquid
+  if block.settings.modal_id != blank
+    assign modal_id = block.settings.modal_id
+  else
+    assign modal_id = 'zz-bottom-popup-' | append: block.id
+  endif
+%}
+
+<style>
+  #shopify-block-{{ block.id }} .zz-bottom-popup {
+    display: block;
+    width: 100%;
+  }
+
+  #shopify-block-{{ block.id }} .zz-bottom-popup__modal {
+    display: block;
+  }
+
+  #shopify-block-{{ block.id }} .zz-bottom-popup__overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 888;
+    background: rgba(0, 0, 0, 0.6);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.35s ease;
+  }
+
+  #shopify-block-{{ block.id }} .zz-bottom-popup__overlay.is-open {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  @media screen and (max-width: 1023px) {
+    #shopify-block-{{ block.id }} .zz-bottom-popup__content {
+      height: {{ block.settings.mobile_height }}vh;
+      max-height: {{ block.settings.mobile_height }}vh;
+      padding: {{ block.settings.mobile_padding_top }}px {{ block.settings.mobile_padding_x }}px 0;
+
+    }
+  }
+
+  #shopify-block-{{ block.id }} .zz-bottom-popup__content {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    z-index: 889;
+    display: flex;
+    flex-direction: column;
+    width: 100vw;
+    border-radius: 20px 20px 0 0;
+    background: {{ block.settings.background_color }};
+    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);
+    opacity: 0;
+    overflow: hidden;
+    outline: none;
+    transform: translate3d(0, 100%, 0);
+    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
+    box-sizing: border-box;
+  }
+
+  #shopify-block-{{ block.id }} .zz-bottom-popup__content.is-open {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+
+  #shopify-block-{{ block.id }} .zz-bottom-popup__close {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    z-index: 101;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border: 0;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.12);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    cursor: pointer;
+    overflow: hidden;
+  }
+
+  #shopify-block-{{ block.id }} .zz-bottom-popup__body {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    flex: 1 1 auto;
+    padding-bottom: 34px;
+    overflow-y: auto;
+    {% comment %} scrollbar-width: thin;
+    scrollbar-color: rgba(255, 255, 255, 0.18) transparent; {% endcomment %}
+  }
+
+  #shopify-block-{{ block.id }} .zz-bottom-popup__inner {
+    width: 100%;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    box-sizing: border-box;
+  }
+
+  @media screen and (min-width: 1024px) {
+    #shopify-block-{{ block.id }} .zz-bottom-popup__content {
+      height: {{ block.settings.pc_height }}vh;
+      max-height: {{ block.settings.pc_height }}vh;
+      padding-top: {{ block.settings.pc_padding_top }}px;
+    }
+
+    #shopify-block-{{ block.id }} .zz-bottom-popup__close {
+      top: auto;
+      right: auto;
+      right: 30px;
+      top: 30px;
+      width: 40px;
+      height: 40px;
+    }
+
+    #shopify-block-{{ block.id }} .zz-bottom-popup__body {
+      padding-bottom: 90px;
+    }
+
+    #shopify-block-{{ block.id }} .zz-bottom-popup__inner {
+      {% if block.settings.pc_full_width %}
+        width: 100%;
+      {% else %}
+        width: {{ block.settings.pc_lg_width }}vw;
+      {% endif %}
+    }
+  }
+
+  @media screen and (min-width: 1280px) {
+    #shopify-block-{{ block.id }} .zz-bottom-popup__inner {
+      {% if block.settings.pc_full_width %}
+        width: 100%;
+      {% else %}
+        width: {{ block.settings.pc_xl_width }}px;
+      {% endif %}
+    }
+  }
+</style>
+
+<div class="zz-bottom-popup" {{ block.shopify_attributes }}>
+  <zz-normal-modal id="{{ modal_id }}" class="zz-bottom-popup__modal" aria-hidden="true">
+    <div class="zz-bottom-popup__overlay" data-modal-overlay>&nbsp;</div>
+    <div
+      class="zz-bottom-popup__content"
+      data-modal-content
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="{{ modal_id }}-title"
+      tabindex="-1"
+    >
+      <button
+        class="zz-bottom-popup__close"
+        type="button"
+        data-modal-close
+        aria-label="{{ 'accessibility.close' | t }}"
+      >
+        <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <foreignObject x="-10" y="-10" width="60" height="60"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(5px);clip-path:url(#zz_bottom_popup_blur_{{ block.id }});height:100%;width:100%"></div></foreignObject><circle data-figma-bg-blur-radius="10" cx="20" cy="20" r="20" fill="white" fill-opacity="0.15"/>
+          <path d="M14.1196 25.9395L25.999 14.0601" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+          <path d="M14.1196 14.0605L25.999 25.9399" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+          <defs>
+            <clipPath id="zz_bottom_popup_blur_{{ block.id }}" transform="translate(10 10)"><circle cx="20" cy="20" r="20"/></clipPath>
+          </defs>
+        </svg>
+      </button>
+
+      <div class="zz-bottom-popup__body zz-overflow-scrollbar-hidden">
+        <div class="zz-bottom-popup__inner" id="{{ modal_id }}-title">
+          {% content_for 'blocks' %}
+        </div>
+      </div>
+    </div>
+  </zz-normal-modal>
+</div>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    var blockRoot = document.getElementById('shopify-block-{{ block.id }}');
+
+    if (!blockRoot || blockRoot.dataset.bottomPopupBound === 'true') {
+      return;
+    }
+
+    blockRoot.dataset.bottomPopupBound = 'true';
+
+    var modal = blockRoot.querySelector('zz-normal-modal');
+    var closeButton = blockRoot.querySelector('[data-modal-close]');
+    var overlay = blockRoot.querySelector('[data-modal-overlay]');
+    var modalTarget = '#{{ modal_id }}';
+    var triggers = document.querySelectorAll('[data-zz-modal-target="' + modalTarget + '"]');
+    console.log('triggers----------triggers',triggers);
+    if (!modal) {
+      return;
+    }
+
+    triggers.forEach(function(trigger) {
+      trigger.setAttribute('aria-controls', '{{ modal_id }}');
+
+      trigger.addEventListener('click', function() {
+        if (typeof modal.show === 'function') {
+          modal.show();
+          trigger.setAttribute('aria-expanded', 'true');
+        }
+      });
+    });
+
+    [closeButton, overlay].forEach(function(element) {
+      if (!element) {
+        return;
+      }
+
+      element.addEventListener('click', function() {
+        triggers.forEach(function(trigger) {
+          trigger.setAttribute('aria-expanded', 'false');
+        });
+      });
+    });
+
+    document.addEventListener('keydown', function(event) {
+      if (event.key === 'Escape') {
+        triggers.forEach(function(trigger) {
+          trigger.setAttribute('aria-expanded', 'false');
+        });
+      }
+    });
+  
+  });
+</script>
+
+{% schema %}
+{
+  "name": "ZZ Bottom Popup",
+  "settings": [
+    {
+      "type": "text",
+      "id": "modal_id",
+      "label": "弹窗 id",
+      "info": "用于外部按钮通过 data-zz-modal-target 触发"
+    },
+    {
+      "type": "color_background",
+      "id": "background_color",
+      "label": "背景颜色",
+      "default": "#000000"
+    },
+    {
+      "type": "header",
+      "content": "💻 PC端布局设置"
+    },
+    {
+      "type": "number",
+      "id": "pc_height",
+      "label": "PC端占屏幕高度 (vh)",
+      "default": 88
+    },
+    {
+      "type": "checkbox",
+      "id": "pc_full_width",
+      "label": "是否全屏展示",
+      "default": true
+    },
+    {
+      "type": "number",
+      "id": "pc_xl_width",
+      "label": "XL屏幕内容区域宽度 (px)",
+      "default": 1200,
+      "visible_if": "{{ block.settings.pc_full_width == false }}",
+      "info": "非全屏展示时有效"
+    },
+    {
+      "type": "number",
+      "id": "pc_lg_width",
+      "label": "LG屏幕内容区域宽度 (vw)",
+      "default": 90,
+      "visible_if": "{{ block.settings.pc_full_width == false }}",
+      "info": "非全屏展示时有效"
+    },
+    {
+      "type": "number",
+      "id": "pc_padding_top",
+      "label": "PC端内容顶部内边距",
+      "default": 40,
+      "info": "单位：px"
+    },
+    {
+      "type": "header",
+      "content": "📱 移动端布局设置"
+    },
+    {
+      "type": "number",
+      "id": "mobile_height",
+      "label": "移动端占屏幕高度 (vh)",
+      "default": 80
+    },
+    {
+      "type": "number",
+      "id": "mobile_padding_top",
+      "label": "移动端内容顶部内边距",
+      "default": 40,
+      "info": "单位：px"
+    },
+    {
+      "type": "number",
+      "id": "mobile_padding_x",
+      "label": "移动端左右内边距",
+      "default": 20,
+      "info": "单位：px"
+    }
+  ],
+  "blocks": [
+    {
+      "type": "@theme"
+    }
+  ],
+  "presets": [
+    {
+      "name": "ZZ Bottom Popup"
+    }
+  ]
+}
+{% endschema %}

package/blocks/zz-button-v2.liquid

@@ -1,6 +1,7 @@
 {% schema %}
 {
   "name": "Button v2",
+  "class": "zz-button-v2",
   "settings": [
     {
       "type": "text",
@@ -102,6 +103,18 @@
       ],
       "default": "black",
     },
+    {
+      "type": "color",
+      "id": "custom_background_color",
+      "label": "自定义背景颜色",
+      "info": "按钮颜色有限，颜色自定义"
+    },
+    {
+      "type": "color",
+      "id": "custom_text_color",
+      "label": "自定义文字颜色",
+      "info": "按钮文字颜色有限，颜色自定义"
+    },
     {
       "type": "select",
       "id": "size",
@@ -132,6 +145,16 @@
       ],
       "default": "auto"
     },
+    {
+      "type": "select",
+      "id": "prefix_icon",
+      "label": "前缀图标",
+      "options": [
+        { "value": "none", "label": "不展示" },
+        { "value": "plus", "label": "加号" }
+      ],
+      "default": "none"
+    },
     {
       "type": "select",
       "id": "postfix_icon",
@@ -172,6 +195,11 @@
       "id": "modal_id",
       "label": "按钮触发modal的id",
     },
+    {
+      "type": "text",
+      "id": "custom_class",
+      "label": "自定义类名",
+    },
     {
       "type": "text",
       "id": "click_event_class_name",
@@ -193,6 +221,10 @@
 
 {% assign btn_class = 'zz-button' | append: block.id %}
 
+{% if block.settings.custom_class != blank %}
+  {% assign btn_class = btn_class | append: ' ' | append: block.settings.custom_class %}
+{% endif %}
+
 <style>
 
   {% if block.settings.mobile_width == 'full' %}
@@ -203,6 +235,18 @@
       }
     }
   {% endif %}
+
+  {% if block.settings.custom_background_color != blank %}
+    #shopify-block-{{ block.id }} .{{ btn_class }} {
+      background: {{ block.settings.custom_background_color }} !important;
+    }
+  {% endif %}
+
+  {% if block.settings.custom_text_color != blank %}
+    #shopify-block-{{ block.id }} .{{ btn_class }} {
+      color: {{ block.settings.custom_text_color }} !important;
+    }
+  {% endif %}
 </style>
 
 {% render 'zz-button-v2',
@@ -211,6 +255,7 @@
   color: block.settings.color,
   text: block.settings.text,
   size: block.settings.size,
+  prefix_icon: block.settings.prefix_icon,
   postfix_icon: block.settings.postfix_icon,
   icon_size: block.settings.icon_size,
   icon_left_margin: block.settings.icon_left_margin,

package/blocks/zz-content-description-html.liquid

@@ -102,6 +102,14 @@
       ],
       "default": "left"
     },
+    {
+      "type": "checkbox",
+      "id": "separate_display",
+      "label": "区分显示pc还是mb",
+      "default": false,
+      "info": "区分显示pc还是mb, true时 没有配置PC与mb将不会显示。不会使用PC的配置来配置mb"
+
+    },
     {
       "type": "select",
       "id": "animation",
@@ -182,7 +190,8 @@
     mobile_font_size: block.settings.mobile_font_size,
     pc_text_align: block.settings.pc_text_align,
     mobile_text_align: block.settings.mobile_text_align,
-    class_name: block.settings.animation
+    class_name: block.settings.animation,
+    separate_display: block.settings.separate_display,
 %}
 
 {% if block.settings.use_margin %}

package/blocks/zz-content-description.liquid

@@ -153,6 +153,14 @@
       "default": false,
       "info": "Blod 高亮文字是否加粗"
 
+    },
+    {
+      "type": "checkbox",
+      "id": "separate_display",
+      "label": "区分显示pc还是mb",
+      "default": false,
+      "info": "区分显示pc还是mb, true时 没有配置PC与mb将不会显示。不会使用PC的配置来配置mb"
+
     },
 
     {
@@ -221,6 +229,7 @@
   mobile_text_align: block.settings.mobile_text_align,
   pc_font_line_height: block.settings.pc_font_line_height,
   mobile_font_line_height: block.settings.mobile_font_line_height,
+  separate_display: block.settings.separate_display,
 %}