zz-shopify-components 0.0.1-beta.1

package/blocks/zz-tag.liquid

@@ -0,0 +1,48 @@
+
+{% schema %}
+{
+  "name": "ZZ Tag",
+  "class": "zz-tag",
+  "settings": [
+    {
+        "type": "text",
+        "id": "tag",
+        "label": "标签"
+      },
+      {
+        "type": "color",
+        "id": "tag_color",
+        "label": "标签文字颜色",
+        "default": "#000000"
+      },
+      {
+        "type": "color",
+        "id": "tag_bg_color",
+        "label": "标签背景颜色",
+        "default": "#FF7700"
+      },
+      {
+        "type": "color_background",
+        "id": "tag_bg_color_gradient",
+        "label": "标签背景颜色（渐变）",
+        "default": "linear-gradient(to right, #FF7700, #FFC081)"
+      }
+
+  ],
+  "presets": [
+    {
+      "name": "标签",
+      "settings": {
+        "tag": "HEM ™"
+      }
+    }
+  ],
+}
+{% endschema %}
+
+{% 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
+  %}

package/blocks/zz-text.liquid

@@ -0,0 +1,225 @@
+{% schema %}
+{
+  "name": "One Line Text",
+  "class": "zz-line-text",
+  "settings": [
+    {
+      "type": "text",
+      "id": "text_content",
+      "label": "Text Content",
+      "default": "Enter your content here"
+    },
+    {
+      "type": "color",
+      "id": "text_color",
+      "label": "Text Color",
+      "default": "#000000"
+    },
+    {
+      "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": "400"
+    },
+
+    {
+      "type": "header",
+      "content": "PC Settings"
+    },
+    {
+      "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": "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": "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 }}"
+    },
+    {
+      "type": "checkbox",
+      "id": "has_background",
+      "label": "是否作为背景标签",
+      "default": false
+    },
+    {
+      "type": "color_background",
+      "id": "background_color",
+      "label": "背景颜色",
+      "default": "rgba(0,0,0,0)",
+      "visible_if": "{{ block.settings.has_background == true }}"
+    },
+    {
+      "type": "number",
+      "id": "border_radius",
+      "label": "圆角",
+      "default": 10,
+      "info": "单位：px",
+      "visible_if": "{{ block.settings.has_background == true }}"
+    },
+  ],
+  "presets": [ 
+    {
+      "name": "一行文案",
+      "settings": {
+        "text_content": "一行文案",
+        "pc_font_size": 16,
+        "text_color": "#333333",
+        "pc_text_align": "left",
+        "mobile_font_size": 14,
+        "mobile_text_align": "left"
+      }
+    }
+  ]
+}
+{% endschema %}
+
+{% render 'zz-content-text',
+  text: block.settings.text_content,
+  mb_text: block.settings.text_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,
+  font_weight: block.settings.font_weight,
+  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 %}
+
+{% if block.settings.has_background %}
+  <style>
+    #shopify-block-{{ block.id }} {
+      background-color: {{ block.settings.background_color }};
+      border-radius: {{ block.settings.border_radius }}px;
+      display:flex;
+      align-items:center;
+      justify-content:center;
+      padding: 6px 16px;
+    }
+  </style>
+{% endif %}

package/blocks/zz-title.liquid

@@ -0,0 +1,284 @@
+{% schema %}
+{
+  "name": "Title",
+  "class": "zz-title",
+  "settings": [
+    {
+      "type": "richtext",
+      "id": "pc_title",
+      "label": "PC标题内容 (PC Title Content)",
+      "default": "<p>这里是标题</p>"
+    },
+    {
+      "type": "richtext",
+      "id": "mb_title",
+      "label": "移动标题内容 (Mobile Title Content)",
+      
+    },
+    {
+      "type": "select",
+      "id": "tag",
+      "label": "标题等级 (Heading Tag)",
+      "options": [
+        { "value": "h2", "label": "二级标题 (H2)" },
+        { "value": "h3", "label": "三级标题 (H3)" },
+        { "value": "h4", "label": "四级标题 (H4)" },
+        { "value": "h5", "label": "五级标题 (H5)" },
+        { "value": "h6", "label": "六级标题 (H6)" },
+      ],
+      "default": "h2"
+    },
+    {
+      "type": "select",
+      "id": "pc_font_weight",
+      "label": "PC Font Weight",
+      "options": [
+        { "value": "default", "label": "默认" },
+        { "value": "custom", "label": "自定义" }
+      ],
+      "default": "default"
+    },
+    {
+      "type": "range",
+      "id": "pc_font_weight_custom",
+      "label": "PC Font Weight Custom",
+      "min": 100,
+      "max": 900,
+      "step": 100,
+      "default": 700,
+      "visible_if": "{{ block.settings.pc_font_weight == 'custom' }}"
+    },
+    {
+        "type": "checkbox",
+        "id": "italic",
+        "label": "是否斜体 (Italic)",
+        "default": false
+      },
+      
+      {
+        "type": "color",
+        "id": "text_color",
+        "label": "文字颜色",
+        "default": "#000000"
+      },
+      {
+        "type": "text",
+        "id": "text_gradient",
+        "label": "文字渐变 (可选)"
+      },
+    {
+      "type": "header",
+      "content": "💻 PC 样式设置"
+    },
+
+    {
+      "type": "select",
+      "id": "pc_align",
+      "label": "PC对齐方式 (Text Align)",
+      "options": [
+        { "value": "left", "label": "左对齐 (Left)" },
+        { "value": "center", "label": "居中对齐 (Center)" },
+        { "value": "right", "label": "右对齐 (Right)" }
+      ],
+      "default": "left"
+    },
+    {
+      "type": "number",
+      "id": "pc_margin_top",
+      "label": "PC上外边距 (Margin Top)",
+      "default": 0
+    },
+    {
+      "type": "number",
+      "id": "pc_margin_bottom",
+      "label": "PC下外边距 (Margin Bottom)",
+      "default": 0
+    },
+    {
+      "type": "header",
+      "content": "📱 移动端样式设置"
+    },
+  
+    {
+      "type": "select",
+      "id": "mobile_align",
+      "label": "移动对齐方式 (Text Align)",
+      "options": [
+        { "value": "left", "label": "左对齐 (Left)" },
+        { "value": "center", "label": "居中对齐 (Center)" },
+        { "value": "right", "label": "右对齐 (Right)" }
+      ],
+      "default": "left"
+    },
+    {
+      "type": "number",
+      "id": "mobile_margin_top",
+      "label": "移动上外边距 (Margin Top)",
+      "default": 0
+    },
+    {
+      "type": "number",
+      "id": "mobile_margin_bottom",
+      "label": "移动下外边距 (Margin Bottom)",
+      "default": 0
+    },
+    {
+      "type": "checkbox",
+      "id": "mb_special_settings",
+      "label": "移动端特殊设置",
+      "default": false
+    },
+    {
+      "type": "range",
+      "id": "mobile_font_size",
+      "min": 8,
+      "max": 36,
+      "step": 1,
+      "unit": "px",
+      "label": "移动端字体大小",
+      "info": "移动端需要特殊设置时使用，默认根据选择标题等级自动设置",
+      "default": 28,
+      "visible_if": "{{ block.settings.mb_special_settings == true }}"
+    },
+    {
+      "type": "select",
+      "id": "mobile_font_weight",
+      "label": "移动端字体粗细",
+      "options": [
+        { "value": "default", "label": "默认" },
+        { "value": "custom", "label": "自定义" }
+      ],
+      "default": "default"
+    },
+    {
+      "type": "range",
+      "id": "mobile_font_weight_custom",
+      "label": "移动端字体粗细自定义",
+      "min": 100,
+      "max": 900,
+      "step": 100,
+      "default": 700,
+      "visible_if": "{{ block.settings.mobile_font_weight == 'custom' }}"
+    },
+    {
+      "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"
+    },
+  ],
+  "presets": [
+    {
+      "name": "标题 h2-h4"
+    }
+  ],
+}
+{% endschema %}
+
+
+{% assign animation_class = block.settings.animation | append: ' title-block' %}
+
+{% case block.settings.tag %}
+  {% when 'h2' %}
+    {% render 'zz-h2', 
+      title: block.settings.pc_title, 
+      title_mb: block.settings.mb_title | default: block.settings.pc_title,
+      title_color: block.settings.text_color,
+      title_color_gradient: block.settings.text_gradient, 
+      italic: block.settings.italic,
+      class_name: animation_class,
+      font_weight: block.settings.pc_font_weight,
+      font_weight_custom: block.settings.pc_font_weight_custom,
+      font_weight_mb: block.settings.mobile_font_weight,
+      font_weight_mb_custom: block.settings.mobile_font_weight_custom
+    %}
+  {% when 'h3' %}
+    {% render 'zz-h3', 
+      title: block.settings.pc_title, 
+      title_mb: block.settings.mb_title | default: block.settings.pc_title,
+      title_color: block.settings.text_color,
+      title_color_gradient: block.settings.text_gradient, 
+      italic: block.settings.italic,
+      class_name: animation_class,
+      font_weight: block.settings.pc_font_weight,
+      font_weight_custom: block.settings.pc_font_weight_custom,
+      font_weight_mb: block.settings.mobile_font_weight,
+      font_weight_mb_custom: block.settings.mobile_font_weight_custom
+    
+    %}
+  {% when 'h4' %}
+      {% render 'zz-h4', 
+        title: block.settings.pc_title, 
+        title_mb: block.settings.mb_title | default: block.settings.pc_title,
+        title_color: block.settings.text_color,
+        title_color_gradient: block.settings.text_gradient, 
+        italic: block.settings.italic,
+        class_name: animation_class,
+        font_weight: block.settings.pc_font_weight,
+        font_weight_custom: block.settings.pc_font_weight_custom,
+        font_weight_mb: block.settings.mobile_font_weight,
+        font_weight_mb_custom: block.settings.mobile_font_weight_custom
+      %}
+  {% when 'h5' %}
+    {% render 'zz-h5', 
+      title: block.settings.pc_title, 
+      title_mb: block.settings.mb_title | default: block.settings.pc_title,
+      title_color: block.settings.text_color,
+      title_color_gradient: block.settings.text_gradient, 
+      italic: block.settings.italic,
+      class_name: animation_class,
+      font_weight: block.settings.pc_font_weight,
+      font_weight_custom: block.settings.pc_font_weight_custom,
+      font_weight_mb: block.settings.mobile_font_weight,
+      font_weight_mb_custom: block.settings.mobile_font_weight_custom
+    %}
+  {% when 'h6' %}
+    {% render 'zz-h6', 
+      title: block.settings.pc_title, 
+      title_mb: block.settings.mb_title | default: block.settings.pc_title,
+      title_color: block.settings.text_color,
+      title_color_gradient: block.settings.text_gradient, 
+      italic: block.settings.italic,
+      class_name: animation_class,
+      font_weight: block.settings.pc_font_weight,
+      font_weight_custom: block.settings.pc_font_weight_custom,
+      font_weight_mb: block.settings.mobile_font_weight,
+      font_weight_mb_custom: block.settings.mobile_font_weight_custom
+    %}
+{% endcase %}
+
+<style>
+  #shopify-block-{{ block.id }} {
+    margin-top: {{ block.settings.mobile_margin_top }}px;
+    margin-bottom: {{ block.settings.mobile_margin_bottom }}px;
+  }
+  #shopify-block-{{ block.id }} .title-block {
+    text-align: {{ block.settings.mobile_align }};
+  }
+  
+  @media (min-width: 1024px) {
+    #shopify-block-{{ block.id }} {
+      margin-top: {{ block.settings.pc_margin_top }}px;
+      margin-bottom: {{ block.settings.pc_margin_bottom }}px;
+    }
+    #shopify-block-{{ block.id }} .title-block {
+      text-align: {{ block.settings.pc_align }};
+    }
+  }
+
+  {% if block.settings.mb_special_settings %}
+    @media (max-width: 1023px) {
+      #shopify-block-{{ block.id }} .title-block {
+        font-size: {{ block.settings.mobile_font_size }}px;
+      }
+    }
+  {% endif %}
+
+</style>

package/blocks/zz-video-button.liquid

@@ -0,0 +1,81 @@
+
+{% schema %}
+{
+  "name": "Video Button",
+  "settings": [
+    {
+      "type": "text",
+      "id": "text",
+      "label": "按钮文字",
+      "default": "按钮"
+    },
+    {
+      "type": "video",
+      "id": "video_pc",
+      "label": "视频"
+    },
+    {
+      "type": "image_picker",
+      "id": "poster_pc",
+      "label": "视频 封面"
+    },
+    {
+      "type": "select",
+      "id": "color",
+      "label": "按钮颜色",
+      "options": [
+        {
+          "value": "black",
+          "label": "black"
+        },
+        {
+          "value": "white",
+          "label": "white"
+        },
+        {
+          "value": "orange",
+          "label": "orange"
+        }
+      ],
+      "default": "white",
+    },
+    {
+      "type": "select",
+      "id": "size",
+      "label": "按钮大小",
+      "options": [
+        {
+          "value": "large",
+          "label": "large"
+        },
+        {
+          "value": "medium",
+          "label": "medium"
+        },
+        {
+          "value": "small",
+          "label": "small"
+        }
+      ],
+      "default": "medium"
+    }
+  ],
+  "presets": [
+    {
+      "name": "视频按钮",
+      "settings": {
+        "text": "watch video",
+      }
+    }
+  ]
+}
+{% endschema %}
+
+{% render 'zz-video-button',
+  video: block.settings.video_pc,
+  poster: block.settings.poster_pc,
+  color: block.settings.color,
+  text: block.settings.text,
+  size: block.settings.size
+%}
+