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

package/blocks/zz-title.liquid

@@ -1,287 +1,287 @@
-{% 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": "Title"
-    },
-    {
-      "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>
+{% 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": "Title"
+    },
+    {
+      "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>