zz-shopify-components 0.35.1-beta.9 → 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-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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-shopify-components",
-  "version": "0.35.1-beta.9",
+  "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 %}