zz-shopify-components 0.0.21 → 0.0.24-beta.0

package/blocks/zz-flex-layout-bg-block.liquid

@@ -436,15 +436,15 @@
   }
   {% if block.settings.full_screen_bg %}
     #shopify-block-{{ block.id }} {
-      width: 100vw;
-      height: 100vh;
+      width: 100%;
+      height: 100%;
     }
     #shopify-block-{{ block.id }} .flex-layout-image {
-      width: 100vw;
+      width: 100%;
       height: 100vh;
     }
     #shopify-block-{{ block.id }} .flex-layout-video {
-      width: 100vw;
+      width: 100%;
       height: 100vh;
       object-fit: cover;
       object-position: center; 

package/blocks/zz-full-screen-swiper.liquid

@@ -5,14 +5,14 @@
 <style>
   #shopify-block-{{block.id}} {
     background: {{ block.settings.bg_color }};
-    width: 100vw;
+    width: 100%;
     height: 100vh;
     box-sizing: border-box;
     overflow: hidden;
     position: relative;
   }
   #shopify-block-{{block.id}} .zz-full-screen-swiper {
-    width: 100vw;
+    width: 100%;
     height: 100vh;
     box-sizing: border-box;
     overflow: hidden;

package/blocks/zz-video-img-item.liquid

@@ -0,0 +1,194 @@
+<style>
+    @media screen and (max-width: 750px) {
+      #shopify-block-{{block.id}} {
+        width: calc(100% - 72px);
+        box-sizing: border-box; 
+        transform: translateX(-18px);
+      }
+    }
+    @media screen and (min-width: 750px) {
+      #shopify-block-{{block.id}} {
+        width: 318px;
+      }
+    }
+ 
+    #shopify-block-{{block.id}} .media-box {
+      {% if block.settings.has_link %}
+        cursor: pointer;
+      {% endif %}
+    }
+  
+  </style>
+  
+  {% assign media_class = 'zz-link-' | append: block.id %}
+  
+  <div class='media-box banner-item {{ media_class }} max-md:tw-rounded-[12px] md:tw-rounded-[16px]'>
+    {% if block.settings.video_pc != blank %}
+      {% if block.settings.video_url_pc != blank %}
+        {% assign pc_video = block.settings.video_url_pc %}
+      {% else %}
+        {% assign pc_video = block.settings.video_pc %}
+      {% endif %}
+      {% render 'zz-video-md',
+        pc_video: pc_video,
+        pc_poster: block.settings.poster_pc,
+        mb_video: block.settings.video_mb,
+        mb_poster: block.settings.poster_mb,
+        lazy: true,
+        class: 'image-video-box tw-w-full tw-h-auto max-md:tw-rounded-[12px] md:tw-rounded-[16px]',
+        autoplay: true,
+        muted: true,
+        loop: true
+      %}
+    {% else %}
+      {%
+        render 'zz-img-md',
+        pc_image: block.settings.poster_pc,
+        mb_image: block.settings.poster_mb,
+        image_alt: block.settings.heading | escape,
+        class_name: 'image-video-box max-md:tw-rounded-[12px] md:tw-rounded-[16px]',
+      %}
+    {% endif %}
+  </div>
+  {% if block.settings.has_title_and_content %}
+    <div class='active-box-content md:tw-text-[20px] max-md:tw-text-[17px] max-md:tw-mt-[20px] md:tw-mt-[24px]'>
+      <div class="tw-text-left tw-font-bold max-md:tw-text-[17px] md:tw-text-[20px]" style="color: {{ block.settings.title_color }};">
+        {{ block.settings.heading }}
+      </div>
+        <div class='tw-mt-[12px] max-md:tw-text-[12px] md:tw-text-[14px] tw-leading-[1.5]' style="color: {{ block.settings.content_color }};">
+          {{ block.settings.row_content }}
+        </div>
+      </div>
+    
+  {% endif %}
+  
+  {% schema %}
+  {
+    "name": "ZZ Video Img Item",
+    "class": "zz-video-img-item",
+    "settings": [
+      {
+        "type": "text",
+        "id": "video_url_pc",
+        "label": "Video url PC",
+        "info": "使用cdn视频时，填写视频url。防止大屏幕视频模糊"
+      },
+      {
+        "type": "video",
+        "id": "video_pc",
+        "label": "Video"
+      },
+      {
+        "type": "image_picker",
+        "id": "poster_pc",
+        "label": "Poster"
+      },
+      {
+        "type": "video",
+        "id": "video_mb",
+        "label": "Video(Mobile)"
+      },
+      {
+        "type": "image_picker",
+        "id": "poster_mb",
+        "label": "Poster(Mobile)"
+      },
+      {
+        "type": "checkbox",
+        "id": "has_title_and_content",
+        "label": "是否有标题与内容",
+        "default": true
+      },
+      {
+        "type": "text",
+        "id": "heading",
+        "label": "标题",
+        "visible_if": "{{ block.settings.has_title_and_content == true }}"
+      },
+      {
+        "type": "color",
+        "id": "title_color",
+        "default": "#ffffff",
+        "label": "标题颜色",
+        "visible_if": "{{ block.settings.has_title_and_content == true }}"
+      },
+      {
+        "type": "richtext",
+        "id": "row_content",
+        "label": "description",
+        "visible_if": "{{ block.settings.has_title_and_content == true }}"
+      },
+      {
+        "type": "color",
+        "id": "content_color",
+        "default": "#B2B2B2",
+        "label": "内容颜色",
+        "visible_if": "{{ block.settings.has_title_and_content == true }}"
+      },
+      {
+        "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": "ZZ Video Img Item"
+      },
+    ]
+  }
+  {% endschema %}
+  
+  {% if block.settings.has_link %}
+    <script>
+      document.addEventListener('DOMContentLoaded', (event) => {
+        const btn = document.getElementsByClassName('{{ media_class }}')
+        if(btn && btn[0]) {
+          {% if block.settings.function_type == 'link_map' %}
+            if(window.bindSiteJump) {
+              bindSiteJump(btn[0], {{ block.settings.links | json }})
+            }
+          {% else %}
+            // 监听点击事件
+            btn[0].addEventListener('click', (event) => {
+              event.preventDefault();
+              window.location.href = '{{ block.settings.url }}';
+            })
+          {% endif %}
+        }
+  
+      })
+    </script>
+  {% endif %}
+  

package/blocks/zz-video-img-list.liquid

@@ -0,0 +1,165 @@
+{% assign block_size = block.blocks.size %}
+
+
+
+<style>
+  #shopify-block-{{block.id}} {
+    background: {{ block.settings.bg_color }};
+    width: 100%;
+
+    box-sizing: border-box;
+    overflow: hidden;
+    position: relative;
+  }
+  #shopify-block-{{block.id}} .zz-video-img-list-swiper {
+    width: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+    height: fit-content;
+    position: relative;
+    letter-spacing: 0;
+  }
+ 
+  
+  #shopify-block-{{block.id}} .swiper-button-next:after,
+  #shopify-block-{{block.id}} .swiper-button-prev:after {
+    display: none;
+  }
+
+  @media screen and (max-width: 750px) {
+    #shopify-block-{{block.id}} .swiper-button-next,
+    #shopify-block-{{block.id}} .swiper-button-prev {
+      display: none;
+    }
+  }
+  @media screen and (min-width: 750px) {
+   
+    
+    #shopify-block-{{block.id}} .swiper-button-next,
+    #shopify-block-{{block.id}} .swiper-button-prev {
+      width: 48px;
+      height: 48px;
+    }
+    #shopify-block-{{block.id}} .swiper-button-prev {
+      left: 20px;
+      top: 50%;
+      right: unset;
+      transform:translateY(-50%);
+    }
+    #shopify-block-{{block.id}} .swiper-button-next {
+      right: 20px;
+      left: unset;
+      top: 50%;
+      transform:translateY(-50%);
+    }
+    #shopify-block-{{block.id}} .swiper-button-next.swiper-button-disabled, #shopify-block-{{block.id}} .swiper-button-prev.swiper-button-disabled {
+      display: none;
+    }
+  
+  }
+
+</style>
+
+
+ 
+  <div 
+    class='zz-video-img-list-swiper zz-video-img-list-swiper-{{ block.id }}'
+  >
+    <div class='zz-swiper-wrapper swiper-wrapper'>
+      {% content_for 'blocks' %}
+    </div>
+
+    <!-- If we need navigation buttons -->
+    <div class='swiper-button-prev {% if block_size <= 3 %} tw-hidden {% endif %} max-md:tw-hidden'>
+
+        {% render 'zz-prev-next-blur-icon', type: 'prev', color_type: block.settings.prev_next_type %}
+    </div>
+    <div class='swiper-button-next {% if block_size <= 3 %} tw-hidden {% endif %} max-md:tw-hidden'>
+      {% render 'zz-prev-next-blur-icon', type: 'next', color_type: block.settings.prev_next_type %}
+    </div>
+
+  </div>
+
+<script>
+  
+  document.addEventListener('DOMContentLoaded', function () {
+    const videoNum = {{ block_size }};
+    const block = document.getElementById(
+      'shopify-block-{{block.id}}'
+    );
+    let isDesktop = window.innerWidth > 750;
+    const swiperWrapper = block.querySelector('.zz-swiper-wrapper');
+    // 获取当前 swiper-wrapper 下面 所有 第一层 div 
+    const swiperSlides = swiperWrapper.querySelectorAll(':scope > div');
+    // 给每个 swiper-slide 添加 class swiper-slide
+    swiperSlides.forEach(slide => {
+      slide.classList.add('swiper-slide');
+    });
+
+    const prevIcon = block.querySelector('.swiper-button-prev');
+    const nextIcon = block.querySelector('.swiper-button-next');
+
+    let progressTimer = null;
+    const swiperClassName = '.zz-video-img-list-swiper-{{ block.id }}';
+    const videoImgListSwiper = new Swiper(swiperClassName, {
+      slidesPerView: "auto",
+      initialSlide: isDesktop ? 1 : 0,
+      centeredSlides: true,
+      spaceBetween: isDesktop ? 24 : 8,
+      navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+      },
+      effect: 'slide',
+      on: {
+        slideChangeTransitionEnd: function (e) {
+           console.log('slideChangeTransitionEnd', e.activeIndex);
+           {% comment %} if (e.activeIndex < 1) {
+            videoImgListSwiper.slideTo(videoNum - 1, 0);
+           } else if(e.activeIndex > videoNum - 1) {
+            videoImgListSwiper.slideTo(0, 0);
+           } else {
+
+           } {% endcomment %}
+
+        },
+      }
+    });
+  });
+</script>
+
+{% schema %}
+{
+  "name": "Full Screen Swiper",
+  "class": "zz-video-img-list-swiper-block",
+  "settings": [
+    {
+      "type": "color",
+      "id": "bg_color",
+      "default": "#000000",
+      "label": "背景色"
+    },
+   
+    {
+      "type": "select",
+      "id": "prev_next_type",
+      "label": "prev next 颜色",
+      "options": [
+        { "value": "dark", "label": "黑色" },
+        { "value": "light", "label": "白色" },
+      ],
+      "default": "light"
+    },
+  ],
+  "blocks": [
+    {
+      "type": "zz-video-img-item",
+    }
+  ],
+  "presets": [
+    {
+      "name": "ZZ Video Img List",
+    },
+  ]
+}
+{% endschema %}

package/blocks/zz-video-swiper-perview.liquid

@@ -45,7 +45,7 @@
   #shopify-block-{{block.id}} .swiper-button-prev:after {
     display: none;
   }
-  #shopify-section-{{section.id}} .swiper-button-next.swiper-button-disabled, #shopify-section-{{section.id}} .swiper-button-prev.swiper-button-disabled {
+  #shopify-block-{{block.id}} .swiper-button-next.swiper-button-disabled, #shopify-block-{{block.id}} .swiper-button-prev.swiper-button-disabled {
     opacity: 0.5;
   }
 

package/package.json

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

package/sections/zz-navigation-tab-v3.liquid

@@ -335,7 +335,9 @@
     width: 100%;
     background-color: {{ section.settings.background_color }};
   }
-  
+  body {
+    overflow-x: hidden;
+  }
   #shopify-section-{{ section.id }} .zz-navigation-mobile-tab {
     
   }

package/snippets/zz-img-md.liquid

@@ -0,0 +1,44 @@
+{% comment %}
+  pc_image: pc 端图片
+  mb_image: 移动端图片
+  image_alt: 图片描述
+  class_name: 增加类名
+  close_lazy: 是否关闭懒加载 true 关闭 false 开启
+  pc_width: pc 端宽度, 做图片尺寸优化
+  mb_width: 移动端宽度, 做图片尺寸优化
+{% endcomment %}
+{%- assign pc_width = pc_width | default: 1800 -%}
+{%- assign mb_width = mb_width | default: 800 -%}
+
+{%- assign pc_classes = class_name | append: ' max-md:tw-hidden tw-w-full tw-h-auto tw-object-cover' -%}
+{%- assign mb_classes = class_name | append: ' md:tw-hidden tw-w-full tw-h-auto tw-object-cover' -%}
+
+{%- if close_lazy == true -%}
+  {%- assign lazy_load = 'eager' -%}
+{%- else -%}
+  {%- assign lazy_load = 'lazy' -%}
+{%- endif -%}
+
+{%- if pc_image -%}
+{{
+  pc_image
+  | image_url: width: pc_width
+  | image_tag:
+    alt: image_alt,
+    class: pc_classes,
+    widths: '800, 1000, 1200, 1500, 1800 2000',
+    loading: lazy_load
+}}
+{%- endif -%}
+{%- if mb_image -%}
+{{
+  mb_image
+  | image_url: width: mb_width
+  | image_tag:
+    alt: image_alt,
+    class: mb_classes,
+    widths: '400, 600, 800',
+    loading: lazy_load
+}}
+{%- endif -%}
+

package/snippets/zz-prev-next-blur-icon.liquid

@@ -0,0 +1,36 @@
+{% comment %}
+  type: 类型 prev | next
+  color_type: 颜色类型 dark | light
+  class_name: 增加类名
+{% endcomment %}
+{% if type == 'prev' %}
+  <div class="tw-cursor-pointer {% if color_type == 'light' %} tw-bg-white/20 {% else %} tw-bg-black/20 {% endif %} tw-backdrop-blur-[10px] tw-rounded-[50%] max-lg:tw-w-[36px] max-lg:tw-h-[36px] lg:tw-w-[48px] lg:tw-h-[48px] tw-flex tw-justify-center tw-items-center">
+    <div class="lg:tw-w-[24px] lg:tw-h-[24px] tw-w-[18px] tw-h-[18px]">
+      {% if color_type == 'light' %}
+        <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M7 12L14.0711 4.92893L14.0608 7.11487L9.17571 12L14.0711 16.8718L14.0711 19.0711L7 12Z" fill="white"/>
+          </svg>          
+      {% else %}
+        <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M7 12L14.0711 4.92893L14.0608 7.11487L9.17571 12L14.0711 16.8718L14.0711 19.0711L7 12Z" fill="black"/>
+        </svg>          
+      {% endif %}
+    </div>
+  </div>
+  
+{% else %}
+  <div class="tw-cursor-pointer {% if color_type == 'light' %} tw-bg-white/20 {% else %} tw-bg-black/20 {% endif %} tw-backdrop-blur-[10px] tw-rounded-[50%] max-lg:tw-w-[36px] max-lg:tw-h-[36px] lg:tw-w-[48px] lg:tw-h-[48px] tw-flex tw-justify-center tw-items-center">
+    <div class="lg:tw-w-[24px] lg:tw-h-[24px] tw-w-[18px] tw-h-[18px]">
+      {% if color_type == 'light' %}
+        <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M17 12L9.92893 4.92893L9.93916 7.11487L14.8243 12L9.92893 16.8718L9.92893 19.0711L17 12Z" fill="white"/>
+          </svg>          
+                  
+      {% else %}
+        <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M17 12L9.92893 4.92893L9.93916 7.11487L14.8243 12L9.92893 16.8718L9.92893 19.0711L17 12Z" fill="black"/>
+          </svg>
+      {% endif %}
+    </div>
+  </div>
+{% endif %}