zz-shopify-components 0.35.1-beta.8 → 0.36.0

package/assets/zz-components.css

@@ -521,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

@@ -19,8 +19,8 @@
   #shopify-block-{{ block.id }} .zz-bottom-popup__overlay {
     position: fixed;
     inset: 0;
-    z-index: 39;
-    background: rgba(0, 0, 0, 0.5);
+    z-index: 888;
+    background: rgba(0, 0, 0, 0.6);
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.35s ease;
@@ -30,18 +30,23 @@
     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: 40;
+    z-index: 889;
     display: flex;
     flex-direction: column;
     width: 100vw;
-    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;
     border-radius: 20px 20px 0 0;
     background: {{ block.settings.background_color }};
     box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);
@@ -64,12 +69,18 @@
     right: 16px;
     z-index: 101;
     display: inline-flex;
+    align-items: center;
+    justify-content: center;
     width: 32px;
     height: 32px;
     padding: 0;
     border: 0;
-    background: transparent;
+    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 {
@@ -79,17 +90,8 @@
     flex: 1 1 auto;
     padding-bottom: 34px;
     overflow-y: auto;
-    scrollbar-width: thin;
-    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
-  }
-
-  #shopify-block-{{ block.id }} .zz-bottom-popup__body::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  #shopify-block-{{ block.id }} .zz-bottom-popup__body::-webkit-scrollbar-thumb {
-    border-radius: 999px;
-    background: rgba(255, 255, 255, 0.18);
+    {% comment %} scrollbar-width: thin;
+    scrollbar-color: rgba(255, 255, 255, 0.18) transparent; {% endcomment %}
   }
 
   #shopify-block-{{ block.id }} .zz-bottom-popup__inner {
@@ -111,11 +113,10 @@
     #shopify-block-{{ block.id }} .zz-bottom-popup__close {
       top: auto;
       right: auto;
-      left: 50%;
-      bottom: 30px;
+      right: 30px;
+      top: 30px;
       width: 40px;
       height: 40px;
-      transform: translateX(-50%);
     }
 
     #shopify-block-{{ block.id }} .zz-bottom-popup__body {
@@ -144,7 +145,7 @@
 
 <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></div>
+    <div class="zz-bottom-popup__overlay" data-modal-overlay>&nbsp;</div>
     <div
       class="zz-bottom-popup__content"
       data-modal-content
@@ -169,7 +170,7 @@
         </svg>
       </button>
 
-      <div class="zz-bottom-popup__body">
+      <div class="zz-bottom-popup__body zz-overflow-scrollbar-hidden">
         <div class="zz-bottom-popup__inner" id="{{ modal_id }}-title">
           {% content_for 'blocks' %}
         </div>
@@ -179,7 +180,7 @@
 </div>
 
 <script>
-  (function() {
+  document.addEventListener('DOMContentLoaded', function() {
     var blockRoot = document.getElementById('shopify-block-{{ block.id }}');
 
     if (!blockRoot || blockRoot.dataset.bottomPopupBound === 'true') {
@@ -193,7 +194,7 @@
     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;
     }
@@ -228,7 +229,8 @@
         });
       }
     });
-  })();
+  
+  });
 </script>
 
 {% schema %}

package/blocks/zz-button-v2.liquid

@@ -195,6 +195,11 @@
       "id": "modal_id",
       "label": "按钮触发modal的id",
     },
+    {
+      "type": "text",
+      "id": "custom_class",
+      "label": "自定义类名",
+    },
     {
       "type": "text",
       "id": "click_event_class_name",
@@ -216,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' %}

package/blocks/zz-flex-layout-block.liquid

@@ -299,9 +299,26 @@
       "default": false,
       "info": "勾选后会对Block模块进行曝光统计埋点, 必须填写唯一业务id"
     },
-
-     
-   
+    {
+      "type": "select",
+      "id": "visibility_rule",
+      "label": "国家显示规则",
+      "options": [
+        { "value": "all", "label": "All" },
+        { "value": "market_only", "label": "Market Only" },
+        { "value": "market_exclude", "label": "Market Exclude" },
+        { "value": "country_only", "label": "Country Only" },
+        { "value": "country_exclude", "label": "Country Exclude" }
+      ],
+      "default": "all",
+      "info": "Market Only仅显示在xx国家或市场/Market Exclude排除xx国家或市场显示"
+    },
+    {
+      "type": "text",
+      "id": "visibility_countries",
+      "label": "国家/Market 列表",
+      "info": "支持国家ISO码与国家选择器中国家配置"
+    }
   ],
   "blocks": [
     {
@@ -683,17 +700,50 @@
     }
   }
 </style>
+{% liquid
+  assign current_iso_code = localization.country.iso_code
+  assign visible = true
+
+  if block.settings.visibility_rule == 'market_only'
+    unless block.settings.visibility_countries contains current_iso_code
+      assign visible = false
+    endunless
+  elsif block.settings.visibility_rule == 'market_exclude'
+    if block.settings.visibility_countries contains current_iso_code
+      assign visible = false
+    endif
+  endif
 
+  if block.settings.visibility_rule == 'country_exclude'
+    if block.settings.visibility_countries contains 'EU'
+      assign eu_countries = "FR,ES,IT,DE"
+      assign eu_countries_array = eu_countries | split: ","
+      if eu_countries_array contains current_iso_code
+        assign visible = false
+      endif
+    endif
+  endif
+%}
+{% if visible %}
 <div 
   {% if block.settings.module_name != blank %}
     data-zz-module-name="{{ block.settings.module_name }}"
   {% endif %}
   {% if block.settings.module_id != blank %}
-      data-track-zz-block="{{ block.settings.module_id }}"
-    {% endif %}
-    {% if block.settings.is_exposure != false %}
-      data-track-zz-exposure="true"
-    {% endif %}
+    id="{{ block.settings.module_id }}"
+    data-track-zz-block="{{ block.settings.module_id }}"
+  {% endif %}
+  
+  {% if block.settings.is_exposure != false %}
+    data-track-zz-exposure="true"
+  {% endif %}
+  {% if block.settings.visibility_rule == 'country_only' or block.settings.visibility_rule == 'country_exclude' %}
+    data-visibility-rule="{{ block.settings.visibility_rule }}"
+  {% endif %}
+  {% if block.settings.visibility_countries != blank %}
+    data-visibility-countries="{{ block.settings.visibility_countries | escape }}"
+  {% endif %}
   class="flex-layout-block-container {{ block.settings.self_animation }} {{ block.settings.child_animation }} {{ block.settings.custom_class }} flex-layout-block-container-{{ block.id }}">
     {% content_for 'blocks' %}
 </div>
+{% endif %}

package/blocks/zz-img-video-text.liquid

@@ -0,0 +1,120 @@
+<div class='media-box tw-relative tw-rounded-[10px] lg:tw-rounded-[16px] '>
+  {% if block.settings.video_pc != blank %}
+    {% if block.settings.video_url_pc != blank %}
+      {% assign pc_video = block.settings.video_url_pc %}
+    {% else %}
+      {% assign pc_video = block.settings.video_pc %}
+    {% endif %}
+    {% render 'zz-video',
+      pc_video: pc_video,
+      pc_poster: block.settings.poster_pc,
+      mb_video: block.settings.video_mb,
+      mb_poster: block.settings.poster_mb,
+      lazy: true,
+      class: 'image-video-box tw-w-full tw-h-auto tw-rounded-[10px] lg:tw-rounded-[16px]',
+      autoplay: true,
+      loop: true,
+      muted: true,
+      module_id: block.settings.block_module_id
+    %}
+  {% else %}
+    {%
+      render 'zz-img',
+      pc_image: block.settings.poster_pc,
+      mb_image: block.settings.poster_mb,
+      image_alt: block.settings.heading | escape,
+      class_name: 'image-video-box tw-rounded-[10px] lg:tw-rounded-[16px]',
+    %}
+  {% endif %}
+</div>
+
+
+<div class='active-box-content max-lg:tw-mt-[2rem] lg:tw-mt-[32px]'>
+    {% render 'zz-h5',
+      title: block.settings.heading,
+      title_color: block.settings.title_color,
+      class_name: 'box-title tw-text-center lg:tw-text-left tw-text-[16px] lg:tw-text-[24px]'
+    %}
+    <div class='active-box-desc tw-mt-[8px] lg:tw-mt-[20px]'>
+      {% 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: 'box-content-text max-lg:tw-text-center lg:tw-text-left tw-text-[12px] lg:tw-text-[16px]',
+      %}
+    </div>
+  </div>
+
+
+{% schema %}
+{
+  "name": "Img Video Text",
+  "class": "zz-img-video-text",
+  "settings": [
+    {
+      "type": "text",
+      "id": "video_url_pc",
+      "label": "Video url PC",
+      "info": "使用cdn视频时，填写视频url。防止大屏幕视频模糊"
+    },
+    {
+      "type": "video",
+      "id": "video_pc",
+      "label": "Video"
+    },
+    {
+      "type": "image_picker",
+      "id": "poster_pc",
+      "label": "Poster"
+    },
+    {
+      "type": "video",
+      "id": "video_mb",
+      "label": "Video(Mobile)"
+    },
+    {
+      "type": "image_picker",
+      "id": "poster_mb",
+      "label": "Poster(Mobile)"
+    },
+    {
+      "type": "text",
+      "id": "heading",
+      "label": "标题"
+    },
+    {
+      "type": "color",
+      "id": "title_color",
+      "default": "#2D2D2D",
+      "label": "标题颜色"
+    },
+    {
+      "type": "richtext",
+      "id": "row_content",
+      "label": "description"
+    },
+    {
+      "type": "color",
+      "id": "content_color",
+      "default": "#B2B2B2",
+      "label": "内容颜色"
+    },
+    {
+      "type": "text",
+      "id": "block_module_id",
+      "label": "唯一业务id",
+      "info": "需要唯一,埋点统计"
+    },
+    
+  ],
+  "presets": [
+    {
+      "name": "Img Video Text",
+    }
+  ]
+}
+{% endschema %}
+
+

package/package.json

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

package/sections/zz-flex-layout-section.liquid

@@ -197,6 +197,26 @@
       "label": "模块名称",
       "info": "用于定位到本模块，可多个section使用同一名称"
     },
+    {
+      "type": "select",
+      "id": "visibility_rule",
+      "label": "国家显示规则",
+      "options": [
+        { "value": "all", "label": "All" },
+        { "value": "market_only", "label": "Market Only" },
+        { "value": "market_exclude", "label": "Market Exclude" },
+        { "value": "country_only", "label": "Country Only" },
+        { "value": "country_exclude", "label": "Country Exclude" }
+      ],
+      "default": "all",
+      "info": "Market Only仅显示在xx国家或市场/Market Exclude排除xx国家或市场显示"
+    },
+    {
+      "type": "text",
+      "id": "visibility_countries",
+      "label": "国家/Market 列表",
+      "info": "支持国家ISO码与国家选择器中国家配置"
+    }
   ],
   "blocks": [
     {
@@ -274,12 +294,43 @@
     }
   }
 </style>
+{% liquid
+  assign current_iso_code = localization.country.iso_code
+  assign visible = true
+
+  if section.settings.visibility_rule == 'market_only'
+    unless section.settings.visibility_countries contains current_iso_code
+      assign visible = false
+    endunless
+  elsif section.settings.visibility_rule == 'market_exclude'
+    if section.settings.visibility_countries contains current_iso_code
+      assign visible = false
+    endif
+  endif
+  
 
+  if section.settings.visibility_rule == 'country_exclude'
+    if section.settings.visibility_countries contains 'EU'
+      assign eu_countries = "FR,ES,IT,DE"
+      assign eu_countries_array = eu_countries | split: ","
+      if eu_countries_array contains current_iso_code
+        assign visible = false
+      endif
+    endif
+  endif
+%}
+{% if visible %}
 <div 
   {% if section.settings.module_id != blank %}
     id="{{ section.settings.module_id }}"
     data-track-zz-section="{{ section.settings.module_id }}"
   {% endif %}
+  {% if section.settings.visibility_rule == 'country_only' or section.settings.visibility_rule == 'country_exclude' %}
+    data-visibility-rule="{{ section.settings.visibility_rule }}"
+  {% endif %}
+  {% if section.settings.visibility_countries != blank %}
+    data-visibility-countries="{{ section.settings.visibility_countries | escape }}"
+  {% endif %}
   {% if section.settings.is_exposure != false%}
     data-track-zz-exposure="true"
   {% endif %}
@@ -287,3 +338,4 @@
   {% if section.settings.module_name != blank %}data-zz-module-name="{{ section.settings.module_name }}"{% endif %}>
     {% content_for 'blocks' %}
 </div>
+{% endif %}

package/sections/zz-video-tab-swiper.liquid

@@ -132,7 +132,7 @@
        height: calc(90vw / 16 * 9);
      }
      #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets {
-       bottom: 135px;
+       bottom: 110px;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
@@ -207,7 +207,7 @@
             title: block.settings.pc_title,
             title_mb: block.settings.mb_title,
             title_color: block.settings.text_color,
-            class_name: 'tab-content-title tw-text-center'
+            class_name: 'tab-content-title tw-text-center max-lg:tw-text-[2.1rem] max-lg:tw-text-left'
           %}
           <style>
             #shopify-section-{{section.id}} .tab-content-title {
@@ -228,7 +228,7 @@
             text: block.settings.pc_text,
             mb_text: block.settings.mb_text,
             text_color: block.settings.text_color,
-            class_name: 'tab-content-text tw-text-center'
+            class_name: 'tab-content-text tw-text-center max-lg:tw-text-left'
           %}
           <style>
             #shopify-section-{{section.id}} .tab-content-text {