zz-shopify-components 0.35.1-beta.2 → 0.35.1-beta.4

package/package.json

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

package/sections/zz-card-strip.liquid

@@ -503,6 +503,7 @@ zz-card-strip section 是一个用于展示多张可展开卡片的横向交互
     #zz-card-strip-{{ section.id }} button.zz-mobile-only {
       width: 124px;
       height: 42px;
+      padding: 0px;
     }
   }
 </style>
@@ -678,6 +679,32 @@ zz-card-strip section 是一个用于展示多张可展开卡片的横向交互
             btn_id: mb_btn_id,
             modal_id: block.settings.modal_id
           %}
+        <script>
+          document.addEventListener('DOMContentLoaded', (event) => {
+            const btn = document.getElementsByClassName('{{ btn_class }}')
+            if(btn && btn[0]) {
+              {% for block in section.blocks %}
+                {% if block.type == 'cta_button' %}
+                  {% if block.settings.click_event_class_name != blank %}
+                    btn[0].addEventListener('click', (event) => {
+                      window.zzAnalytics && window.zzAnalytics.trackEvent("{{ block.settings.click_event_class_name }}", {
+                        timestamp: new Date().toISOString(),
+                      });
+                    });
+                  {% endif %}
+                  {% if block.settings.function_type == 'link_map' %}
+                    if(window.bindSiteJump) {
+                      bindSiteJump(btn[0], {{ block.settings.links | json }})
+                      if (btn[1]) {
+                          bindSiteJump(btn[1], {{ block.settings.links | json }})
+                      }
+                    }
+                  {% endif %}
+                {% endif %}
+              {% endfor %}
+            }
+          })
+        </script>
       {% endif %}
     {% endfor %}
   </div>
@@ -1155,29 +1182,6 @@ zz-card-strip section 是一个用于展示多张可展开卡片的横向交互
   }
 })();
 </script>
-  <script>
-    document.addEventListener('DOMContentLoaded', (event) => {
-      const btn = document.getElementsByClassName('{{ btn_class }}')
-      if(btn && btn[0]) {
-        {% for block in section.blocks %}
-          {% if block.type == 'cta_button' %}
-            {% if block.settings.click_event_class_name != blank %}
-              btn[0].addEventListener('click', (event) => {
-                window.zzAnalytics && window.zzAnalytics.trackEvent("{{ block.settings.click_event_class_name }}", {
-                  timestamp: new Date().toISOString(),
-                });
-              });
-            {% endif %}
-            {% if block.settings.function_type == 'link_map' %}
-              if(window.bindSiteJump) {
-                bindSiteJump(btn[0], {{ block.settings.links | json }})
-              }
-            {% endif %}
-          {% endif %}
-        {% endfor %}
-      }
-    })
-  </script>
 
 {% schema %}
 {

package/snippets/zz-options-selector.liquid

@@ -1,6 +1,8 @@
+{% assign option_type = option_type | default: 'normal' | downcase | strip %}
+
 <div
   class='
-      {% if option_name == 'Color' %}
+      {% if option_type == 'color' %}
     tw-grid tw-grid-cols-2 tw-gap-6
     {% else %}
     tw-space-y-[16px]
@@ -49,14 +51,14 @@
       {% comment %} 产品示例图 {% endcomment %}
       <div
         class='
-          {% if option_name == 'Color' %}
+          {% if option_type == 'color' %}
            tw-flex tw-flex-col tw-space-y-6
            {% else %}
           tw-flex tw-space-x-[24px]
           {% endif %}
         '
       >
-        {% if option_name == 'Color' %}
+        {% if option_type == 'color' %}
           <div
             class=' tw-w-[28px] tw-h-[28px] tw-rounded-full !tw-block {% if option.value != 'Black' %} tw-border-[1.5px] {% endif %}  tw-border-[#d9d9d9]'
             style='background: {{ option_value.name }}'

package/snippets/zz-product-buy-now-select.liquid

@@ -5,6 +5,22 @@
   class=' tw-space-y-[48px]'
 >
   {% for item in product.options_with_values %}
+    {% liquid
+      assign option_type_key = 'option_' | append: item.position | append: '_type'
+      assign option_type = product.metafields.custom[option_type_key].value | default: ''
+
+      if option_type == blank
+        if item.name == 'Version' or item.name contains 'Bundle and save more'
+          assign option_type = 'version'
+        elsif item.name == 'Color'
+          assign option_type = 'color'
+        else
+          assign option_type = 'normal'
+        endif
+      endif
+
+      assign option_type = option_type | downcase | strip
+    %}
     <div>
       <div class='tw-flex tw-flex-col tw-items-start tw-justify-between tw-mb-[18px]'>
         <h2 class='tw-font-medium tw-text-black tw-text-[20px]'>
@@ -12,14 +28,13 @@
         </h2>
       </div>
 
-      {% if item.name == 'Version'
-        or item.name contains 'Bundle and save more'
-      %}
+      {% if option_type == 'version' %}
         <div id='product-version-selector-container'>
           {% render 'zz-version-selector-simple',
             values: item.values,
             position: item.position,
             option_name: item.name,
+            option_type: option_type,
             show_basic: show_basic,
             basic_title: basic_title,
             discount_type: discount_type
@@ -31,11 +46,11 @@
             values: item.values,
             position: item.position,
             option_name: item.name,
-            show_basic: show_basic,
+            option_type: option_type,
+            show_basic: show_basic
           %}
         </div>
       {% endif %}
-      
     </div>
   {% endfor %}
 </product-buy-now-selector>

package/snippets/zz-version-selector-simple.liquid

@@ -1,3 +1,5 @@
+{% assign option_type = option_type | default: 'version' | downcase | strip %}
+
 <div class=' tw-space-y-[16px] ' id='product-version-selector'>
   {%- for value_item in values -%}
     {%- if value_item.variant.metafields.custom.basic == true -%}
@@ -74,9 +76,7 @@
             </h3>
 
             {% comment %} version 产品信息 {% endcomment %}
-            {% if option_name == 'Version'
-              or option_name contains 'Bundle and save more'
-            %}
+            {% if option_type == 'version' %}
               <div class='tw-space-x-2 tw-flex tw-items-center'>
                 <span class='tw-font-medium tw-text-[14px] tw-text-black'>
                   {%- if show_basic and basic_variant.price != blank -%}
@@ -117,11 +117,7 @@
             {% endif %}
           </div>
         </div>
-
-      
       </label>
-      
-    
     </div>
   {% endfor %}
 </div>
@@ -165,4 +161,3 @@
     border-bottom-right-radius: 12px;
   }
 </style>
-