zz-shopify-components 0.0.27 → 0.0.28-beta.2

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

@@ -1,269 +1,269 @@
-{% 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": "ZZ Flex Layout Section"
-    },
-    {
-      "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>
+{% 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": "ZZ Flex Layout Section"
+    },
+    {
+      "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>