zz-shopify-components 0.0.1-beta.1

package/sections/zz-flex-layout-section.liquid

@@ -0,0 +1,266 @@
+{% schema %}
+{
+  "name": "ZZ Flex Layout Section",
+  "tag": "section",
+  "settings": [
+    {
+      "type": "color_background",
+      "id": "background_color",
+      "label": "背景颜色",
+      "default": "transparent"
+    },
+    {
+      "type": "select",
+      "id": "animation",
+      "label": "子元素动画",
+      "options": [
+        { "value": "none-animation", "label": "无动画" },
+        { "value": "fade-in-box", "label": "按序从下往上显示" },
+        { "value": "fade-in-from-left", "label": "按序从左进入显示" },
+        { "value": "fade-in-from-right", "label": "按序从右进入显示" },
+        { "value": "slow-reveal", "label": "跟随页面滚动缓慢显示" }
+      ],
+      "default": "none-animation"
+    },
+    {
+      "type": "header",
+      "content": "💻 PC端布局设置"
+    },
+  
+    {
+      "type": "select",
+      "id": "pc_direction",
+      "label": "PC方向 (Direction)",
+      "options": [
+        { "value": "row", "label": "横向 (Horizontal)" },
+        { "value": "column", "label": "纵向 (Vertical)" },
+        { "value": "row-reverse", "label": "横向反向 (Horizontal Reverse)" },
+        { "value": "column-reverse", "label": "纵向反向 (Vertical Reverse)" }
+      ],
+      "default": "column"
+    },
+    {
+      "type": "number",
+      "id": "pc_gap",
+      "label": "区块间距 (Gap)",
+      "default": 0
+    },
+    
+    {
+      "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": "flex-start"
+    },
+    {
+      "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": "number",
+      "id": "pc_padding_top",
+      "label": "PC端上内边距 (px)",
+      "default": 80
+    },
+    {
+      "type": "number",
+      "id": "pc_padding_bottom",
+      "label": "PC端下内边距 (px)",
+      "default": 80
+    },
+    {
+      "type": "checkbox",
+      "id": "pc_full_width",
+      "label": "是否全屏展示",
+      "default": false
+    },
+    {
+      "type": "number",
+      "id": "pc_xl_width",
+      "label": "XL屏幕内容区域宽度 (px)",
+      "default": 1200,
+      "info": "非全屏展示时有效",
+      "visible_if": "{{ section.settings.pc_full_width == false }}"
+    },
+    {
+      "type": "number",
+      "id": "pc_lg_width",
+      "label": "LG屏幕内容区域宽度 (vw)",
+      "default": 90,
+      "info": "非全屏展示时有效",
+      "visible_if": "{{ section.settings.pc_full_width == false }}"
+    },
+    {
+      "type": "header",
+      "content": "📱 移动端布局设置"
+    },
+    
+    {
+      "type": "select",
+      "id": "mobile_direction",
+      "label": "移动方向 (Direction)",
+      "options": [
+        { "value": "row", "label": "横向 (Horizontal)" },
+        { "value": "column", "label": "纵向 (Vertical)" },
+        { "value": "row-reverse", "label": "横向反向 (Horizontal Reverse)" },
+        { "value": "column-reverse", "label": "纵向反向 (Vertical Reverse)" }
+      ],
+      "default": "column"
+    },
+    {
+      "type": "number",
+      "id": "mobile_gap",
+      "label": "移动区块间距 (Gap)",
+      "default": 0
+    },
+    {
+      "type": "select",
+      "id": "mobile_justify",
+      "label": "移动主轴对齐 (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": "flex-start"
+    },
+    {
+      "type": "select",
+      "id": "mobile_align",
+      "label": "移动交叉轴对齐 (Align Items)",
+      "options": [
+        { "value": "flex-start", "label": "起始对齐 (Flex Start)" },
+        { "value": "center", "label": "居中对齐 (Center)" },
+        { "value": "flex-end", "label": "末尾对齐 (Flex End)" }
+      ],
+      "default": "center"
+    },
+    {
+      "type": "number",
+      "id": "mobile_padding_top",
+      "label": "移动端上内边距 (px)",
+      "default": 40
+    },
+    {
+      "type": "number",
+      "id": "mobile_padding_bottom",
+      "label": "移动端下内边距 (px)",
+      "default": 40
+    },
+    {
+      "type": "number",
+      "id": "mobile_padding_x",
+      "label": "移动端左右内边距",
+      "default": 20,
+      "info": "单位：px"
+    },
+    {
+      "type": "number",
+      "id": "top_offset",
+      "label": "向上偏移量",
+      "default": 0,
+      "info": "单位：px，正数,首屏时候会用到"
+    },
+
+    {
+      "type": "text",
+      "id": "module_name",
+      "label": "模块id",
+      "info": "用于定位到本模块"
+    },
+  ],
+  "blocks": [
+    {
+        "type": "@theme",
+    }
+  ],
+  "presets": [
+    {
+      "name": "弹性布局容器",
+      "blocks": [
+        {
+          "type": "zz-title",
+          "settings": {
+            "pc_title": "<p>Block容器，添加Blcok拼搭组件</p>",
+            "mb_title": "<p>Block容器，添加Blcok拼搭组件</p>",
+
+          }
+        }
+      ]
+    }
+  ]
+}
+{% endschema %}
+
+<style>
+  #shopify-section-{{ section.id }} {
+    background-color: {{ section.settings.background_color }};
+    {% if section.settings.top_offset != 0 %}
+      margin-top: -{{ section.settings.top_offset }}px;
+    {% endif %}
+    {% comment %} {% if section.settings.is_overflow_hidden %}
+      overflow-x: hidden;
+    {% endif %} {% endcomment %}
+  }
+  
+  #shopify-section-{{ section.id }} .responsive-section-layout {
+    display: flex;
+    flex-direction: {{ section.settings.mobile_direction }};
+    justify-content: {{ section.settings.mobile_justify }};
+    align-items: {{ section.settings.mobile_align }};
+    gap: {{ section.settings.mobile_gap }}px;
+    padding-top: {{ section.settings.mobile_padding_top }}px;
+    padding-bottom: {{ section.settings.mobile_padding_bottom }}px;
+    padding-left: {{ section.settings.mobile_padding_x }}px;
+    padding-right: {{ section.settings.mobile_padding_x }}px;
+  }
+
+  @media (min-width: 1024px) {
+    #shopify-section-{{ section.id }} .responsive-section-layout {
+      flex-direction: {{ section.settings.pc_direction }};
+      justify-content: {{ section.settings.pc_justify }};
+      align-items: {{ section.settings.pc_align }};
+      gap: {{ section.settings.pc_gap }}px;
+      padding-top: {{ section.settings.pc_padding_top }}px;
+      padding-bottom: {{ section.settings.pc_padding_bottom }}px;
+      padding-left: 0px;
+      padding-right: 0px;
+      {% if section.settings.pc_full_width %}
+        width: 100%;
+      {% else %}
+        width: {{ section.settings.pc_lg_width }}vw;
+        margin: 0 auto;
+      {% endif %}
+    }
+  }
+
+  @media (min-width: 1280px) {
+    #shopify-section-{{ section.id }} .responsive-section-layout {
+      {% unless section.settings.pc_full_width %}
+        width: {{ section.settings.pc_xl_width }}px;
+      {% endunless %}
+    }
+  }
+</style>
+
+<div 
+  class="responsive-section-layout {{ section.settings.animation }}" 
+  {% if section.settings.module_name != blank %}data-zz-module-name="{{ section.settings.module_name }}"{% endif %}>
+    {% content_for 'blocks' %}
+</div>

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

@@ -0,0 +1,403 @@
+
+{% schema %}
+{
+  "name": "Navigation Tab V3",
+  "class": "zz-navigation-tab-section",
+  "settings": [
+    {
+      "type": "color_background",
+      "id": "background_color",
+      "label": "背景颜色",
+      "default": "#000000"
+    },
+    {
+      "type": "image_picker",
+      "id": "icon",
+      "label": "icon 图标"
+    },
+    {
+      "type": "text",
+      "id": "btn_text",
+      "label": "按钮文字",
+      "default": "Buy Now"
+    },
+    {
+      "type": "select",
+      "id": "btn_function_type",
+      "label": "功能类型",
+      "options": [
+        {
+          "value": "link",
+          "label": "链接"
+        },
+        {
+          "value": "link_map",
+          "label": "多国家映射"
+        },
+      ],
+      "default": "link"
+    },
+    {
+      "type": "url",
+      "id": "url",
+      "label": "按钮链接",
+      "visible_if": "{{ section.settings.btn_function_type == 'link' }}"
+    },
+    {
+      "type": "textarea",
+      "id": "links",
+      "label": "Sites Link Map",
+      "info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开（ 冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接                    EG: Canada: https://hoverair.com/   default: https://hoverair.com/ ",
+      "visible_if": "{{ section.settings.btn_function_type == 'link_map' }}"
+    },
+    {
+      "type": "text",
+      "id": "buy_now_click_event_class_name",
+      "label": "buy now 点击事件统计 classname",
+    },
+
+
+  ],
+  "blocks": [
+
+    {
+      "type": "module_name",
+      "name": "模块名称",
+      "settings": [
+        {
+          "type": "text",
+          "id": "text",
+          "label": "模块名称",
+        },
+        {
+          "type": "text",
+          "id": "module_name",
+          "label": "模块id",
+          "info": "用于定位模块"
+        },
+        {
+          "type": "color",
+          "id": "text_color",
+          "label": "文字颜色",
+          "default": "#000000"
+        },
+       
+      ]
+    },
+
+  ],
+  "presets": [
+    {
+      "name": "模块导航定位tab栏 V3",
+    },
+
+  ]
+}
+{% endschema %}
+
+{% assign btn_class = 'zz-button' | append: section.id %}
+
+<div class="tw-w-full tw-px-8">
+  <div class="zz-navigation-pc-tab max-lg:tw-hidden lg:tw-h-[64px] tw-flex tw-items-center tw-justify-between tw-max-w-[1660px] lg:tw-px-[20px] tw-w-full tw-mx-auto">
+    <img 
+      class="tw-w-[134px] tw-h-[12px]"
+      src="{{ section.settings.icon | image_url: width: 200 }}" alt="{{ section.settings.icon.alt }}" width="134" height="12">
+    <div class="zz-navigation-pc-item-box tw-flex tw-items-center  tw-overflow-x-scroll tw-ml-[40px] tw-pr-[60px]">
+      {% for block in section.blocks %}
+        <div class="pc-tab-item tw-flex-shrink-0 tw-px-[30px]">
+          
+            <span 
+              class="zz-navigation-tab-item-text tw-cursor-pointer tw-text-[#9E9E9E] tw-text-[14px] tw-leading-[14px] tw-font-[400]"
+               data-target="{{ block.settings.module_name }}"
+            >{{ block.settings.text }}</span>
+       
+        </div>
+        {% unless forloop.last %}
+          <div class="pc-tab-item-last tw-w-[1px] tw-h-[16px] tw-bg-[#9E9E9E]">&nbsp;</div>
+        {% endunless %}
+      {% endfor %}
+    </div>
+      <div class="tw-flex-shrink-0 tw-relative">
+        <div class="cover-box tw-absolute tw-top-0 tw-left-[-50px] tw-w-[50px] tw-h-full">&nbsp;</div>
+        {% render 'zz-button',
+          href: section.settings.url,
+          type: 'primary',
+          color: 'white',
+          text: section.settings.btn_text,
+          size: 'medium',
+          class_name: btn_class
+      
+        %}
+      </div>
+  
+  
+  </div>
+</div>
+
+<div class="zz-navigation-mobile-tab lg:tw-hidden tw-h-[52px] tw-flex tw-items-center tw-justify-between tw-px-8">
+  <div class="mb-navigation-box-item zz-navigation-mb-item-box tw-flex tw-items-center tw-gap-[24px] tw-pr-[120px]  tw-h-[52px] tw-overflow-x-scroll">
+    {% for block in section.blocks %}
+      <div class="pc-tab-item tw-flex-shrink-0">
+        
+          <span 
+            class="zz-navigation-tab-item-text tw-cursor-pointer tw-text-[#9E9E9E] tw-text-[13px] tw-leading-[13px] tw-font-[400]"
+             data-target="{{ block.settings.module_name }}"
+          >{{ block.settings.text }}</span>
+     
+      </div>
+    {% endfor %}
+  </div>
+  <div class="tw-flex-shrink-0 tw-relative">
+    <div class="cover-box tw-absolute tw-top-0 tw-left-[-40px] tw-w-[40px] tw-h-full">&nbsp;</div>
+    {% render 'zz-button',
+      href: section.settings.url,
+      type: 'primary',
+      color: 'white',
+      text: section.settings.btn_text,
+      size: 'small',
+      class_name: btn_class
+    %}
+  </div>
+</div>
+
+  <script>
+    document.addEventListener('DOMContentLoaded', (event) => {
+      const isDesktop = window.innerWidth > 1024;
+
+      function scrollPaginationToCenter() {
+        // 获取当前section
+        const section = document.getElementById(
+          'shopify-section-{{section.id}}'
+        );
+        const paginationContainer = isDesktop ? section.querySelector('.zz-navigation-pc-item-box') : section.querySelector('.zz-navigation-mb-item-box');
+        const activeBullet = paginationContainer.querySelector('.zz-navigation-active-text');
+  
+        if (activeBullet) {
+          const containerWidth = paginationContainer.offsetWidth;
+          const bulletLeft = activeBullet.offsetLeft;
+          const bulletWidth = activeBullet.offsetWidth;
+  
+          // 计算需要滚动的位置，使当前bullet居中
+          const scrollPosition = bulletLeft - (containerWidth / 2) + (bulletWidth / 2);
+  
+          paginationContainer.scrollTo({
+            left: scrollPosition,
+            behavior: 'smooth'
+          });
+        }
+      }
+
+      const currentSection = document.getElementById(
+        'shopify-section-{{section.id}}'
+      );
+      // 获取通知栏以及顶部弹窗 调整sticky的top。id="IPTipsBox"，id="zz-quick-announcement-bar-container"
+      const iptipsBox = document.getElementById('IPTipsBox');
+      const pcDropdowns = document.querySelectorAll('.menu-wrapper');
+      const tabs = currentSection.querySelectorAll('.zz-navigation-tab-item-text');
+      
+      const sections = document.querySelectorAll('[data-zz-module-name]');//document.querySelectorAll('.zz-navigation-moudule');
+      let showPcDropdowns = []
+      // 点击 tab 滚动
+      tabs.forEach(tab => {
+        tab.addEventListener('click', () => {
+          const id = tab.dataset.target;
+          const target = document.querySelector(`[data-zz-module-name="${id}"]`);
+          const headerHeight = isDesktop ? 64 : 44;
+          const offsetTop = target.offsetTop - headerHeight;
+          scrollPaginationToCenter();
+          window.scrollTo(0, offsetTop);
+          dataLayer.push({
+            event: "141_productpage_click_header_tab_item",
+            timestamp: new Date().toISOString(),
+            header_module_name: id,
+          });
+        });
+      });
+  
+      // 监听滚动，高亮 tab
+      const observerOptions = {
+        root: null,
+        rootMargin: '0px 0px 0px 0px',
+        threshold: 0.1
+      };
+  
+      const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            const id = entry.target.dataset.zzModuleName;
+            tabs.forEach(tab => {
+                tab.classList.toggle('zz-navigation-active-text', tab.dataset.target === id);
+                scrollPaginationToCenter();
+
+            });
+          }
+          
+        });
+      }, observerOptions);
+      const headerObserver = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+          if (entry.target == iptipsBox) {
+            
+            if (entry.isIntersecting) {
+              // 计算iptipsBox的高度，并设置sticky的top
+              const iptipsBoxHeight = entry.target.offsetHeight;
+              if(isDesktop) {
+                currentSection.style.top = iptipsBoxHeight + 'px';
+              } else {
+                // 后期移动端要加上导航栏的高度 44
+                currentSection.style.top = iptipsBoxHeight  + 44 + 'px';
+              }
+              
+            } else {
+              
+               if(isDesktop) {
+                currentSection.style.top = '0px';
+               } else {
+                currentSection.style.top = '44px';
+               }
+            }
+          } else {
+            if(entry.isIntersecting) {
+              if(!showPcDropdowns.includes(entry.target)) {
+                showPcDropdowns.push(entry.target);
+              }
+            } else {
+              showPcDropdowns = showPcDropdowns.filter(dropdown => dropdown !== entry.target);
+            }
+            if(isDesktop) {
+              if(showPcDropdowns.length > 0) {
+                currentSection.style.zIndex = '490';
+              } else {
+                currentSection.style.zIndex = '501';
+              }
+            }
+          }
+          
+        });
+      }, {
+        root: null,
+        rootMargin: '0px 0px 0px 0px',
+        threshold: 0
+      });
+
+  
+      sections.forEach(section => observer.observe(section));
+      headerObserver.observe(iptipsBox);
+      pcDropdowns.forEach(dropdown => headerObserver.observe(dropdown));
+      function handlePCTouchScroll () {
+        const el = document.querySelector('.zz-navigation-pc-item-box');
+        let isDown = false;
+        let startX, scrollLeft;
+
+        el.addEventListener('mousedown', e => {
+          isDown = true;
+          el.classList.add('dragging');
+          startX = e.pageX;
+          scrollLeft = el.scrollLeft;
+        });
+
+        el.addEventListener('mouseleave', () => isDown = false);
+        el.addEventListener('mouseup', () => isDown = false);
+        el.addEventListener('mousemove', e => {
+          if (!isDown) return;
+          e.preventDefault();
+          const x = e.pageX;
+          const walk = x - startX;
+          el.scrollLeft = scrollLeft - walk;
+        });
+
+      }
+      handlePCTouchScroll();
+
+      const btns = document.querySelectorAll('.{{ btn_class }}');
+      btns.forEach(btn => {
+        btn.addEventListener('click', (event) => {
+          dataLayer.push({
+            event: "{{ section.settings.buy_now_click_event_class_name }}",
+            timestamp: new Date().toISOString(),
+          });
+        });
+        {% if section.settings.btn_function_type == 'link_map' %}
+          bindSiteJump(btn, {{ section.settings.links | json }})
+        {% endif %} 
+      })
+
+    })
+  </script>
+<style>
+  #shopify-section-{{ section.id }} {
+    position: sticky;
+    width: 100%;
+    background-color: {{ section.settings.background_color }};
+  }
+  
+  #shopify-section-{{ section.id }} .zz-navigation-mobile-tab {
+    
+  }
+  #shopify-section-{{ section.id }} .zz-navigation-pc-tab {
+    width: 100%;
+    box-sizing: border-box;
+
+    
+  }
+  #shopify-section-{{ section.id }} .cover-box {
+    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
+
+  }
+  #shopify-section-{{ section.id }}  .zz-navigation-active-text {
+    font-weight: 700;
+    color: #FFFFFF;
+  }
+  #shopify-section-{{ section.id }}  .zz-navigation-mobile-tab {
+    border-bottom: 0.5px solid #FFFFFF26;
+  }
+  #shopify-section-{{ section.id }} .{{ btn_class }} {
+    flex-shrink: 0;
+  }
+  @media screen and (min-width: 1024px) {
+    #shopify-section-{{ section.id }} {
+      z-index: 501;
+      top: 0;
+    }
+
+  }
+   @media screen and (max-width: 1024px) {
+    #shopify-section-{{ section.id }} {
+      z-index: 499;
+      top: 44px;
+    }
+    #shopify-section-{{ section.id }} .{{ btn_class }} {
+      height: 28px;
+      padding: 0 16px;
+    }
+  } 
+
+  .zz-navigation-pc-item-box {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE 10+ */
+  }
+  html {
+    scroll-behavior: auto;
+  }
+  .zz-navigation-pc-item-box::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+    display: none; /* Chrome/Safari/Edge */
+  }
+  .zz-navigation-mb-item-box {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE 10+ */
+  }
+  
+  .zz-navigation-mb-item-box::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+    display: none; /* Chrome/Safari/Edge */
+  }
+
+ 
+</style>