zz-shopify-components 0.0.27 → 0.0.28-beta.10

package/blocks/zz-mb-swiper-pc-flex.liquid

@@ -1,273 +1,273 @@
-{% schema %}
-{
-  "name": "Mobile Swiper PC Flex",
-  "class": "flex-layout-block",
-  "settings": [
-    {
-      "type": "color_background",
-      "id": "background_color",
-      "label": "背景颜色",
-      "default": "rgba(0,0,0,0)"
-    },
-    {
-      "type": "header",
-      "content": "💻 PC端布局设置"
-    },
-    {
-      "type": "number",
-      "id": "pc_gap",
-      "label": "区块间距 (Gap)",
-      "default": 40
-    },
-    {
-      "type": "number",
-      "id": "pc_padding_top",
-      "label": "PC端顶部内边距 (px)",
-      "default": 40
-    },
-    {
-      "type": "number",
-      "id": "pc_padding_bottom",
-      "label": "PC端底部内边距 (px)",
-      "default": 40
-    },
-    {
-      "type": "number",
-      "id": "pc_xl_width",
-      "label": "XL屏幕内容区域宽度 (px)",
-      "default": 1220
-    },
-    {
-      "type": "number",
-      "id": "pc_lg_width",
-      "label": "LG屏幕内容区域宽度 (vw)",
-      "default": 95
-    },
-    {
-      "type": "select",
-      "id": "pc_justify",
-      "label": "PC主轴对齐 (Justify Content)",
-      "options": [
-        { "value": "flex-start", "label": "起始对齐 (Flex Start)" },
-        { "value": "center", "label": "居中对齐 (Center)" },
-        { "value": "flex-end", "label": "末尾对齐 (Flex End)" },
-        { "value": "space-between", "label": "两端对齐 (Space Between)" },
-        { "value": "space-around", "label": "平均间距 (Space Around)" }
-      ],
-      "default": "center"
-    },
-    {
-      "type": "select",
-      "id": "pc_align",
-      "label": "PC交叉轴对齐 (Align Items)",
-      "options": [
-        { "value": "flex-start", "label": "起始对齐 (Flex Start)" },
-        { "value": "center", "label": "居中对齐 (Center)" },
-        { "value": "flex-end", "label": "末尾对齐 (Flex End)" }
-      ],
-      "default": "center"
-    },
-    {
-      "type": "header",
-      "content": "📱 移动端 Swiper 设置"
-    },
-    {
-      "type": "number",
-      "id": "swiper_slide_padding_x",
-      "label": "轮播块与屏幕左右边距 (px)",
-      "default": 20
-    },
-    {
-      "type": "number",
-      "id": "swiper_slide_height",
-      "label": "轮播块高度 (px)",
-      "default": 374
-    },
-    {
-      "type": "select",
-      "id": "swiper_nav_style",
-      "label": "切换按钮样式",
-      "options": [
-        { "value": "dark", "label": "深色" },
-        { "value": "light", "label": "浅色" }
-      ],
-      "default": "light"
-    },
-    {
-      "type": "number",
-      "id": "mobile_padding_top",
-      "label": "移动端顶部内边距 (px)",
-      "default": 32
-    },
-    {
-      "type": "number",
-      "id": "mobile_padding_bottom",
-      "label": "移动端底部内边距 (px)",
-      "default": 32
-    }
-  ],
-  "blocks": [
-    {
-      "type": "@theme"
-    }
-  ],
-  "presets": [
-    {
-      "name": "Mobile Swiper PC Flex"
-    },
-    {
-      "name": "移动端轮播 & PC左右布局"
-    }
-  ]
-}
-{% endschema %}
-
-{% assign block_size = block.blocks.size %}
-{% assign bullets_width_half = block_size
-  | minus: 1
-  | times: 14
-  | plus: 6
-  | divided_by: 2.0
-  | ceil
-%}
-{% assign btn_offset = bullets_width_half | plus: 14 | plus: 36 %}
-
-<div class='swiper zz-mb-swiper-pc-flex'>
-  <div class='swiper-wrapper lg:tw-flex'>
-    {% content_for 'blocks' %}
-  </div>
-  <div class='swiper-button-prev {% if block_size <= 1 %} tw-hidden {% endif %} lg:tw-hidden'>
-    {% if block.settings.swiper_nav_style == 'light' %}
-      {% render 'icon-prev-light' %}
-    {% else %}
-      {% render 'icon-prev-dark' %}
-    {% endif %}
-  </div>
-  <div class='swiper-button-next {% if block_size <= 1 %} tw-hidden {% endif %} lg:tw-hidden'>
-    {% if block.settings.swiper_nav_style == 'light' %}
-      {% render 'icon-next-light' %}
-    {% else %}
-      {% render 'icon-next-dark' %}
-    {% endif %}
-  </div>
-  <div class='swiper-pagination {% if block_size <= 1 %} tw-hidden {% endif %} lg:tw-hidden'></div>
-</div>
-
-<script>
-  document.addEventListener('DOMContentLoaded', function () {
-    // 移动端添加轮播
-    if (window.innerWidth < 1024) {
-      (function() {
-        const bannerImageSwiper = new Swiper(
-          '#shopify-block-{{ block.id }} .zz-mb-swiper-pc-flex',
-          {
-            slidesPerView: 'auto',
-            centeredSlides: true,
-            spaceBetween: 8,
-            navigation: {
-              nextEl: '.swiper-button-next',
-              prevEl: '.swiper-button-prev',
-            },
-            pagination: {
-              el: '#shopify-block-{{ block.id }} .swiper-pagination',
-              clickable: true,
-            },
-            effect: 'slide',
-          }
-        );
-      })();
-
-      (function() {
-        // 获取 class zz-mb-swiper-pc-flex 的元素 且data-id 为 block.id 的元素
-        const zzMbSwiper = document.querySelector(`#shopify-block-{{ block.id }} .zz-mb-swiper-pc-flex`);
-        // 获取当前 swiper-wrapper 下面 所有 第一层 div 
-        const swiperSlides = zzMbSwiper.querySelectorAll('.swiper-wrapper > div');
-        // 给每个 swiper-slide 添加 class swiper-slide
-        swiperSlides.forEach(slide => {
-          slide.classList.add('swiper-slide');
-        });
-      })();
-    }
-  });
-</script>
-
-<style>
-  #shopify-block-{{ block.id }} {
-    background-color: {{ block.settings.background_color }};
-    padding-top: {{ block.settings.mobile_padding_top }}px;
-    padding-bottom: {{ block.settings.mobile_padding_bottom }}px;
-  }
-
-  @media (min-width: 1024px) {
-    #shopify-block-{{ block.id }} {
-      padding-top: {{ block.settings.pc_padding_top }}px;
-      padding-bottom: {{ block.settings.pc_padding_bottom }}px;
-      padding-left: 0px;
-      padding-right: 0px;
-      width: 100%;
-    }
-    #shopify-block-{{ block.id }} .swiper-wrapper {
-      display: flex;
-      gap: {{ block.settings.pc_gap }}px;
-      justify-content: {{ block.settings.pc_justify }};
-      align-items: {{ block.settings.pc_align }};
-      width: {{ block.settings.pc_lg_width }}vw;
-      margin: 0 auto;
-    }
-  }
-
-  @media (min-width: 1280px) {
-    #shopify-block-{{ block.id }} .swiper-wrapper {
-      width: {{ block.settings.pc_xl_width }}px;
-      margin: 0 auto;
-    }
-  }
-
-  @media screen and (max-width: 1023px) {
-    #shopify-block-{{ block.id }} .swiper-wrapper {
-      padding-bottom: 60px;
-    }
-    #shopify-block-{{ block.id }} .swiper-slide {
-      width: calc(100% - 40px);
-      height: {{ block.settings.swiper_slide_height }}px;
-      overflow: hidden;
-    }
-    #shopify-block-{{ block.id }} .swiper-button-next,
-    #shopify-block-{{ block.id }} .swiper-button-prev {
-      z-index: 99;
-      top: unset;
-      bottom: 0;
-      width: 36px;
-      height: 36px;
-    }
-    #shopify-block-{{ block.id }} .swiper-button-next:after,
-    #shopify-block-{{ block.id }} .swiper-button-prev:after {
-      display: none;
-    }
-    #shopify-block-{{ block.id }} .swiper-button-prev {
-      left: 50%;
-      transform: translate(-{{ btn_offset }}px, 0px);
-    }
-    #shopify-block-{{ block.id }} .swiper-button-next {
-      left: unset;
-      right: 50%;
-      transform: translate({{ btn_offset }}px, 0px);
-    }
-    #shopify-block-{{ block.id }} .swiper-pagination-bullets .swiper-pagination-bullet {
-      margin: 0 4px;
-      width: 6px;
-      height: 6px;
-      {% if block.settings.swiper_nav_style == 'light' %}
-      background: #000000;
-      opacity: 0.3;
-      {% else %}
-      background: #ffffff;
-      opacity: 0.5;
-      {% endif %}
-    }
-    #shopify-block-{{ block.id }} .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
-      width: 6px;
-      opacity: 1;
-    }
-  }
-</style>
+{% schema %}
+{
+  "name": "Mobile Swiper PC Flex",
+  "class": "flex-layout-block",
+  "settings": [
+    {
+      "type": "color_background",
+      "id": "background_color",
+      "label": "背景颜色",
+      "default": "rgba(0,0,0,0)"
+    },
+    {
+      "type": "header",
+      "content": "💻 PC端布局设置"
+    },
+    {
+      "type": "number",
+      "id": "pc_gap",
+      "label": "区块间距 (Gap)",
+      "default": 40
+    },
+    {
+      "type": "number",
+      "id": "pc_padding_top",
+      "label": "PC端顶部内边距 (px)",
+      "default": 40
+    },
+    {
+      "type": "number",
+      "id": "pc_padding_bottom",
+      "label": "PC端底部内边距 (px)",
+      "default": 40
+    },
+    {
+      "type": "number",
+      "id": "pc_xl_width",
+      "label": "XL屏幕内容区域宽度 (px)",
+      "default": 1220
+    },
+    {
+      "type": "number",
+      "id": "pc_lg_width",
+      "label": "LG屏幕内容区域宽度 (vw)",
+      "default": 95
+    },
+    {
+      "type": "select",
+      "id": "pc_justify",
+      "label": "PC主轴对齐 (Justify Content)",
+      "options": [
+        { "value": "flex-start", "label": "起始对齐 (Flex Start)" },
+        { "value": "center", "label": "居中对齐 (Center)" },
+        { "value": "flex-end", "label": "末尾对齐 (Flex End)" },
+        { "value": "space-between", "label": "两端对齐 (Space Between)" },
+        { "value": "space-around", "label": "平均间距 (Space Around)" }
+      ],
+      "default": "center"
+    },
+    {
+      "type": "select",
+      "id": "pc_align",
+      "label": "PC交叉轴对齐 (Align Items)",
+      "options": [
+        { "value": "flex-start", "label": "起始对齐 (Flex Start)" },
+        { "value": "center", "label": "居中对齐 (Center)" },
+        { "value": "flex-end", "label": "末尾对齐 (Flex End)" }
+      ],
+      "default": "center"
+    },
+    {
+      "type": "header",
+      "content": "📱 移动端 Swiper 设置"
+    },
+    {
+      "type": "number",
+      "id": "swiper_slide_padding_x",
+      "label": "轮播块与屏幕左右边距 (px)",
+      "default": 20
+    },
+    {
+      "type": "number",
+      "id": "swiper_slide_height",
+      "label": "轮播块高度 (px)",
+      "default": 374
+    },
+    {
+      "type": "select",
+      "id": "swiper_nav_style",
+      "label": "切换按钮样式",
+      "options": [
+        { "value": "dark", "label": "深色" },
+        { "value": "light", "label": "浅色" }
+      ],
+      "default": "light"
+    },
+    {
+      "type": "number",
+      "id": "mobile_padding_top",
+      "label": "移动端顶部内边距 (px)",
+      "default": 32
+    },
+    {
+      "type": "number",
+      "id": "mobile_padding_bottom",
+      "label": "移动端底部内边距 (px)",
+      "default": 32
+    }
+  ],
+  "blocks": [
+    {
+      "type": "@theme"
+    }
+  ],
+  "presets": [
+    {
+      "name": "Mobile Swiper PC Flex"
+    },
+    {
+      "name": "移动端轮播 & PC左右布局"
+    }
+  ]
+}
+{% endschema %}
+
+{% assign block_size = block.blocks.size %}
+{% assign bullets_width_half = block_size
+  | minus: 1
+  | times: 14
+  | plus: 6
+  | divided_by: 2.0
+  | ceil
+%}
+{% assign btn_offset = bullets_width_half | plus: 14 | plus: 36 %}
+
+<div class='swiper zz-mb-swiper-pc-flex'>
+  <div class='swiper-wrapper lg:tw-flex'>
+    {% content_for 'blocks' %}
+  </div>
+  <div class='swiper-button-prev {% if block_size <= 1 %} tw-hidden {% endif %} lg:tw-hidden'>
+    {% if block.settings.swiper_nav_style == 'light' %}
+      {% render 'icon-prev-light' %}
+    {% else %}
+      {% render 'icon-prev-dark' %}
+    {% endif %}
+  </div>
+  <div class='swiper-button-next {% if block_size <= 1 %} tw-hidden {% endif %} lg:tw-hidden'>
+    {% if block.settings.swiper_nav_style == 'light' %}
+      {% render 'icon-next-light' %}
+    {% else %}
+      {% render 'icon-next-dark' %}
+    {% endif %}
+  </div>
+  <div class='swiper-pagination {% if block_size <= 1 %} tw-hidden {% endif %} lg:tw-hidden'></div>
+</div>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    // 移动端添加轮播
+    if (window.innerWidth < 1024) {
+      (function() {
+        const bannerImageSwiper = new Swiper(
+          '#shopify-block-{{ block.id }} .zz-mb-swiper-pc-flex',
+          {
+            slidesPerView: 'auto',
+            centeredSlides: true,
+            spaceBetween: 8,
+            navigation: {
+              nextEl: '.swiper-button-next',
+              prevEl: '.swiper-button-prev',
+            },
+            pagination: {
+              el: '#shopify-block-{{ block.id }} .swiper-pagination',
+              clickable: true,
+            },
+            effect: 'slide',
+          }
+        );
+      })();
+
+      (function() {
+        // 获取 class zz-mb-swiper-pc-flex 的元素 且data-id 为 block.id 的元素
+        const zzMbSwiper = document.querySelector(`#shopify-block-{{ block.id }} .zz-mb-swiper-pc-flex`);
+        // 获取当前 swiper-wrapper 下面 所有 第一层 div 
+        const swiperSlides = zzMbSwiper.querySelectorAll('.swiper-wrapper > div');
+        // 给每个 swiper-slide 添加 class swiper-slide
+        swiperSlides.forEach(slide => {
+          slide.classList.add('swiper-slide');
+        });
+      })();
+    }
+  });
+</script>
+
+<style>
+  #shopify-block-{{ block.id }} {
+    background-color: {{ block.settings.background_color }};
+    padding-top: {{ block.settings.mobile_padding_top }}px;
+    padding-bottom: {{ block.settings.mobile_padding_bottom }}px;
+  }
+
+  @media (min-width: 1024px) {
+    #shopify-block-{{ block.id }} {
+      padding-top: {{ block.settings.pc_padding_top }}px;
+      padding-bottom: {{ block.settings.pc_padding_bottom }}px;
+      padding-left: 0px;
+      padding-right: 0px;
+      width: 100%;
+    }
+    #shopify-block-{{ block.id }} .swiper-wrapper {
+      display: flex;
+      gap: {{ block.settings.pc_gap }}px;
+      justify-content: {{ block.settings.pc_justify }};
+      align-items: {{ block.settings.pc_align }};
+      width: {{ block.settings.pc_lg_width }}vw;
+      margin: 0 auto;
+    }
+  }
+
+  @media (min-width: 1280px) {
+    #shopify-block-{{ block.id }} .swiper-wrapper {
+      width: {{ block.settings.pc_xl_width }}px;
+      margin: 0 auto;
+    }
+  }
+
+  @media screen and (max-width: 1023px) {
+    #shopify-block-{{ block.id }} .swiper-wrapper {
+      padding-bottom: 60px;
+    }
+    #shopify-block-{{ block.id }} .swiper-slide {
+      width: calc(100% - 40px);
+      height: {{ block.settings.swiper_slide_height }}px;
+      overflow: hidden;
+    }
+    #shopify-block-{{ block.id }} .swiper-button-next,
+    #shopify-block-{{ block.id }} .swiper-button-prev {
+      z-index: 99;
+      top: unset;
+      bottom: 0;
+      width: 36px;
+      height: 36px;
+    }
+    #shopify-block-{{ block.id }} .swiper-button-next:after,
+    #shopify-block-{{ block.id }} .swiper-button-prev:after {
+      display: none;
+    }
+    #shopify-block-{{ block.id }} .swiper-button-prev {
+      left: 50%;
+      transform: translate(-{{ btn_offset }}px, 0px);
+    }
+    #shopify-block-{{ block.id }} .swiper-button-next {
+      left: unset;
+      right: 50%;
+      transform: translate({{ btn_offset }}px, 0px);
+    }
+    #shopify-block-{{ block.id }} .swiper-pagination-bullets .swiper-pagination-bullet {
+      margin: 0 4px;
+      width: 6px;
+      height: 6px;
+      {% if block.settings.swiper_nav_style == 'light' %}
+      background: #000000;
+      opacity: 0.3;
+      {% else %}
+      background: #ffffff;
+      opacity: 0.5;
+      {% endif %}
+    }
+    #shopify-block-{{ block.id }} .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
+      width: 6px;
+      opacity: 1;
+    }
+  }
+</style>