zz-shopify-components 0.0.1-beta.1

package/blocks/zz-responsive-width-image.liquid

@@ -0,0 +1,219 @@
+{% schema %}
+{
+  "name": "Responsive Width Image",
+  "class": "responsive-width-image",
+  "settings": [
+    {
+      "type": "header",
+      "content": "PC端设置"
+    },
+    {
+      "type": "image_picker",
+      "id": "desktop_image",
+      "label": "PC端图片"
+    },
+    {
+      "type": "number",
+      "id": "desktop_width_xl",
+      "label": "PC端宽度 大屏xl屏幕",
+      "default": 800,
+      "info": "单位：px"
+    },
+    {
+      "type": "number",
+      "id": "desktop_width_lg",
+      "label": "PC端宽度 中等屏lg屏幕",
+      "default": 600,
+      "info": "单位：px"
+    },
+    {
+      "type": "number",
+      "id": "desktop_border_radius",
+      "label": "PC端圆角",
+      "default": 16,
+      "info": "单位：px"
+    },
+    {
+      "type": "header",
+      "content": "移动端设置"
+    },
+    {
+      "type": "image_picker",
+      "id": "mobile_image",
+      "label": "移动端图片"
+    },
+    {
+      "type": "select",
+      "id": "mb_width_type",
+      "label": "移动端宽度类型",
+      "options": [
+        { "value": "mb_use_padding", "label": "使用内边距限制" },
+        { "value": "mb_use_parent_ratio", "label": "父级比例限制" },
+        { "value": "mb_use_width_px", "label": "宽度限制PX" }
+      ],
+      "default": "mb_use_padding"
+    },
+    {
+      "type": "number",
+      "id": "mobile_padding_x",
+      "label": "移动端左右内边距",
+      "default": 0,
+      "info": "单位：px",
+      "visible_if": "{{ block.settings.mb_width_type == 'mb_use_padding' }}"
+    },
+    {
+      "type": "range",
+      "id": "mobile_width",
+      "min": 0,
+      "max": 100,
+      "step": 1,
+      "unit": "%",
+      "label": "移动端占父容器的百分比，单位%",
+      "default": 100,
+      "visible_if": "{{ block.settings.mb_width_type == 'mb_use_parent_ratio' }}"
+    },
+    {
+      "type": "number",
+      "id": "mb_width_px",
+      "label": "移动端宽度 宽度限制PX",
+      "default": 100,
+      "info": "单位：px",
+       "visible_if": "{{ block.settings.mb_width_type == 'mb_use_width_px' }}"
+    },
+    {
+      "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 image_class = 'zz-link-' | append: block.id %}
+
+  <div class="responsive-width-container tw-w-full tw-box-border {{ image_class }}">
+    {% render 'zz-img',
+      pc_image: block.settings.desktop_image,
+      mb_image: block.settings.mobile_image,
+      image_alt: block.settings.alt | escape,
+      class_name: 'responsive-width-image',
+    %}
+
+
+  </div>
+
+
+<style>
+ 
+  #shopify-block-{{ block.id }} .responsive-width-container {
+    box-sizing: border-box;
+    overflow: hidden;
+    {% if block.settings.has_link %}
+      cursor: pointer;
+    {% endif %}
+
+  }
+
+  @media screen and (max-width: 1023px) {
+    #shopify-block-{{ block.id }} {
+      {% if block.settings.mb_width_type == 'mb_use_padding' %}
+        width: 100%;
+      {% elsif block.settings.mb_width_type == 'mb_use_parent_ratio' %}
+        width: {{ block.settings.mobile_width }}%
+      {% elsif block.settings.mb_width_type == 'mb_use_width_px' %}
+        width: {{ block.settings.mb_width_px }}px;
+      {% endif %}
+      
+    }
+    #shopify-block-{{ block.id }} .responsive-width-container {
+      border-radius: {{ block.settings.mobile_border_radius }}px;
+      {% if block.settings.mb_width_type == 'mb_use_padding' %}
+        padding: 0 {{ block.settings.mobile_padding_x }}px;
+      {% endif %}
+    }
+  
+  }
+  @media screen and (min-width: 1024px) {
+    #shopify-block-{{ block.id }} .responsive-width-container {
+      padding: 0px;
+      width: {{ block.settings.desktop_width_lg }}px;
+      border-radius: {{ block.settings.desktop_border_radius }}px;
+    }
+  }
+  @media screen and (min-width: 1280px) {
+    #shopify-block-{{ block.id }} .responsive-width-container {
+      width: {{ block.settings.desktop_width_xl }}px;
+    }
+  }
+
+</style>
+
+{% if block.settings.has_link %}
+  <script>
+    document.addEventListener('DOMContentLoaded', (event) => {
+      const btn = document.getElementsByClassName('{{ image_class }}')
+      if(btn && btn[0]) {
+        {% if block.settings.function_type == 'link_map' %}
+          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-responsive-width-video.liquid

@@ -0,0 +1,163 @@
+{% schema %}
+{
+  "name": "Responsive Width Video",
+  "class": "responsive-width-video",
+  "settings": [
+    {
+      "type": "header",
+      "content": "PC端设置"
+    },
+    {
+      "type": "text",
+      "id": "video_url_pc",
+      "label": "Video url PC",
+      "info": "使用cdn视频时，填写视频url。防止大屏幕视频模糊"
+    },
+    {
+      "type": "video",
+      "id": "video_pc",
+      "label": "PC端视频"
+    },
+    {
+      "type": "image_picker",
+      "id": "poster_pc",
+      "label": "PC端视频 封面"
+    },
+
+    {
+      "type": "number",
+      "id": "desktop_width_xl",
+      "label": "PC端宽度 大屏xl屏幕",
+      "default": 800,
+      "info": "单位：px"
+    },
+    {
+      "type": "number",
+      "id": "desktop_width_lg",
+      "label": "PC端宽度 中等屏lg屏幕",
+      "default": 600,
+      "info": "单位：px"
+    },
+    {
+      "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": "checkbox",
+      "id": "mb_use_padding",
+      "label": "是否使用内边距限制宽度",
+      "default": true
+    },
+    {
+      "type": "number",
+      "id": "mobile_padding_x",
+      "label": "移动端左右内边距",
+      "default": 0,
+      "info": "单位：px",
+      "visible_if": "{{ block.settings.mb_use_padding == true }}"
+    },
+    {
+      "type": "range",
+      "id": "mobile_width",
+      "min": 0,
+      "max": 100,
+      "step": 1,
+      "unit": "%",
+      "label": "移动端占父容器的百分比，单位%",
+      "default": 100,
+      "visible_if": "{{ block.settings.mb_use_padding == false }}"
+    },
+    {
+      "type": "number",
+      "id": "mobile_border_radius",
+      "label": "移动端圆角",
+      "default": 10,
+      "info": "单位：px"
+    },
+   
+  ],
+  "presets": [
+    {
+      "name": "宽度响应式视频",
+     
+    }
+  ]
+}
+{% endschema %}
+
+
+  <div class="content-video-container tw-box-border tw-overflow-hidden">
+    {% 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',
+      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: 'tw-w-full tw-h-auto',
+      autoplay: true,
+      loop: true,
+      muted: true
+    %}
+   
+  </div>
+
+
+<style>
+ 
+  #shopify-block-{{ block.id }} .content-video-container {
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+
+  @media screen and (max-width: 1023px) {
+    #shopify-block-{{ block.id }} {
+      {% if block.settings.mb_use_padding %}
+        width: 100%;
+      {% else %}
+        width: {{ block.settings.mobile_width }}%
+      {% endif %}
+    }
+    #shopify-block-{{ block.id }} .content-video-container {
+      border-radius: {{ block.settings.mobile_border_radius }}px;
+      {% if block.settings.mb_use_padding %}
+        padding: 0 {{ block.settings.mobile_padding_x }}px;
+      {% endif %}
+    }
+  
+  }
+  @media screen and (min-width: 1024px) {
+    #shopify-block-{{ block.id }} .content-video-container {
+      padding: 0px;
+      width: {{ block.settings.desktop_width_lg }}px;
+      border-radius: {{ block.settings.desktop_border_radius }}px;
+    }
+  }
+  @media screen and (min-width: 1280px) {
+    #shopify-block-{{ block.id }} .content-video-container {
+      width: {{ block.settings.desktop_width_xl }}px;
+    }
+  }
+
+</style>

package/blocks/zz-scroll-animate-bg-text.liquid

@@ -0,0 +1,265 @@
+{% schema %}
+{
+  "name": "scroll animate bg text",
+  "class": "scroll-animate-bg-text",
+  "settings": [
+    {
+      "type": "color_background",
+      "id": "background_color",
+      "label": "背景颜色",
+      "default": "rgba(0,0,0,0)"
+    },
+    {
+      "type": "image_picker",
+      "id": "desktop_image",
+      "label": "PC端图片"
+    },
+   
+    {
+      "type": "image_picker",
+      "id": "mobile_image",
+      "label": "移动端图片"
+    },
+    {
+      "type": "richtext",
+      "id": "pc_title",
+      "label": "PC标题内容 (PC Title Content)",
+      "default": "<p>这里是标题</p>"
+    },
+    {
+      "type": "richtext",
+      "id": "mb_title",
+      "label": "移动标题内容 (Mobile Title Content)",
+      
+    },
+    {
+      "type": "select",
+      "id": "tag",
+      "label": "标题等级 (Heading Tag)",
+      "options": [
+        { "value": "h2", "label": "二级标题 (H2)" },
+        { "value": "h3", "label": "三级标题 (H3)" },
+        { "value": "h4", "label": "四级标题 (H4)" },
+        { "value": "h5", "label": "五级标题 (H5)" },
+      ],
+      "default": "h2"
+    },
+  
+    {
+      "type": "select",
+      "id": "pc_align",
+      "label": "标题 PC对齐方式",
+      "options": [
+        { "value": "left", "label": "左对齐 (Left)" },
+        { "value": "center", "label": "居中对齐 (Center)" },
+        { "value": "right", "label": "右对齐 (Right)" }
+      ],
+      "default": "center"
+    },
+    {
+      "type": "select",
+      "id": "mobile_align",
+      "label": "标题 移动对齐方式",
+      "options": [
+        { "value": "left", "label": "左对齐 (Left)" },
+        { "value": "center", "label": "居中对齐 (Center)" },
+        { "value": "right", "label": "右对齐 (Right)" }
+      ],
+      "default": "center"
+    },
+    {
+      "type": "range",
+      "id": "mb_top",
+      "min": 0,
+      "max": 100,
+      "step": 1,
+      "unit": "%",
+      "label": "移动端标题距离顶部高度百分比，单位%",
+      "default": 20
+    },
+      
+      {
+        "type": "color",
+        "id": "text_color",
+        "label": "文字颜色",
+        "default": "#000000"
+      },
+  
+
+  ],
+  "presets": [
+    {
+      "name": "滚动背景放大文字动画"
+    }
+  ]
+}
+{% endschema %}
+
+<div class="sticky-section">
+  <div class="image-container tw-relative tw-w-full tw-h-full">
+    <div class="zz-scroll-animate-bg-image tw-w-full tw-h-full">
+      {% render 'zz-img',
+        pc_image: block.settings.desktop_image,
+        mb_image: block.settings.mobile_image,
+        image_alt: block.settings.alt | escape,
+        class_name: 'tw-w-full tw-h-full tw-object-cover',
+      %}
+
+    </div>
+    
+    <div class="text-overlay tw-absolute tw-w-full">
+      {% case block.settings.tag %}
+      {% when 'h2' %}
+        {% render 'zz-h2', 
+          title: block.settings.pc_title, 
+          title_mb: block.settings.mb_title | default: block.settings.pc_title,
+          title_color: block.settings.text_color,
+
+          class_name: 'scroll-animate-bg-title'
+        %}
+      {% when 'h3' %}
+        {% render 'zz-h3', 
+          title: block.settings.pc_title, 
+          title_mb: block.settings.mb_title | default: block.settings.pc_title,
+          title_color: block.settings.text_color,
+          class_name: 'scroll-animate-bg-title'
+        
+        %}
+      {% when 'h4' %}
+          {% render 'zz-h4', 
+            title: block.settings.pc_title, 
+            title_mb: block.settings.mb_title | default: block.settings.pc_title,
+            title_color: block.settings.text_color,
+            class_name: 'scroll-animate-bg-title'
+          %}
+      {% when 'h5' %}
+        {% render 'zz-h5', 
+          title: block.settings.pc_title, 
+          title_mb: block.settings.mb_title | default: block.settings.pc_title,
+          title_color: block.settings.text_color,
+          class_name: 'scroll-animate-bg-title'
+        %}
+    {% endcase %}
+
+    </div>
+  </div>
+</div>
+
+
+
+
+   
+
+<style>
+ 
+  
+  #shopify-block-{{ block.id }} {
+    height: 150vh;
+    width: 100%;
+    position: relative;
+    background-color: {{ block.settings.background_color }};
+  }
+  #shopify-block-{{ block.id }} .sticky-section {
+    position: sticky;
+    width: 100%;
+    top: 0;
+    height: 100vh; 
+  }
+  #shopify-block-{{ block.id }} .scroll-animate-bg-title {
+    text-align: center;
+  }
+
+  @media screen and (max-width: 1023px) {
+    #shopify-block-{{ block.id }} {
+      
+    }
+    #shopify-block-{{ block.id }} .text-overlay {
+      position: absolute;
+      top: {{ block.settings.mb_top }}%;
+      left: 50%;
+      transform: translateX(-50%);
+      opacity: 0;
+      transition: opacity 0.2s linear;
+      max-width: 90%;
+      pointer-events: none;
+    }
+  
+  }
+  @media screen and (min-width: 1024px) {
+    #shopify-block-{{ block.id }} {
+      
+    }
+    #shopify-block-{{ block.id }} .text-overlay {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%,-50%);
+      max-width: 70%;
+    }
+  }
+ 
+
+</style>
+
+
+<script>
+  
+
+  document.addEventListener('DOMContentLoaded', function(){
+    const block = document.getElementById('shopify-block-{{ block.id }}');
+    const image = block.querySelector('.zz-scroll-animate-bg-image');
+    const text = block.querySelector('.text-overlay');
+    let scrollListener = null;
+    function clamp(v, min = 0, max = 1) {
+      return Math.max(min, Math.min(v, max));
+    }
+
+    function updateOnScroll() {
+      console.log('updateOnScroll');
+      const rect = block.getBoundingClientRect();
+      const screenH = window.innerHeight;
+      const containerHeight = block.offsetHeight; // 150vh
+
+      // 滚动进度（0 ~ 150vh）
+      const scrollProgress = clamp(screenH - rect.top, 0, containerHeight);
+
+      // 1️⃣ scale 阶段：0 → 100vh
+      const scaleP = clamp(scrollProgress / screenH);
+      const scale = 0.6 + 0.4 * scaleP;
+      image.style.transform = `scale(${scale})`;
+
+      // 2️⃣ opacity 阶段：100vh → 150vh
+      const opacityP = clamp((scrollProgress - screenH) / (containerHeight - screenH));
+      text.style.opacity = opacityP;
+    }
+
+    // 创建 Intersection Observer 来监听 block 的可见性
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          // block 进入视口，添加 scroll 监听器
+          if (!scrollListener) {
+            scrollListener = updateOnScroll;
+            window.addEventListener('scroll', scrollListener);
+            window.addEventListener('resize', scrollListener);
+            console.log('Scroll listener added');
+          }
+        } else {
+          // block 离开视口，移除 scroll 监听器
+          if (scrollListener) {
+            window.removeEventListener('scroll', scrollListener);
+            window.removeEventListener('resize', scrollListener);
+            scrollListener = null;
+            console.log('Scroll listener removed');
+          }
+        }
+      });
+    }, {
+      threshold: 0 // 只要有任何部分进入视口就触发
+    });
+
+    observer.observe(block);
+    updateOnScroll();
+  });
+</script>
+

package/blocks/zz-scroll-cover.liquid

@@ -0,0 +1,64 @@
+{% schema %}
+{
+  "name": "Scroll Cover Block",
+  "class": "zz-scroll-cover-block",
+  "settings": [
+    {
+      "type": "color_background",
+      "id": "background_color",
+      "label": "背景颜色",
+      "default": "rgba(0,0,0,0)"
+    },
+   
+  ],
+  "blocks": [
+    {
+        "type": "zz-flex-layout-bg-block",
+    }
+  ],
+  "presets": [
+    {
+      "name": "滚动覆盖视图切换",
+    },
+  ]
+}
+{% endschema %}
+
+<style>
+  #shopify-block-{{ block.id }} .zz-scroll-cover-block-container {
+    width: 100%;
+    position: relative;
+    height: 200vh;
+  }
+  #shopify-block-{{ block.id }} .zz-scroll-cover-sticky-box {
+    position: sticky;
+      top: 0;
+      height: 100vh;
+      z-index: 10;
+  }
+  #shopify-block-{{ block.id }} .zz-scroll-cover-absolute-box {
+    position: absolute;
+      top: 100vh;
+      height: 100vh;
+      width: 100%;
+      z-index: 11;
+  }
+  
+</style>
+
+<div class="zz-scroll-cover-block-container">
+    {% content_for 'blocks' %}
+</div>
+<script>
+  const block = document.getElementById('shopify-block-{{ block.id }}');
+  const container = block.querySelector('.zz-scroll-cover-block-container');
+  const subBlcoks = container.querySelectorAll(':scope > div');
+    // 给每个 swiper-slide 添加 class swiper-slide
+    subBlcoks.forEach((block,index) => {
+      if(index === 0){
+        block.classList.add('zz-scroll-cover-sticky-box');
+      } else {
+        block.classList.add('zz-scroll-cover-absolute-box');
+      }
+    });
+</script>