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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-shopify-components",
-  "version": "0.28.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/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>