zz-shopify-components 0.0.21 → 0.0.22

package/blocks/zz-accessories-swiper.liquid

@@ -1,223 +1,223 @@
-{% 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 %}
-
-{% assign btn_offset_pc = bullets_width_half | plus: 18 | plus: 48 %}
-
-<style>
-  #shopify-block-{{ block.id }} {
-    width: 100%;
-  }
-  #shopify-block-{{ block.id }}  .zz-accessories-swiper {
-    padding-top: 32px;
-    width: 100%;
-    height: fit-content;
-    background: {{ block.settings.bg_color }};
-    letter-spacing: 0;
-  }
-
-  #shopify-block-{{ block.id }} .zz-accessories-swiper .swiper-slide {
-    width: 320px;
-    height: fit-content;
-  }
-
-  #shopify-block-{{ block.id }} .swiper-button-next,
-  #shopify-block-{{ block.id }} .swiper-button-prev {
-    z-index: 99;
-    top: unset;
-    bottom: 0;
-    width: 48px;
-    height: 48px;
-  }
-  #shopify-block-{{ block.id }} .swiper-button-prev {
-    left: 50%;
-    transform: translate(-{{ btn_offset_pc }}px, 0px);
-  }
-  #shopify-block-{{ block.id }} .swiper-button-next {
-    right: 50%;
-    transform: translate({{ btn_offset_pc }}px, 0px);
-  }
-  #shopify-block-{{ block.id }} .swiper-button-next:after,
-  #shopify-block-{{ block.id }} .swiper-button-prev:after {
-    display: none;
-  }
-  #shopify-block-{{ block.id }} .swiper-button-next.swiper-button-disabled, #shopify-block-{{ block.id }} .swiper-button-prev.swiper-button-disabled {
-    opacity: 0.5;
-  }
-  #shopify-block-{{ block.id }} .zz-accessories-swiper .swiper-pagination-bullets {
-    bottom: 11px;
-  }
-  #shopify-block-{{ block.id }} .zz-accessories-swiper .swiper-pagination-bullets .swiper-pagination-bullet {
-    margin: 0 6px;
-    width: 6px;
-    height: 6px;
-    background-color: {{ block.settings.pagination_color }};
-    opacity: 0.5;
-  }
-  #shopify-block-{{ block.id }} .zz-accessories-swiper .swiper-pagination-bullets .swiper-pagination-bullet-active {
-    opacity: 1;
-  }
-
-  @media screen and (min-width: 1024px) {
-    #shopify-block-{{ block.id }} .zz-accessories-swiper {
-      padding-top: 64px;
-      padding-bottom: 108px;
-    }
-  }
-
-  @media screen and (max-width: 1023px) {
-    #shopify-block-{{ block.id }} .zz-accessories-swiper {
-      padding: 0px 20px 60px 20px;
-      box-sizing: border-box;
-    }
-    #shopify-block-{{ block.id }} .zz-accessories-swiper .swiper-slide {
-      width: 100%;
-    }
-
-    #shopify-block-{{ block.id }} .swiper-button-next,
-    #shopify-block-{{ block.id }} .swiper-button-prev {
-      width: 36px;
-      height: 36px;
-    }
-    #shopify-block-{{ block.id }} .swiper-button-prev {
-      left: 50%;
-      transform: translate(-{{ btn_offset }}px, 0px);
-    }
-    #shopify-block-{{ block.id }} .swiper-button-next {
-      right: 50%;
-      transform: translate({{ btn_offset }}px, 0px);
-    }
-    #shopify-block-{{ block.id }} .zz-accessories-swiper .swiper-pagination-bullets {
-      bottom: 9px;
-    }
-
-    #shopify-block-{{ block.id }} .zz-accessories-swiper .swiper-pagination-bullets .swiper-pagination-bullet {
-      margin: 0 4px;
-      width: 6px;
-      height: 6px;
-    }
-  }
-</style>
-
-<div
-  class='swiper zz-accessories-swiper'
-  data-id='{{ block.id }}'
->
-  <div class='swiper-wrapper'>
-    {% content_for 'blocks' %}
-  </div>
-  <!-- If we need navigation buttons -->
-  <div class='swiper-button-prev {% if block_size <= 1 %} tw-hidden {% endif %}'>
-    {% if block.settings.prev_icon != blank %}
-      {{
-        block.settings.prev_icon
-        | image_url: width: 48
-        | image_tag: alt: 'prev', class: 'tw-w-full tw-h-full tw-object-contain'
-      }}
-    {% else %}
-      {% render 'zz-icon-prev' %}
-    {% endif %}
-  </div>
-  <div class='swiper-button-next {% if block_size <= 1 %} tw-hidden {% endif %}'>
-    {% if block.settings.next_icon != blank %}
-      {{
-        block.settings.next_icon
-        | image_url: width: 48
-        | image_tag: alt: 'prev', class: 'tw-w-full tw-h-full tw-object-contain'
-      }}
-    {% else %}
-      {% render 'zz-icon-next' %}
-    {% endif %}
-  </div>
-
-  <!-- Pagination indicator -->
-  <div class='swiper-pagination'></div>
-</div>
-
-<script>
-  const blockId = '{{ block.id }}';
-  document.addEventListener('DOMContentLoaded', function () {
-    // 轮播图每个 wrapper 之间的间距
-    let isDesktop = window.innerWidth > 1023;
-
-    // 获取 class zz-accessories-swiper 的元素 且data-id 为 block.id 的元素
-    const zzAccessoriesSwiper = document.querySelector(
-      `.zz-accessories-swiper[data-id='${blockId}']`
-    );
-    const swiperWrapper = zzAccessoriesSwiper.querySelector('.swiper-wrapper');
-    // 获取当前 swiper-wrapper 下面 所有 第一层 div
-    const swiperSlides = swiperWrapper.querySelectorAll(':scope > div');
-    // 给每个 swiper-slide 添加 class swiper-slide
-    swiperSlides.forEach((slide) => {
-      slide.classList.add('swiper-slide');
-    });
-    setTimeout(() => {
-      const bannerAccessoriesSwiper = new Swiper('.zz-accessories-swiper', {
-        initialSlide: isDesktop ? 1 : 0,
-        slidesPerView: 'auto',
-        centeredSlides: true,
-        spaceBetween: isDesktop ? 24 : 8,
-        navigation: {
-          nextEl: '.swiper-button-next',
-          prevEl: '.swiper-button-prev',
-        },
-        pagination: {
-          el: '.swiper-pagination',
-          clickable: true,
-        },
-        effect: 'slide',
-      });
-    }, 200);
-  });
-</script>
-
-{% schema %}
-{
-  "name": "Accessories Swiper Block",
-  "settings": [
-    {
-      "type": "color",
-      "id": "bg_color",
-      "default": "#FFFFFF",
-      "label": "背景色"
-    },
-
-    {
-      "type": "color",
-      "id": "pagination_color",
-      "default": "#000000",
-      "label": "轮播导航圆圈颜色"
-    },
-
-    {
-      "type": "image_picker",
-      "id": "prev_icon",
-      "label": "轮播上一张图标"
-    },
-    {
-      "type": "image_picker",
-      "id": "next_icon",
-      "label": "轮播下一张图标"
-    }
-  ],
-  "blocks": [
-    {
-      "type": "zz-accessories-item"
-    }
-  ],
-  "presets": [
-    {
-      "name": "Accessories Swiper Block"
-    },
-    {
-      "name": "配件轮播"
-    }
-  ]
-}
-{% 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 %}
+
+{% assign btn_offset_pc = bullets_width_half | plus: 18 | plus: 48 %}
+
+<style>
+  #shopify-block-{{ block.id }} {
+    width: 100%;
+  }
+  #shopify-block-{{ block.id }}  .zz-accessories-swiper {
+    padding-top: 32px;
+    width: 100%;
+    height: fit-content;
+    background: {{ block.settings.bg_color }};
+    letter-spacing: 0;
+  }
+
+  #shopify-block-{{ block.id }} .zz-accessories-swiper .swiper-slide {
+    width: 320px;
+    height: fit-content;
+  }
+
+  #shopify-block-{{ block.id }} .swiper-button-next,
+  #shopify-block-{{ block.id }} .swiper-button-prev {
+    z-index: 99;
+    top: unset;
+    bottom: 0;
+    width: 48px;
+    height: 48px;
+  }
+  #shopify-block-{{ block.id }} .swiper-button-prev {
+    left: 50%;
+    transform: translate(-{{ btn_offset_pc }}px, 0px);
+  }
+  #shopify-block-{{ block.id }} .swiper-button-next {
+    right: 50%;
+    transform: translate({{ btn_offset_pc }}px, 0px);
+  }
+  #shopify-block-{{ block.id }} .swiper-button-next:after,
+  #shopify-block-{{ block.id }} .swiper-button-prev:after {
+    display: none;
+  }
+  #shopify-block-{{ block.id }} .swiper-button-next.swiper-button-disabled, #shopify-block-{{ block.id }} .swiper-button-prev.swiper-button-disabled {
+    opacity: 0.5;
+  }
+  #shopify-block-{{ block.id }} .zz-accessories-swiper .swiper-pagination-bullets {
+    bottom: 11px;
+  }
+  #shopify-block-{{ block.id }} .zz-accessories-swiper .swiper-pagination-bullets .swiper-pagination-bullet {
+    margin: 0 6px;
+    width: 6px;
+    height: 6px;
+    background-color: {{ block.settings.pagination_color }};
+    opacity: 0.5;
+  }
+  #shopify-block-{{ block.id }} .zz-accessories-swiper .swiper-pagination-bullets .swiper-pagination-bullet-active {
+    opacity: 1;
+  }
+
+  @media screen and (min-width: 1024px) {
+    #shopify-block-{{ block.id }} .zz-accessories-swiper {
+      padding-top: 64px;
+      padding-bottom: 108px;
+    }
+  }
+
+  @media screen and (max-width: 1023px) {
+    #shopify-block-{{ block.id }} .zz-accessories-swiper {
+      padding: 0px 20px 60px 20px;
+      box-sizing: border-box;
+    }
+    #shopify-block-{{ block.id }} .zz-accessories-swiper .swiper-slide {
+      width: 100%;
+    }
+
+    #shopify-block-{{ block.id }} .swiper-button-next,
+    #shopify-block-{{ block.id }} .swiper-button-prev {
+      width: 36px;
+      height: 36px;
+    }
+    #shopify-block-{{ block.id }} .swiper-button-prev {
+      left: 50%;
+      transform: translate(-{{ btn_offset }}px, 0px);
+    }
+    #shopify-block-{{ block.id }} .swiper-button-next {
+      right: 50%;
+      transform: translate({{ btn_offset }}px, 0px);
+    }
+    #shopify-block-{{ block.id }} .zz-accessories-swiper .swiper-pagination-bullets {
+      bottom: 9px;
+    }
+
+    #shopify-block-{{ block.id }} .zz-accessories-swiper .swiper-pagination-bullets .swiper-pagination-bullet {
+      margin: 0 4px;
+      width: 6px;
+      height: 6px;
+    }
+  }
+</style>
+
+<div
+  class='swiper zz-accessories-swiper'
+  data-id='{{ block.id }}'
+>
+  <div class='swiper-wrapper'>
+    {% content_for 'blocks' %}
+  </div>
+  <!-- If we need navigation buttons -->
+  <div class='swiper-button-prev {% if block_size <= 1 %} tw-hidden {% endif %}'>
+    {% if block.settings.prev_icon != blank %}
+      {{
+        block.settings.prev_icon
+        | image_url: width: 48
+        | image_tag: alt: 'prev', class: 'tw-w-full tw-h-full tw-object-contain'
+      }}
+    {% else %}
+      {% render 'zz-icon-prev' %}
+    {% endif %}
+  </div>
+  <div class='swiper-button-next {% if block_size <= 1 %} tw-hidden {% endif %}'>
+    {% if block.settings.next_icon != blank %}
+      {{
+        block.settings.next_icon
+        | image_url: width: 48
+        | image_tag: alt: 'prev', class: 'tw-w-full tw-h-full tw-object-contain'
+      }}
+    {% else %}
+      {% render 'zz-icon-next' %}
+    {% endif %}
+  </div>
+
+  <!-- Pagination indicator -->
+  <div class='swiper-pagination'></div>
+</div>
+
+<script>
+  const blockId = '{{ block.id }}';
+  document.addEventListener('DOMContentLoaded', function () {
+    // 轮播图每个 wrapper 之间的间距
+    let isDesktop = window.innerWidth > 1023;
+
+    // 获取 class zz-accessories-swiper 的元素 且data-id 为 block.id 的元素
+    const zzAccessoriesSwiper = document.querySelector(
+      `.zz-accessories-swiper[data-id='${blockId}']`
+    );
+    const swiperWrapper = zzAccessoriesSwiper.querySelector('.swiper-wrapper');
+    // 获取当前 swiper-wrapper 下面 所有 第一层 div
+    const swiperSlides = swiperWrapper.querySelectorAll(':scope > div');
+    // 给每个 swiper-slide 添加 class swiper-slide
+    swiperSlides.forEach((slide) => {
+      slide.classList.add('swiper-slide');
+    });
+    setTimeout(() => {
+      const bannerAccessoriesSwiper = new Swiper('.zz-accessories-swiper', {
+        initialSlide: isDesktop ? 1 : 0,
+        slidesPerView: 'auto',
+        centeredSlides: true,
+        spaceBetween: isDesktop ? 24 : 8,
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev',
+        },
+        pagination: {
+          el: '.swiper-pagination',
+          clickable: true,
+        },
+        effect: 'slide',
+      });
+    }, 200);
+  });
+</script>
+
+{% schema %}
+{
+  "name": "Accessories Swiper Block",
+  "settings": [
+    {
+      "type": "color",
+      "id": "bg_color",
+      "default": "#FFFFFF",
+      "label": "背景色"
+    },
+
+    {
+      "type": "color",
+      "id": "pagination_color",
+      "default": "#000000",
+      "label": "轮播导航圆圈颜色"
+    },
+
+    {
+      "type": "image_picker",
+      "id": "prev_icon",
+      "label": "轮播上一张图标"
+    },
+    {
+      "type": "image_picker",
+      "id": "next_icon",
+      "label": "轮播下一张图标"
+    }
+  ],
+  "blocks": [
+    {
+      "type": "zz-accessories-item"
+    }
+  ],
+  "presets": [
+    {
+      "name": "Accessories Swiper Block"
+    },
+    {
+      "name": "配件轮播"
+    }
+  ]
+}
+{% endschema %}