zz-shopify-components 0.0.1-beta.1

package/blocks/zz-button.liquid

@@ -0,0 +1,189 @@
+
+{% schema %}
+{
+  "name": "Button",
+  "settings": [
+    {
+      "type": "text",
+      "id": "text",
+      "label": "按钮文字",
+      "default": "按钮"
+    },
+    {
+      "type": "select",
+      "id": "function_type",
+      "label": "功能类型",
+      "options": [
+        {
+          "value": "link",
+          "label": "链接"
+        },
+        {
+          "value": "link_map",
+          "label": "多国家映射"
+        },
+      ],
+      "default": "link"
+    },
+    {
+      "type": "url",
+      "id": "url",
+      "label": "按钮链接",
+      "visible_if": "{{ block.settings.function_type == 'link' }}"
+    },
+    {
+      "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' }}"
+    },
+    {
+      "type": "select",
+      "id": "type",
+      "label": "按钮类型",
+      "options": [
+        {
+          "value": "primary",
+          "label": "primary"
+        },
+        {
+          "value": "default",
+          "label": "default"
+        },
+        {
+          "value": "round",
+          "label": "round"
+        },
+        {
+          "value": "link",
+          "label": "link"
+        },
+        {
+          "value": "primary-round",
+          "label": "primary-round"
+        },
+      ],
+      "default": "primary"
+    },
+    {
+      "type": "select",
+      "id": "color",
+      "label": "按钮颜色",
+      "options": [
+        {
+          "value": "black",
+          "label": "black"
+        },
+        {
+          "value": "white",
+          "label": "white"
+        },
+        {
+          "value": "orange",
+          "label": "orange"
+        }
+      ],
+      "default": "black",
+    },
+    {
+      "type": "select",
+      "id": "size",
+      "label": "按钮大小",
+      "options": [
+        {
+          "value": "large",
+          "label": "large"
+        },
+        {
+          "value": "medium",
+          "label": "medium"
+        },
+        {
+          "value": "small",
+          "label": "small"
+        }
+      ],
+      "default": "medium"
+    },
+    {
+      "type": "select",
+      "id": "postfix_icon",
+      "label": "后缀图标",
+      "options": [
+        { "value": "none", "label": "不展示" },
+        { "value": "download", "label": "下载" },
+        { "value": "arrow-right", "label": "向右箭头" }
+      ],
+      "default": "none"
+    },
+    {
+      "type": "number",
+      "id": "icon_size",
+      "label": "图标大小(px)",
+      "default": 15
+    },
+    {
+      "type": "number",
+      "id": "icon_left_margin",
+      "label": "图标左边距(px)",
+      "default": 0
+    },
+    {
+      "type": "number",
+      "id": "icon_right_margin",
+      "label": "图标右边距(px)",
+      "default": 0
+    },
+    {
+      "type": "text",
+      "id": "click_event_class_name",
+      "label": "点击事件统计 classname",
+    }
+  ],
+  "presets": [
+    {
+      "name": "按钮"
+    }
+  ]
+}
+{% endschema %}
+
+
+{% assign btn_class = 'zz-button' | append: block.id %}
+
+{% render 'zz-button',
+  href: block.settings.url,
+  type: block.settings.type,
+  color: block.settings.color,
+  text: block.settings.text,
+  size: block.settings.size,
+  postfix_icon: block.settings.postfix_icon,
+  icon_size: block.settings.icon_size,
+  icon_left_margin: block.settings.icon_left_margin,
+  icon_right_margin: block.settings.icon_right_margin,
+  class_name: btn_class
+%}
+
+
+
+
+  <script>
+    document.addEventListener('DOMContentLoaded', (event) => {
+      const btn = document.getElementsByClassName('{{ btn_class }}')
+      if(btn && btn[0]) {
+        btn[0].addEventListener('click', (event) => {
+          dataLayer.push({
+            event: "{{ block.settings.click_event_class_name }}",
+            timestamp: new Date().toISOString(),
+          });
+        });
+        {% if block.settings.function_type == 'link_map' %}
+          bindSiteJump(btn[0], {{ block.settings.links | json }})
+        {% endif %}
+      }
+
+    })
+  </script>
+
+

package/blocks/zz-content-description-html.liquid

@@ -0,0 +1,199 @@
+{% schema %}
+{
+  "name": "Content Text Html",
+  "class": "zz-content-description-html",
+  "settings": [
+    {
+      "type": "color",
+      "id": "text_color",
+      "label": "Text Color",
+      "default": "#000000"
+    },
+    {
+      "type": "color",
+      "id": "highlight_color",
+      "label": "Highlight Color",
+      "default": "#000000"
+    },
+    {
+      "type": "color",
+      "id": "link_color",
+      "label": "Link Color",
+      "default": "#0066cc"
+    },
+    {
+      "type": "header",
+      "content": "PC Settings"
+    },
+    {
+      "type": "html",
+      "id": "pc_content",
+      "label": "PC Content",
+      "default": "<p>Enter your content here</p>"
+    },
+    {
+      "type": "range",
+      "id": "pc_font_size",
+      "min": 12,
+      "max": 48,
+      "step": 1,
+      "unit": "px",
+      "label": "PC Font Size",
+      "default": 16
+    },
+ 
+    {
+      "type": "select",
+      "id": "pc_text_align",
+      "label": "PC Text Alignment",
+      "options": [
+        {
+          "value": "left",
+          "label": "Left"
+        },
+        {
+          "value": "center",
+          "label": "Center"
+        },
+        {
+          "value": "right",
+          "label": "Right"
+        }
+      ],
+      "default": "left"
+    },
+    {
+      "type": "header",
+      "content": "Mobile Settings"
+    },
+    {
+      "type": "html",
+      "id": "mobile_content",
+      "label": "Mobile Content",
+      "default": "<p>Enter your mobile content here</p>"
+    },
+    {
+      "type": "range",
+      "id": "mobile_font_size",
+      "min": 8,
+      "max": 36,
+      "step": 1,
+      "unit": "px",
+      "label": "Mobile Font Size",
+      "default": 12
+    },
+    {
+      "type": "select",
+      "id": "mobile_text_align",
+      "label": "Mobile Text Alignment",
+      "options": [
+        {
+          "value": "left",
+          "label": "Left"
+        },
+        {
+          "value": "center",
+          "label": "Center"
+        },
+        {
+          "value": "right",
+          "label": "Right"
+        }
+      ],
+      "default": "left"
+    },
+    {
+      "type": "select",
+      "id": "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"
+    },
+    {
+      "type": "checkbox",
+      "id": "use_margin",
+      "label": "是否设置上下外边距",
+      "default": false
+    },
+    {
+      "type": "number",
+      "id": "mobile_margin_top",
+      "label": "移动上外边距 (Margin Top)",
+      "default": 0,
+      "visible_if": "{{ block.settings.use_margin == true }}"
+    },
+    {
+      "type": "number",
+      "id": "mobile_margin_bottom",
+      "label": "移动下外边距 (Margin Bottom)",
+      "default": 0,
+      "visible_if": "{{ block.settings.use_margin == true }}"
+    },
+    {
+      "type": "number",
+      "id": "pc_margin_top",
+      "label": "PC上外边距 (Margin Top)",
+      "default": 0,
+      "visible_if": "{{ block.settings.use_margin == true }}"
+    },
+    {
+      "type": "number",
+      "id": "pc_margin_bottom",
+      "label": "PC下外边距 (Margin Bottom)",
+      "default": 0,
+      "visible_if": "{{ block.settings.use_margin == true }}"
+    },
+  ],
+  "presets": [ 
+    {
+      "name": "内容描述 html",
+      "settings": {
+        "pc_content": "<p>This is a detailed product description <strong> highlights the key features. </strong></p>",
+        "pc_font_size": 16,
+        "text_color": "#333333",
+        "link_color": "#0066cc",
+        "pc_text_align": "left",
+        "mobile_content": "<p>This is a detailed product description <strong> highlights the key features. </strong></p>",
+        "mobile_font_size": 14,
+        "mobile_text_align": "left"
+      }
+    }
+  ]
+}
+{% endschema %}
+
+
+  {% render 'zz-content-text',
+    text: block.settings.pc_content,
+    mb_text: block.settings.mobile_content,
+    text_color: block.settings.text_color,
+    highlight_color: block.settings.highlight_color,
+    link_color: block.settings.link_color,
+    pc_font_size: block.settings.pc_font_size,
+    mobile_font_size: block.settings.mobile_font_size,
+    pc_text_align: block.settings.pc_text_align,
+    mobile_text_align: block.settings.mobile_text_align,
+    class_name: block.settings.animation
+%}
+
+{% if block.settings.use_margin %}
+  <style>
+    #shopify-block-{{ block.id }} {
+      margin-top: {{ block.settings.mobile_margin_top }}px;
+      margin-bottom: {{ block.settings.mobile_margin_bottom }}px;
+    }
+    @media (min-width: 1024px) {
+      #shopify-block-{{ block.id }} {
+        margin-top: {{ block.settings.pc_margin_top }}px;
+        margin-bottom: {{ block.settings.pc_margin_bottom }}px;
+      }
+    }
+  
+  </style>
+{% endif %}

package/blocks/zz-content-description.liquid

@@ -0,0 +1,200 @@
+{% schema %}
+{
+  "name": "Content Text",
+  "class": "zz-content-description",
+  "settings": [
+    {
+      "type": "color",
+      "id": "text_color",
+      "label": "Text Color",
+      "default": "#000000"
+    },
+    {
+      "type": "header",
+      "content": "PC Settings"
+    },
+    {
+      "type": "richtext",
+      "id": "pc_content",
+      "label": "PC Content",
+      "default": "<p>Enter your content here</p>"
+    },
+
+    {
+      "type": "range",
+      "id": "pc_font_size",
+      "min": 12,
+      "max": 48,
+      "step": 1,
+      "unit": "px",
+      "label": "PC Font Size",
+      "default": 16
+    },
+    {
+      "type": "text",
+      "id": "pc_font_line_height",
+      "label": "PC Font Line Height",
+      "default": "1.5"
+    },
+    {
+      "type": "select",
+      "id": "pc_text_align",
+      "label": "PC Text Alignment",
+      "options": [
+        {
+          "value": "left",
+          "label": "Left"
+        },
+        {
+          "value": "center",
+          "label": "Center"
+        },
+        {
+          "value": "right",
+          "label": "Right"
+        }
+      ],
+      "default": "left"
+    },
+
+    {
+      "type": "header",
+      "content": "Mobile Settings"
+    },
+    {
+      "type": "richtext",
+      "id": "mobile_content",
+      "label": "Mobile Content",
+      "default": "<p>Enter your mobile content here</p>"
+    },
+    {
+      "type": "range",
+      "id": "mobile_font_size",
+      "min": 8,
+      "max": 36,
+      "step": 1,
+      "unit": "px",
+      "label": "Mobile Font Size",
+      "default": 12
+    },
+    {
+      "type": "text",
+      "id": "mobile_font_line_height",
+      "label": "Mobile Font Line Height",
+      "default": "1.5"
+    },
+    {
+      "type": "select",
+      "id": "mobile_text_align",
+      "label": "Mobile Text Alignment",
+      "options": [
+        {
+          "value": "left",
+          "label": "Left"
+        },
+        {
+          "value": "center",
+          "label": "Center"
+        },
+        {
+          "value": "right",
+          "label": "Right"
+        }
+      ],
+      "default": "left"
+    },
+
+    {
+      "type": "select",
+      "id": "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"
+    },
+    {
+      "type": "checkbox",
+      "id": "use_margin",
+      "label": "是否设置上下外边距",
+      "default": false
+    },
+    {
+      "type": "number",
+      "id": "mobile_margin_top",
+      "label": "移动上外边距 (Margin Top)",
+      "default": 0,
+      "visible_if": "{{ block.settings.use_margin == true }}"
+    },
+    {
+      "type": "number",
+      "id": "mobile_margin_bottom",
+      "label": "移动下外边距 (Margin Bottom)",
+      "default": 0,
+      "visible_if": "{{ block.settings.use_margin == true }}"
+    },
+    {
+      "type": "number",
+      "id": "pc_margin_top",
+      "label": "PC上外边距 (Margin Top)",
+      "default": 0,
+      "visible_if": "{{ block.settings.use_margin == true }}"
+    },
+    {
+      "type": "number",
+      "id": "pc_margin_bottom",
+      "label": "PC下外边距 (Margin Bottom)",
+      "default": 0,
+      "visible_if": "{{ block.settings.use_margin == true }}"
+    },
+  ],
+  "presets": [ 
+    {
+      "name": "内容描述",
+      "settings": {
+        "pc_content": "<p>This is a detailed product description </p>",
+        "pc_font_size": 16,
+        "text_color": "#333333",
+        "pc_text_align": "left",
+        "mobile_content": "<p>This is a detailed product description</p>",
+        "mobile_font_size": 14,
+        "mobile_text_align": "left"
+      }
+    }
+  ]
+}
+{% endschema %}
+
+{% render 'zz-content-text',
+  text: block.settings.pc_content,
+  mb_text: block.settings.mobile_content,
+  text_color: block.settings.text_color,
+  pc_font_size: block.settings.pc_font_size,
+  mobile_font_size: block.settings.mobile_font_size,
+  pc_text_align: block.settings.pc_text_align,
+  mobile_text_align: block.settings.mobile_text_align,
+  pc_font_line_height: block.settings.pc_font_line_height,
+  mobile_font_line_height: block.settings.mobile_font_line_height,
+  class_name: block.settings.animation
+%}
+
+{% if block.settings.use_margin %}
+  <style>
+    #shopify-block-{{ block.id }} {
+      margin-top: {{ block.settings.mobile_margin_top }}px;
+      margin-bottom: {{ block.settings.mobile_margin_bottom }}px;
+    }
+    @media (min-width: 1024px) {
+      #shopify-block-{{ block.id }} {
+        margin-top: {{ block.settings.pc_margin_top }}px;
+        margin-bottom: {{ block.settings.pc_margin_bottom }}px;
+      }
+    }
+  
+  </style>
+{% endif %}
+