zz-shopify-components 0.36.1-beta.1 → 0.36.1-beta.2

package/package.json

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

package/sections/zz-swiper-banner.liquid

@@ -20,12 +20,21 @@
   
 
   @media (min-width: 1024px) {
+    #shopify-section-{{section.id}} .center-content {
+      {% if section.settings.site == 'central' %}
+        width: 85vw;
+      {% else %}
+        width: 100%;
+        padding-left: var(--center-content-padding, 100px);
+        padding-right: var(--center-content-padding, 100px);
+      {% endif %}
+    }
     #shopify-section-{{section.id}} .swiper-banner-video-img .swiper-wrapper {
       width: 100%;
       {% if section.settings.site == 'central' %}
       height: 100vh;
       {% else %}
-      height: 600px !important;
+      height: 560px !important;
       {% endif %}
     }
     #shopify-section-{{section.id}} .swiper-banner-video-img .swiper-pagination-bullet {
@@ -124,9 +133,18 @@
     }
     
   }
+  @media (min-width: 1280px) {
+    #shopify-section-{{section.id}} .swiper-banner-video-img .swiper-wrapper {
+      {% if section.settings.site != 'central' %}
+      height: 600px !important;
+      {% endif %}
+    }
+  }
   @media (min-width: 1340px) {
     #shopify-section-{{section.id}} .center-content {
-      width: 1220px;
+      {% if section.settings.site == 'central' %}
+        width: 1220px;
+      {% endif %}
     }
     #shopify-section-{{section.id}} .swiper-banner-video-img .swiper-pagination-bullet {
       width: 200px;
@@ -488,7 +506,7 @@
           "type": "text",
           "id": "btn_text",
           "label": "按钮一文字",
-          "default": "Learn more",
+          "default": "Learn More",
           "visible_if": "{{ block.settings.btn_type == 'one' or block.settings.btn_type == 'two' }}"
         },
         {
@@ -540,7 +558,7 @@
           "type": "text",
           "id": "btn_text_two",
           "label": "按钮二文字",
-          "default": "Learn more",
+          "default": "Buy Now",
           "visible_if": "{{ block.settings.btn_type == 'two' }}"
         },
         {
@@ -763,7 +781,7 @@
           "type": "text",
           "id": "btn_text",
           "label": "按钮一文字",
-          "default": "Learn more",
+          "default": "Learn More",
           "visible_if": "{{ block.settings.btn_type == 'one' or block.settings.btn_type == 'two' }}"
         },
         {
@@ -815,7 +833,7 @@
           "type": "text",
           "id": "btn_text_two",
           "label": "按钮二文字",
-          "default": "Learn more",
+          "default": "Buy Now",
           "visible_if": "{{ block.settings.btn_type == 'two' }}"
         },
         {
@@ -940,7 +958,7 @@
               
             {% endif %}
             <div
-              class='center-content tw-absolute lg:tw-left-[50%] lg:tw-top-[50%] lg:tw-translate-x-[-50%] lg:tw-translate-y-[-50%] lg:tw-w-[85vw] tw-z-10  max-lg:tw-h-full max-lg:tw-top-0 max-lg:tw-left-0 max-lg:tw-w-full max-lg:tw-pt-[90px] tw-box-border max-lg:tw-flex max-lg:tw-flex-col max-lg:tw-items-center'
+              class='center-content tw-absolute lg:tw-left-[50%] lg:tw-top-[50%] lg:tw-translate-x-[-50%] lg:tw-translate-y-[-50%] tw-z-10  max-lg:tw-h-full max-lg:tw-top-0 max-lg:tw-left-0 max-lg:tw-w-full max-lg:tw-pt-[90px] tw-box-border max-lg:tw-flex max-lg:tw-flex-col max-lg:tw-items-center'
             >
               <div class='swiper-content-text {% if banner.settings.banner_type == 'image_type' or banner.settings.banner_type == 'title_description_type' %} lg:tw-w-[560px] {% else %} lg:tw-w-[784px] {% endif %}'>
                 {%- if banner.settings.banner_type == 'product_type' or banner.settings.banner_type == 'title_description_type' or banner.settings.banner_type == 'discount_sale_type' -%}
@@ -1336,5 +1354,50 @@
     
     }
     handleBannerShow();
-  })
+  });
+  // 添加一个iife，监听窗口大小变化，动态调整 padding-left
+  {% if section.settings.site == 'site' %}
+    (function () {
+      function updatePadding() {
+ 
+        const width = window.innerWidth;
+        const section = document.getElementById('shopify-section-{{section.id}}');
+        if (!section) return;
+    
+        if (width <= 1024) {
+          section.style.removeProperty('--center-content-padding');
+          return;
+        }
+
+        const maxWidth = 1920;         // 设定一个"超大屏"的上限
+        const minWidth = 1400;         // 缩减到这个宽度停止缩减
+        const maxPadding = 18;         // rem
+        const minPadding = 8.37;          // rem
+
+        let padding;
+
+        if (width > minWidth && width <= maxWidth) {
+          const ratio = (width - minWidth) / (maxWidth - minWidth);
+          padding = minPadding + (maxPadding - minPadding) * ratio;
+        } else if (width > maxWidth) {
+          padding = maxPadding;
+        } else {
+          padding = minPadding;
+        }
+        console.log('updatePadding', padding);
+        
+        section.style.setProperty('--center-content-padding', padding.toFixed(2) + 'rem');
+      }
+
+      let resizeTimer;
+      function handleResize() {
+        clearTimeout(resizeTimer);
+        resizeTimer = setTimeout(updatePadding, 300);
+      }
+
+      window.addEventListener('resize', handleResize);
+      updatePadding();
+    })();
+  {% endif %}
+  
 </script>