zz-shopify-components 0.0.1-beta.1

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

@@ -0,0 +1,270 @@
+{% 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": "移动端轮播 & 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>

package/blocks/zz-ratio-image.liquid

@@ -0,0 +1,177 @@
+{% schema %}
+{
+  "name": "Ratio Image",
+  "class": "ratio-image",
+  "settings": [
+    {
+      "type": "header",
+      "content": "PC端设置"
+    },
+    {
+      "type": "image_picker",
+      "id": "desktop_image",
+      "label": "PC端图片"
+    },
+    {
+      "type": "range",
+      "id": "pc_width",
+      "min": 0,
+      "max": 100,
+      "step": 1,
+      "unit": "%",
+      "label": "PC端占父容器的百分比，单位%",
+      "default": 50
+    },
+    {
+      "type": "number",
+      "id": "desktop_border_radius",
+      "label": "PC端圆角",
+      "default": 16,
+      "info": "单位：px"
+    },
+    {
+      "type": "header",
+      "content": "移动端设置"
+    },
+    {
+      "type": "image_picker",
+      "id": "mobile_image",
+      "label": "移动端图片"
+    },
+    {
+      "type": "range",
+      "id": "mobile_width",
+      "min": 0,
+      "max": 100,
+      "step": 1,
+      "unit": "%",
+      "label": "移动端占父容器的百分比，单位%",
+      "default": 100
+    },
+    {
+      "type": "number",
+      "id": "mobile_border_radius",
+      "label": "移动端圆角",
+      "default": 10,
+      "info": "单位：px"
+    },
+    {
+      "type": "text",
+      "id": "alt",
+      "label": "alt",
+      "default": "image loading"
+    },
+    {
+      "type": "checkbox",
+      "id": "has_link",
+      "label": "是否有链接",
+      "default": false
+    },
+    {
+      "type": "select",
+      "id": "function_type",
+      "label": "功能类型",
+      "options": [
+        {
+          "value": "link",
+          "label": "链接"
+        },
+        {
+          "value": "link_map",
+          "label": "多国家映射"
+        },
+      ],
+      "default": "link",
+      "visible_if": "{{ block.settings.has_link == true }}"
+    },
+    {
+      "type": "url",
+      "id": "url",
+      "label": "链接",
+      "visible_if": "{{ block.settings.function_type == 'link' and block.settings.has_link == true }}"
+    },
+    {
+      "type": "textarea",
+      "id": "links",
+      "label": "Sites Link Map",
+      "info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开（ 冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接                    EG: Canada: https://hoverair.com/   default: https://hoverair.com/ ",
+      "visible_if": "{{ block.settings.function_type == 'link_map' and block.settings.has_link == true }}"
+    },
+
+  ],
+  "presets": [
+    {
+      "name": "宽度比例图片"
+    }
+  ]
+}
+{% endschema %}
+
+{% assign link_class = 'zz-link-' | append: block.id %}
+{% assign image_class = 'ratio-image ' | append: link_class %}
+
+    {% render 'zz-img',
+      pc_image: block.settings.desktop_image,
+      mb_image: block.settings.mobile_image,
+      image_alt: block.settings.alt | escape,
+      class_name: image_class,
+  %}
+
+<style>
+ 
+  #shopify-block-{{ block.id }} {
+    {% if block.settings.has_link %}
+      cursor: pointer;
+    {% endif %}
+    overflow: hidden;
+  }
+
+  @media screen and (max-width: 1023px) {
+    #shopify-block-{{ block.id }} {
+      width: {% if block.settings.mobile_width > 0 %}{{ block.settings.mobile_width }}%{% else %}100%{% endif %};
+      border-radius: {{ block.settings.mobile_border_radius }}px;
+    }
+  
+  }
+  @media screen and (min-width: 1024px) {
+    #shopify-block-{{ block.id }} {
+      width: {% if block.settings.pc_width > 0 %}{{ block.settings.pc_width }}%{% else %}100%{% endif %};
+      border-radius: {{ block.settings.desktop_border_radius }}px;
+    }
+  }
+ 
+
+</style>
+
+{% if block.settings.has_link %}
+  {% if block.settings.function_type == 'link_map' %}
+    <script>
+      document.addEventListener('DOMContentLoaded', (event) => {
+        const btn = document.getElementsByClassName('{{ link_class }}')
+        if(btn && btn.length > 0) {
+          Array.from(btn).forEach(item => {
+            bindSiteJump(item, {{ block.settings.links | json }})
+          })
+        }
+      })
+    </script>
+  {% else %}
+    <script>
+      document.addEventListener('DOMContentLoaded', (event) => {
+  
+        const btn = document.getElementsByClassName('{{ link_class }}')
+        if(btn && btn.length > 0) {
+          Array.from(btn).forEach(item => {
+            item.addEventListener('click', (event) => {
+              event.preventDefault();
+              // 阻止冒泡
+              event.stopPropagation();
+              window.location.href = '{{ block.settings.url }}';
+            })
+          })
+        }
+      })
+    </script>
+  {% endif %}
+
+{% endif %}

package/blocks/zz-ratio-video.liquid

@@ -0,0 +1,112 @@
+{% schema %}
+{
+  "name": "Ratio Video",
+  "class": "ratio-video",
+  "settings": [
+    {
+      "type": "header",
+      "content": "PC端设置"
+    },
+    {
+      "type": "video",
+      "id": "video_pc",
+      "label": "PC端视频"
+    },
+    {
+      "type": "image_picker",
+      "id": "poster_pc",
+      "label": "PC端视频 封面"
+    },
+    {
+      "type": "range",
+      "id": "pc_width",
+      "min": 0,
+      "max": 100,
+      "step": 1,
+      "unit": "%",
+      "label": "PC端占父容器的百分比，单位%",
+      "default": 50
+    },
+    {
+      "type": "number",
+      "id": "desktop_border_radius",
+      "label": "PC端圆角",
+      "default": 16,
+      "info": "单位：px"
+    },
+    {
+      "type": "header",
+      "content": "移动端设置"
+    },
+    {
+      "type": "video",
+      "id": "video_mb",
+      "label": "移动端视频"
+    },
+    {
+      "type": "image_picker",
+      "id": "poster_mb",
+      "label": "移动端视频封面"
+    },
+ 
+    {
+      "type": "range",
+      "id": "mobile_width",
+      "min": 0,
+      "max": 100,
+      "step": 1,
+      "unit": "%",
+      "label": "移动端占父容器的百分比，单位%",
+      "default": 100
+    },
+    {
+      "type": "number",
+      "id": "mobile_border_radius",
+      "label": "移动端圆角",
+      "default": 10,
+      "info": "单位：px"
+    },
+   
+  ],
+  "presets": [
+    {
+      "name": "宽度比例视频",
+     
+    }
+  ]
+}
+{% endschema %}
+
+
+    {% render 'zz-video',
+      pc_video: block.settings.video_pc,
+      pc_poster: block.settings.poster_pc,
+      mb_video: block.settings.video_mb,
+      mb_poster: block.settings.poster_mb,
+      lazy: true,
+      class: 'ratio-video tw-w-full tw-h-auto',
+      autoplay: true,
+      loop: true,
+      muted: true
+    %}
+
+<style>
+ 
+  #shopify-block-{{ block.id }} {
+    width: {% if block.settings.mobile_width > 0 %}{{ block.settings.mobile_width }}%{% else %}100%{% endif %};
+    border-radius: {{ block.settings.mobile_border_radius }}px;
+    overflow: hidden;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+
+
+  @media screen and (min-width: 1024px) {
+    #shopify-block-{{ block.id }} {
+      width: {% if block.settings.pc_width > 0 %}{{ block.settings.pc_width }}%{% else %}100%{% endif %};
+      border-radius: {{ block.settings.desktop_border_radius }}px;
+    }
+  }
+
+
+</style>