zz-shopify-components 0.12.1-beta.1 → 0.13.0

package/assets/zz-components.css

@@ -6,7 +6,9 @@
   border-radius: 32px;
   background: #F5F5F6;
 }
-
+html, body {
+  overflow-x: hidden;
+}
 .zz-radio-tabs-black.zz-radio-tabs {
   background: #FFFFFF14;
 }

package/blocks/zz-color-title-left.liquid

@@ -110,5 +110,8 @@
   #shopify-block-{{ block.id }} .color-title span{
     color: {{ block.settings.sub_text_color }} !important;
   }
+  #shopify-block-{{ block.id }} .color-title {
+    padding-left: 2 rem;
+  }
 
 </style>

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

@@ -162,7 +162,14 @@
     {
       "type": "number",
       "id": "pc_fixed_height",
-      "label": "PC端固定高度",
+      "label": "PC端LG固定高度",
+      "default": 0,
+      "info": "默认自适应高度，单位：px",
+    },
+    {
+      "type": "number",
+      "id": "pc_xl_fixed_height",
+      "label": "PC端XL固定高度",
       "default": 0,
       "info": "默认自适应高度，单位：px",
     },
@@ -482,6 +489,15 @@
         transform: translateX(-50%);
       {% endif %}
     }
+    {% if block.settings.pc_xl_fixed_height != 0 %}
+      #shopify-block-{{ block.id }} .flex-layout-image {
+        height: {{ block.settings.pc_xl_fixed_height }}px;
+      }
+      #shopify-block-{{ block.id }} .flex-layout-video {
+        height: {{ block.settings.pc_xl_fixed_height }}px;
+        object-fit: cover;
+      }
+    {% endif %}
   }
   {% if block.settings.full_screen_bg %}
     #shopify-block-{{ block.id }} {

package/blocks/zz-show-more-information.liquid

@@ -0,0 +1,280 @@
+{% schema %}
+{
+  "name": "Show More Information",
+  "class": "zz-show-more-information",
+  "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": "select",
+      "id": "pc_align",
+      "label": "PC横向对齐",
+      "options": [
+        { "value": "flex-start", "label": "起始对齐 (Flex Start)" },
+        { "value": "center", "label": "居中对齐 (Center)" },
+        { "value": "flex-end", "label": "末尾对齐 (Flex End)" },
+        { "value": "stretch", "label": "拉伸对齐 (Stretch)" }
+      ],
+      "default": "center"
+    },
+    {
+      "type": "number",
+      "id": "pc_padding_x",
+      "label": "PC端左右内边距",
+      "default": 0,
+      "info": "单位：px"
+    },
+    {
+      "type": "number",
+      "id": "pc_padding_top",
+      "label": "PC端顶部内边距 (px)",
+      "default": 0
+    },
+    {
+      "type": "number",
+      "id": "pc_padding_bottom",
+      "label": "PC端底部内边距 (px)",
+      "default": 0
+    },
+    {
+      "type": "number",
+      "id": "pc_border_radius",
+      "label": "PC端圆角 (px)",
+      "default": 0
+    },
+    {
+      "type": "checkbox",
+      "id": "pc_full_width",
+      "label": "是否全屏展示",
+      "default": true
+    },
+    {
+      "type": "number",
+      "id": "pc_xl_width",
+      "label": "XL屏幕内容区域宽度 (px)",
+      "default": 1200,
+      "visible_if": "{{ block.settings.pc_full_width == false }}",
+      "info": "非全屏展示时有效"
+    },
+    {
+      "type": "number",
+      "id": "pc_lg_width",
+      "label": "LG屏幕内容区域宽度 (vw)",
+      "default": 90,
+      "visible_if": "{{ block.settings.pc_full_width == false }}",
+      "info": "非全屏展示时有效"
+    },
+    {
+      "type": "header",
+      "content": "📱 移动端布局设置"
+    },
+    {
+      "type": "number",
+      "id": "mobile_gap",
+      "label": "移动区块间距 (Gap)",
+      "default": 20
+    },
+    {
+      "type": "select",
+      "id": "mobile_align",
+      "label": "移动横向对齐",
+      "options": [
+        { "value": "flex-start", "label": "起始对齐 (Flex Start)" },
+        { "value": "center", "label": "居中对齐 (Center)" },
+        { "value": "flex-end", "label": "末尾对齐 (Flex End)" },
+        { "value": "stretch", "label": "拉伸对齐 (Stretch)" }
+      ],
+      "default": "center"
+    },
+    {
+      "type": "number",
+      "id": "mobile_padding_x",
+      "label": "移动端左右内边距",
+      "default": 0,
+      "info": "单位：px"
+    },
+    {
+      "type": "number",
+      "id": "mobile_padding_top",
+      "label": "移动端顶部内边距 (px)",
+      "default": 0
+    },
+    {
+      "type": "number",
+      "id": "mobile_padding_bottom",
+      "label": "移动端底部内边距 (px)",
+      "default": 0
+    },
+    {
+      "type": "number",
+      "id": "mobile_border_radius",
+      "label": "移动端圆角 (px)",
+      "default": 0
+    },
+   
+  ],
+  "blocks": [
+    {
+        "type": "@theme",
+    }
+  ],
+  "presets": [
+    {
+      "name": "Show More Information"
+    },
+
+  ]
+}
+{% endschema %}
+
+<style>
+  #shopify-block-{{ block.id }} {
+    width: 100%;
+  }
+
+
+  #shopify-block-{{ block.id }} .zz-show-more-information-container {
+    box-sizing: border-box;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: {{ block.settings.mobile_align }};
+    gap: {{ block.settings.mobile_gap }}px;
+    background-color: {{ block.settings.background_color }};
+    padding-top: {{ block.settings.mobile_padding_top }}px;
+    padding-bottom: {{ block.settings.mobile_padding_bottom }}px;
+    padding-left: {{ block.settings.mobile_padding_x }}px;
+    padding-right: {{ block.settings.mobile_padding_x }}px;
+    border-radius: {{ block.settings.mobile_border_radius  }}px;
+    max-height: 300px;
+    overflow: hidden;
+  }
+
+  #shopify-block-{{ block.id }} .zz-show-more-information-container > * {
+    flex-shrink: 0;  /* 子元素不压缩 */
+  }
+
+  @media (min-width: 1024px) {
+    #shopify-block-{{ block.id }} .zz-show-more-information-container {
+      flex-direction: column;
+      align-items: {{ block.settings.pc_align }};
+      gap: {{ block.settings.pc_gap }}px;
+      padding-top: {{ block.settings.pc_padding_top }}px;
+      padding-bottom: {{ block.settings.pc_padding_bottom }}px;
+      padding-left: {{ block.settings.pc_padding_x }}px;
+      padding-right: {{ block.settings.pc_padding_x }}px;
+      border-radius: {{ block.settings.pc_border_radius  }}px;
+      max-height: 400px;
+      {% if block.settings.pc_full_width %}
+        width: 100%;
+      {% else %}
+        width: {{ block.settings.pc_lg_width }}vw;
+        margin: 0 auto;
+      {% endif %}
+    }
+  }
+
+  @media (min-width: 1280px) {
+    #shopify-block-{{ block.id }} .zz-show-more-information-container {
+      {% if block.settings.pc_full_width %}
+        width: 100%;
+      {% else %}
+        width: {{ block.settings.pc_xl_width }}px;
+        margin: 0 auto;
+      {% endif %}
+
+    }
+  }
+  #shopify-section-{{ section.id }} .rotate {
+    transition: all 0.3s;
+    transform: rotate(180deg);
+  }
+
+  .show-more-gradient-view {
+    background: linear-gradient(to bottom, transparent 0%, #ffffff 100%);
+    height:30px;
+    width: 100%;
+  }
+</style>
+
+<div class="zz-show-more-information-container tw-relative">
+    {% content_for 'blocks' %}
+    <div class="tw-h-[120px]">&nbsp;</div>
+    <div class="show-more-view tw-absolute tw-bottom-0 tw-left-0 tw-right-0 ">
+      <div class="show-more-gradient-view tw-h-[30px]">&nbsp;</div>
+      <div class="tw-flex tw-items-center tw-justify-center tw-h-[90px] tw-bg-white tw-mt-[-2px]">
+        <div class="show-more-view-icon tw-cursor-pointer lg:tw-w-[42px] lg:tw-h-[33px] max-lg:tw-w-[21px] max-lg:tw-h-[16px]">
+          <span class="max-lg:tw-hidden">
+           <svg width="42" height="33" viewBox="0 0 42 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+             <path d="M3.22917 2.83398L20.8911 29.5273L38.8203 2.83398" stroke="#999999" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+             </svg>
+          </span>
+          <span class="lg:tw-hidden">
+           <svg width="21" height="16" viewBox="0 0 21 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+             <path d="M1.10247 0.999999L10.2501 14.7377L19.5361 1" stroke="#999999" stroke-width="1.30211" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+             </svg>          
+          </span>
+             
+         </div>
+      </div>
+        
+    </div>
+</div>
+
+<script>
+(function() {
+  let showMoreScrollHeight = 0
+  const section = document.getElementById("shopify-section-{{ section.id }}")
+  const listBox = section.getElementsByClassName('zz-show-more-information-container')[0]
+  const showMoreImg = section.getElementsByClassName('show-more-view-icon')[0]
+
+  showMoreImg.addEventListener('click', showMore)
+
+  function showMore(el) {
+    const isMoblie = window.innerWidth < 1024
+    console.log(listBox.offsetHeight)
+    
+    if(showMoreImg.classList.contains('rotate')) {
+      showMoreImg.classList.remove("rotate")
+      if(isMoblie) {
+        listBox.style.maxHeight = '300px'
+      } else {
+        listBox.style.maxHeight = '400px'
+      }
+      setTimeout(() => {
+        window.scrollTo({
+          top: showMoreScrollHeight,
+          behavior: "smooth",
+        });
+      })
+    } else {
+      if (document.documentElement && document.documentElement.scrollTop) {
+        showMoreScrollHeight = document.documentElement.scrollTop;
+      } else if (document.body) {
+        showMoreScrollHeight = document.body.scrollTop;
+      }
+      showMoreImg.classList.add("rotate")
+      listBox.style.maxHeight = '5000px'
+    }
+  }
+  
+  // 将函数暴露到全局作用域，以便HTML中的onclick事件可以调用
+  window.showMore = showMore;
+})();
+</script>

package/blocks/zz-tag.liquid

@@ -1,13 +1,23 @@
 {% schema %}
 {
   "name": "ZZ Tag",
-  "class": "zz-tag",
+  "class": "zz-tag-block",
   "settings": [
     {
         "type": "text",
         "id": "tag",
         "label": "标签"
       },
+      {
+        "type": "select",
+        "id": "tag_type",
+        "label": "类型",
+        "options": [
+          { "value": "italic", "label": "斜体 (Italic)" },
+          { "value": "text", "label": "文字标签" },
+        ],
+        "default": "italic"
+      },
       {
         "type": "color",
         "id": "tag_color",
@@ -18,14 +28,88 @@
         "type": "color",
         "id": "tag_bg_color",
         "label": "标签背景颜色",
-        "default": "#FF7700"
+        "default": "#FF7700",
       },
       {
         "type": "color_background",
         "id": "tag_bg_color_gradient",
         "label": "标签背景颜色（渐变）",
         "default": "linear-gradient(to right, #FF7700, #FFC081)"
-      }
+      },
+      {
+        "type": "color",
+        "id": "border_color",
+        "label": "边框颜色",
+        "visible_if": "{{ block.settings.tag_type == 'text' }}"
+  
+      },
+      {
+        "type": "number",
+        "id": "pc_border_radius",
+        "label": "PC端圆角",
+        "default": 10,
+        "info": "单位：px"
+      },
+      {
+        "type": "number",
+        "id": "mobile_border_radius",
+        "label": "移动端圆角",
+        "default": 10,
+        "info": "单位：px"
+      },
+      {
+        "type": "number",
+        "id": "pc_padding_x",
+        "label": "PC端左右内边距",
+        "default": 0,
+        "info": "单位：px"
+      },
+      
+      {
+        "type": "number",
+        "id": "mobile_padding_x",
+        "label": "移动端左右内边距",
+        "default": 0,
+        "info": "单位：px"
+      },
+      {
+        "type": "number",
+        "id": "pc_padding_y",
+        "label": "PC端上下内边距",
+        "default": 0,
+        "info": "单位：px"
+      },
+      {
+        "type": "number",
+        "id": "mobile_padding_y",
+        "label": "移动端上下内边距",
+        "default": 0,
+        "info": "单位：px"
+      },
+      {
+        "type": "select",
+        "id": "font_weight",
+        "label": "Font Weight",
+        "options": [
+          {
+            "value": "400",
+            "label": "Regular"
+          },
+          {
+            "value": "500",
+            "label": "Medium"
+          },
+          {
+            "value": "600",
+            "label": "Semi Bold"
+          },
+          {
+            "value": "700",
+            "label": "Bold"
+          }
+        ],
+        "default": "500"
+      },
 
   ],
   "presets": [
@@ -41,10 +125,56 @@
   ],
 }
 {% endschema %}
-
-{% render 'zz-tag',
+{% if block.settings.tag_type == 'italic' %}
+  {% render 'zz-tag',
     tag_bg_color_gradient: block.settings.tag_bg_color_gradient,
     tag_bg_color: block.settings.tag_bg_color,
     tag_color: block.settings.tag_color,
     tag: block.settings.tag
-  %}
+  %}
+
+{% else %}
+  <div
+    class='zz-text-tag tw-leading-[1.5] '
+  >
+    {{ block.settings.tag }}
+  </div>
+{% endif %}
+
+{% if block.settings.tag_type == 'text' %}
+  <style>
+    #shopify-block-{{ block.id }} .zz-text-tag{
+      color: {{ block.settings.tag_color }};
+      background: {{ block.settings.tag_bg_color }};
+      font-weight: {{ block.settings.font_weight }};
+      border-radius: {{ block.settings.mobile_border_radius }}px;
+      padding-top: {{ block.settings.mobile_padding_y }}px;
+      padding-bottom: {{ block.settings.mobile_padding_y }}px;
+      padding-left: {{ block.settings.mobile_padding_x }}px;
+      padding-right: {{ block.settings.mobile_padding_x }}px;
+      {% if block.settings.border_color != blank %}
+        border: 1px solid {{ block.settings.border_color }};
+      {% endif %}
+      
+    }
+    @media (min-width: 1024px) {
+      #shopify-block-{{ block.id }} .zz-text-tag {
+        border-radius: {{ block.settings.pc_border_radius }}px;
+        padding-top: {{ block.settings.pc_padding_y }}px;
+        padding-bottom: {{ block.settings.pc_padding_y }}px;
+        padding-left: {{ block.settings.pc_padding_x }}px;
+        padding-right: {{ block.settings.pc_padding_x }}px;
+        {% if block.settings.border_color != blank %}
+          border: 2px solid {{ block.settings.border_color }};
+        {% endif %}
+        
+      }
+    }
+  
+  </style>
+
+  
+{% endif %}
+
+
+ 

package/package.json

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

package/sections/zz-swiper-banner.liquid

@@ -15,21 +15,33 @@
   @media (min-width: 1024px) {
     #shopify-section-{{section.id}} .swiper-banner-video-img .swiper-wrapper {
       width: 100%;
+      {% if section.settings.site == 'central' %}
       height: 660px !important;
+      {% else %}
+      height: 600px !important;
+      {% endif %}
     }
     
   }
   @media (min-width: 1440px) {
     #shopify-section-{{section.id}} .swiper-banner-video-img .swiper-wrapper {
       width: 100%;
+      {% if section.settings.site == 'central' %}
       height: 760px !important;
+      {% else %}
+      height: 660px !important;
+      {% endif %}
     }
     
   }
   @media (min-width: 1536px) {
     #shopify-section-{{section.id}} .swiper-banner-video-img .swiper-wrapper {
       width: 100%;
+      {% if section.settings.site == 'central' %}
       height: 860px !important;
+      {% else %}
+      height: 700px !important;
+      {% endif %}
     }
     
   }
@@ -126,6 +138,23 @@
 {
   "name": "Swiper Banner V3",
   "settings": [
+    {
+      "type": "select",
+      "id": "site",
+      "label": "站点选择",
+      "info": "官网比站点banner更高",
+      "options": [
+        {
+          "value": "central",
+          "label": "官网"
+        },
+        {
+          "value": "site",
+          "label": "站点"
+        }
+      ],
+      "default": "central"
+    },
     {
       "type": "range",
       "id": "padding_top",

package/snippets/zz-img-md.liquid

@@ -26,8 +26,10 @@
   | image_tag:
     alt: image_alt,
     class: pc_classes,
-    widths: '800, 1000, 1200, 1500, 1800 2000 3000 4000 5000',
-    loading: lazy_load
+    widths: '1000, 1500, 2000, 3000, 4000, 5000',
+    loading: lazy_load,
+    sizes: '8000px',
+    fetchpriority:"high"
 }}
 {%- endif -%}
 {%- if mb_image -%}
@@ -37,7 +39,9 @@
   | image_tag:
     alt: image_alt,
     class: mb_classes,
-    widths: '400, 600, 800',
-    loading: lazy_load
+    widths: '400, 800, 1200, 1500',
+    loading: lazy_load,
+    sizes: '1500px',
+    fetchpriority:"high"
 }}
 {%- endif -%}

package/snippets/zz-img.liquid

@@ -7,7 +7,7 @@
   pc_width: pc 端宽度, 做图片尺寸优化
   mb_width: 移动端宽度, 做图片尺寸优化
 {% endcomment %}
-{%- assign pc_width = pc_width | default: 4800 -%}
+{%- assign pc_width = pc_width | default: 5000 -%}
 {%- assign mb_width = mb_width | default: 1200 -%}
 
 {%- assign pc_classes = class_name | append: ' max-lg:tw-hidden tw-w-full tw-h-auto tw-object-cover' -%}
@@ -26,8 +26,10 @@
   | image_tag:
     alt: image_alt,
     class: pc_classes,
-    widths: '800, 1000, 1200, 1500, 1800 2000 3000 4000 5000',
-    loading: lazy_load
+    widths: '1000, 1500, 2000, 3000, 4000, 5000',
+    loading: lazy_load,
+    sizes: '8000px',
+    fetchpriority:"high"
 }}
 {%- endif -%}
 {%- if mb_image -%}
@@ -37,7 +39,9 @@
   | image_tag:
     alt: image_alt,
     class: mb_classes,
-    widths: '400, 600, 800 1200',
-    loading: lazy_load
+    widths: '400, 800, 1200, 1500',
+    loading: lazy_load,
+    sizes: '1500px',
+    fetchpriority:"high"
 }}
 {%- endif -%}