zz-shopify-components 0.27.0 → 0.28.1-beta.0

package/blocks/zz-accessories-item.liquid

@@ -56,9 +56,13 @@
   </div>
   <a
     {% if block.settings.btn_id != blank %}data-track-zz-element="{{ block.settings.btn_id }}"{% endif %}
-    class='tw-block {{ btn_class }} tw-mx-auto tw-mt-[30px] tw-px-[28px] lg:tw-px-[12px] tw-w-fit tw-h-[42px] lg:tw-h-[28px] tw-rounded-[3px] tw-cursor-pointer tw-text-white tw-font-medium tw-text-[16px] lg:tw-text-[14px] tw-leading-[42px] lg:tw-leading-[28px] tw-bg-black tw-transition hover:tw-bg-black/80'
+    class='tw-block tw-cursor-pointer {{ btn_class }} tw-mx-auto tw-mt-[30px] tw-px-[28px] lg:tw-px-[12px] tw-w-fit tw-h-[42px] lg:tw-h-[28px] tw-rounded-[3px] tw-cursor-pointer tw-text-white tw-font-medium tw-text-[16px] lg:tw-text-[14px] tw-leading-[42px] lg:tw-leading-[28px] tw-bg-black tw-transition hover:tw-bg-black/80'
     style='background: {{ block.settings.btn_bg_color }}; color: {{ block.settings.btn_text_color }};hover: color: {{ block.settings.btn_hover_color }};'  
-    href='{{ block.settings.url }}'
+    {% if block.settings.function_type == 'link' and block.settings.url != blank %}
+      href="{{ block.settings.url }}"
+      {% else %}
+      href="javascript:void(0);"
+    {% endif %}
   >
     {{ block.settings.btn_text }}
   </a>

package/blocks/zz-price-bundle.liquid

@@ -24,7 +24,7 @@
     %}
     <div class="tw-absolute lg:tw-bottom-[35px] tw-left-[24px] tw-right-[24px] tw-bottom-[16px] lg:tw-left-[30px] lg:tw-right-[30px]">
         <div class="tw-w-full">
-            <p class="tw-font-bold tw-text-[28px] tw-leading-1 tw-text-white">{{ block.settings.heading }}</p>
+            <p class="tw-font-bold tw-text-[16px] lg:tw-text-[24px] tw-leading-1 tw-text-white">{{ block.settings.heading }}</p>
             {% if block.settings.price_type == 'hand' %}
                 <p class='tw-font-bold tw-text-left tw-italic tw-leading-[1.2] tw-text-[28px] lg:tw-text-[40px] tw-text-white'>
                     {{ block.settings.price | times: 100 | money_without_trailing_zeros }}
@@ -52,8 +52,8 @@
                             SAVE {{ discount_value | money_without_trailing_zeros }}
                         </span>
                     {% else %}
-                        <span class='tw-font-bold tw-text-[20px] tw-text-black'>
-                            {{ discount_value | money_without_trailing_zeros }}
+                        <span class='tw-border-white tw-text-white tw-ml-[8px] tw-border-[1px] tw-py-[4px] tw-pr-[6px] tw-pl-[6px] tw-text-[10px] lg:tw-text-[14px] tw-leading-[1.3] tw-border-solid tw-rounded-[4px]'>
+                           SAVE {{ discount_value | money_without_trailing_zeros }}
                         </span>
                     {% endif %}
                 </div>

package/package.json

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

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

@@ -33,6 +33,16 @@
       "label": "可折叠文字颜色",
       "default": "#B2B2B2"
     },
+    {
+      "type": "select",
+      "id": "pc_video_position",
+      "label": "PC端视频位置",
+      "options": [
+        { "value": "left", "label": "Left" },
+        { "value": "right", "label": "Right" },
+      ],
+      "default": "left"
+    },
     {
       "type": "select",
       "id": "mobile_style",
@@ -294,7 +304,7 @@
   </div>
   {% comment %} PC端布局 {% endcomment %}
   <div class="max-lg:tw-hidden tw-w-[90vw] xl:tw-w-[1220px] tw-mx-auto">
-    <div class="collaspse-div yw-w-full tw-flex tw-items-center tw-justify-between">
+    <div class="collaspse-div tw-w-full tw-flex tw-items-center tw-justify-between {% if section.settings.pc_video_position == 'right' %}tw-flex-row-reverse{% endif %}">
       <div class="tw-w-[68%]">
         {% assign swiper_blocks = section.blocks | where: 'type', 'collapsible_row' %}
         {% for collapsible_row in swiper_blocks %}
@@ -305,7 +315,7 @@
                 pc_video: collapsible_row.settings.video_pc,
                 pc_poster: collapsible_row.settings.poster_pc,
                 lazy: true,
-                class: 'tw-w-full tw-h-auto tw-rounded-[16px] ',
+                class: 'tw-w-full tw-h-full tw-rounded-[16px] ',
                 autoplay: true,
                 loop: true,
                 muted: true,
@@ -316,7 +326,7 @@
                 {% render 'zz-img',
                   pc_image: collapsible_row.settings.poster_pc,
                   image_alt: collapsible_row.settings.heading | escape,
-                  class_name: 'ratio-image',
+                  class_name: 'ratio-image tw-w-full tw-h-full',
                 %}
               {% endif %}
             {% endif %}
@@ -360,7 +370,7 @@
               mb_video: collapsible_row.settings.video_mb,
               mb_poster: collapsible_row.settings.poster_mb,
               lazy: true,
-              class: 'image-video-box tw-w-full tw-h-auto ',
+              class: 'image-video-box tw-w-full tw-h-full ',
               autoplay: true,
               loop: true,
               muted: true,
@@ -371,7 +381,7 @@
               render 'zz-img',
               mb_image: collapsible_row.settings.poster_mb,
               image_alt: collapsible_row.settings.heading | escape,
-              class_name: 'image-video-box',
+              class_name: 'image-video-box tw-w-full tw-h-full',
             %}
           {% endif %}
         </div>
@@ -498,6 +508,10 @@
           padding-bottom: 40px;
         {% endif %}
         
+      }
+      #shopify-section-{{section.id}} .media-box {
+        aspect-ratio: 335 / 252;
+        
       }
 
       #shopify-section-{{section.id}} .swiper-button-next,
@@ -587,6 +601,10 @@
         padding-top: {{ section.settings.pc_padding_top }}px;
         padding-bottom: {{ section.settings.pc_padding_bottom }}px;
       }
+      #shopify-section-{{section.id}} .collasps-video-box {
+        aspect-ratio: 16 / 9;
+        
+      }
     }
 </style>
 

package/sections/zz-voc-section.liquid

@@ -132,7 +132,7 @@
 {% endschema %}
 
 <div class='user-spokes-section lg:tw-w-[85.3906vw] xl:tw-w-[1093px] lg:tw-mx-auto'>
-  <div class='max-lg:tw-px-[20px] tw-flex  lg:tw-justify-between max-lg:tw-overflow-x-auto tw-gap-[20px] slow-reveal'>
+  <div class='max-lg:tw-px-[20px] tw-flex  lg:tw-justify-between max-lg:tw-overflow-x-auto tw-gap-[8px] lg:tw-gap-[20px] slow-reveal'>
     {% for block in section.blocks %}
       <div class='comment-box lg:tw-w-[351px] tw-flex tw-flex-col'>
         <div class='comment-item lg:tw-w-[351px] lg:tw-h-[468px]'>

package/snippets/zz-buy-buttom.liquid

@@ -13,7 +13,18 @@
   {% endif %}
 {% endif %}
 
-<button class='tw-flex tw-items-center tw-justify-center tw-text-white tw-border-none tw-h-full tw-px-6 tw-py-4 tw-bg-[#FC6C0F] tw-rounded-full tw-font-semibold tw-text-[16px] {{ button_class }}'>
+{% assign is_available = true %}
+{% if product.selected_or_first_available_variant.available == false %}
+  {% assign is_available = false %}
+{% endif %}
+{% comment %} btn Text  {% endcomment %}
+{% if is_available %}
+  {% assign btn_text = btn %}
+{% else %}
+  {% assign btn_text = btn_out_of_stock | default: 'OUT OF STOCK' %}
+{% endif %}
+
+<button {% unless is_available %}disabled{% endunless %} class='tw-flex tw-items-center tw-justify-center tw-text-white tw-border-none tw-h-full tw-px-6 tw-py-4 tw-bg-[#FC6C0F] tw-rounded-full tw-font-semibold tw-text-[16px] {{ button_class }}'>
   <span
     class='buy-loading  tw-hidden tw-daisy-loading tw-daisy-loading-spinner '
   ></span>
@@ -21,7 +32,7 @@
     {% if is_edu_product %}
       {% if is_logged_in %}
         {% if is_edu_verified %}
-          {{ btn }}
+          {{ btn_text }}
         {% else %}
           {{ bar_btn_edu_not_verified }}
         {% endif %}
@@ -29,7 +40,7 @@
         {{ bar_btn_edu_not_logged_in }}
       {% endif %}
     {% else %}
-      {{ btn }}
+      {{ btn_text }}
     {% endif %}
   </span>
 </button>