zz-shopify-components 0.0.1-beta.1

package/blocks/zz-flex-layout-widget.liquid

@@ -0,0 +1,318 @@
+{% schema %}
+{
+  "name": "Flex Layout Widget",
+  "class": "flex-layout-widget",
+  "settings": [
+    {
+      "type": "color_background",
+      "id": "background_color",
+      "label": "背景颜色",
+      "default": "rgba(0,0,0,0)"
+    },
+  
+    {
+      "type": "header",
+      "content": "💻 PC端布局设置"
+    },
+    {
+      "type": "range",
+      "id": "pc_width",
+      "min": 0,
+      "max": 100,
+      "step": 1,
+      "unit": "%",
+      "label": "PC端占父容器的百分比，单位%",
+      "info": "0 默认flex-1",
+      "default": 0
+    },
+    {
+      "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": "row"
+    },
+    {
+      "type": "number",
+      "id": "pc_gap",
+      "label": "区块间距 (Gap)",
+      "default": 40
+    },
+    
+    {
+      "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": 0
+    },
+    {
+      "type": "number",
+      "id": "pc_padding_bottom",
+      "label": "PC端底部内边距 (px)",
+      "default": 0
+    },
+    {
+      "type": "number",
+      "id": "pc_padding_x",
+      "label": "PC端左右内边距",
+      "default": 0,
+      "info": "单位：px"
+    },
+    {
+      "type": "range",
+      "id": "pc_border_radius",
+      "min": 0,
+      "max": 50,
+      "step": 1,
+      "unit": "px",
+      "label": "PC端圆角大小",
+      "default": 0
+    },
+    {
+      "type": "header",
+      "content": "📱 移动端布局设置"
+    },
+    {
+      "type": "range",
+      "id": "mobile_width",
+      "min": 0,
+      "max": 100,
+      "step": 1,
+      "unit": "%",
+      "label": "移动端占父容器的百分比，单位%",
+      "info": "0 默认flex-1",
+      "default": 0
+    },
+    {
+      "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": 20
+    },
+    {
+      "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_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": "range",
+      "id": "mobile_border_radius",
+      "min": 0,
+      "max": 50,
+      "step": 1,
+      "unit": "px",
+      "label": "移动端圆角大小",
+      "default": 0
+    },
+    {
+      "type": "header",
+      "content": "动画设置"
+    },
+    {
+      "type": "select",
+      "id": "child_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": "select",
+      "id": "self_animation",
+      "label": "自身动画",
+      "options": [
+        { "value": "none-animation", "label": "无动画" },
+        { "value": "fade-in-content", "label": "从下往上显示" },
+        { "value": "fade-in-from-left-content", "label": "从左往右显示" },
+        { "value": "fade-in-from-right-content", "label": "从右往左显示" },
+        { "value": "slow-reveal-content", "label": "跟随页面滚动缓慢显示" }
+      ],
+      "default": "none-animation"
+    },
+  ],
+  "blocks": [
+    {
+        "type": "@theme",
+    }
+  ],
+  "presets": [
+    {
+      "name": "弹性布局部件",
+    },
+    { 
+      "name": "上下布局，标题+内容",
+      "blocks": [
+        {
+          "type": "zz-title",
+          "settings": {
+            "pc_title": "<p>title is here</p>",
+            "mb_title": "<p>title is here</p>",
+            "tag": "h3",
+            "text_color": "#ffffff",
+          }
+        },
+        {
+          "type": "zz-content-description-html",
+          "settings": {
+            "text_color": "#b2b2b2",
+            "highlight_color": "#ffffff",
+            "link_color": "#0066cc",
+            "pc_content": "<p>normal content is here and <strong> highlight the key features </strong></p>",
+            "mobile_content": "<p>normal content is here and <strong> highlight the key features </strong></p>",
+       
+          }
+        }
+      ]
+    }
+  ]
+}
+{% endschema %}
+
+<style>
+  #shopify-block-{{ block.id }} {
+    {% if block.settings.mobile_width == 0 %}
+      width: 100%;
+      flex: 1;
+    {% else %}
+      width: {{ block.settings.mobile_width }}%;
+    {% endif %}
+  }
+  #shopify-block-{{ block.id }} .flex-layout-widget-container {
+    width: 100%;
+    display: flex;
+    flex-direction: {{ block.settings.mobile_direction }};
+    justify-content: {{ block.settings.mobile_justify }};
+    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;
+    box-sizing: border-box;
+  }
+ 
+
+  @media (min-width: 1024px) {
+    #shopify-block-{{ block.id }} {
+      {% if block.settings.pc_width == 0 %}
+        flex: 1;
+      {% else %}
+        width: {{ block.settings.pc_width }}%;
+      {% endif %}
+    }
+    #shopify-block-{{ block.id }} .flex-layout-widget-container {
+      width: 100%;
+      flex-direction: {{ block.settings.pc_direction }};
+      justify-content: {{ block.settings.pc_justify }};
+      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;
+    }
+
+  }
+
+  .flex-layout-widget-container .flex-layout-video {
+    border-radius: 10px;
+  }
+  @media screen and (min-width: 1024px) {
+    .flex-layout-widget-container .flex-layout-video {
+      border-radius: 16px;
+    }
+  }
+</style>
+
+
+<div class="flex-layout-widget-container {{ block.settings.self_animation }} {{ block.settings.child_animation }}">
+
+    {% content_for 'blocks' %}
+</div>