zz-shopify-components 0.0.21 → 0.0.22

package/blocks/zz-price-tag-mini.liquid

@@ -1,106 +1,100 @@
-{% assign product = all_products[block.settings.product] %}
-{% assign variant_id = block.settings.variant_id | times: 1 %}
-{% assign variant = product.variants | where: 'id', variant_id | first %}
-
-{% if variant %}
-  {% assign current_price = variant.price %}
-  {% assign compare_at_price = variant.compare_at_price %}
-  {% assign discount_percentage = 0 %}
-
-  {% if compare_at_price and compare_at_price > current_price %}
-    {% assign percent = current_price
-      | times: 100
-      | divided_by: compare_at_price
-    %}
-    {% assign discount_percentage = 100 | minus: percent %}
-    <span class='price-tag-mini'>
-      <span class='price-tag-mini__main'>UP TO</span
-      ><span class='price-tag-mini__main-price'>
-        <span class='price-tag-mini__main-discount'>
-          {{- discount_percentage -}}</span
-        ><span class='price-tag-mini__main-discount-off'>%off</span>
-      </span>
-    </span>
-  {% endif %}
-{% endif %}
-
-<style>
-  #shopify-block-{{ block.id }} .price-tag-mini {
-    left: 20px;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    height: 40px;
-    margin-bottom: 10px;
-    padding: 4px 4px;
-    color: #fff;
-    font-weight: bold;
-    background-color: #FC6C0F;
-    line-height: 1;
-    justify-content: start;
-    align-items: center;
-    clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
-  }
-
-  #shopify-block-{{ block.id }} .price-tag-mini__main {
-    font-size: 12px;
-  }
-  #shopify-block-{{ block.id }} .price-tag-mini__main-discount {
-    font-size: 13px;
-  }
-  #shopify-block-{{ block.id }} .price-tag-mini__main-discount-off {
-    font-size: 9px;
-  }
-
-  @media (min-width: 750px) {
-    #shopify-block-{{ block.id }} .price-tag-mini {
-      height: 54px;
-    }
-    #shopify-block-{{ block.id }} .price-tag-mini__main {
-      font-size: 16px;
-    }
-    #shopify-block-{{ block.id }} .price-tag-mini__main-discount {
-      font-size: 18px;
-    }
-    #shopify-block-{{ block.id }} .price-tag-mini__main-discount-off {
-      font-size: 12px;
-    }
-  }
-
-  #shopify-block-{{ block.id }} .price-tag-mini span {
-    position: relative;
-    z-index: 1;
-  }
-</style>
-
-{% schema %}
-{
-  "name": "Price Tag Mini",
-  "settings": [
-    {
-      "type": "product",
-      "id": "product",
-      "label": "Product",
-      "info": "选择产品"
-    },
-    {
-      "type": "text",
-      "id": "variant_id",
-      "label": "Variant ID",
-      "placeholder": "变体ID",
-      "info": "输入变体ID，变体ID可以在产品编辑页面查看"
-    },
-    {
-      "type": "checkbox",
-      "id": "show_discount_percentage_off",
-      "label": "展示 Off 后缀",
-      "default": true
-    }
-  ],
-  "presets": [
-    {
-      "name": "Price Tag Mini"
-    }
-  ]
-}
-{% endschema %}
+{% assign product = all_products[block.settings.product] %}
+{% assign variant_id = block.settings.variant_id | times: 1 %}
+{% assign variant = product.variants | where: 'id', variant_id | first %}
+
+{% if variant %}
+  {% assign current_price = variant.price %}
+  {% assign compare_at_price = variant.compare_at_price %}
+  {% assign discount_percentage = 0 %}
+
+  {% if compare_at_price and compare_at_price > current_price %}
+    {% assign percent = current_price
+      | times: 100
+      | divided_by: compare_at_price
+    %}
+    {% assign discount_percentage = 100 | minus: percent %}
+    <span class='price-tag-mini'>
+      <span class='price-tag-mini__main'>UP TO</span
+      ><span class='price-tag-mini__main-price'>
+        <span class='price-tag-mini__main-discount'>
+          {{- discount_percentage -}}</span
+        ><span class='price-tag-mini__main-discount-off'>%off</span>
+      </span>
+    </span>
+  {% endif %}
+{% endif %}
+
+<style>
+  #shopify-block-{{ block.id }} .price-tag-mini {
+    left: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: 40px;
+    margin-bottom: 10px;
+    padding: 4px 4px;
+    color: #fff;
+    font-weight: bold;
+    background-color: #FC6C0F;
+    line-height: 1;
+    justify-content: start;
+    align-items: center;
+    clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
+  }
+
+  #shopify-block-{{ block.id }} .price-tag-mini__main {
+    font-size: 12px;
+  }
+  #shopify-block-{{ block.id }} .price-tag-mini__main-discount {
+    font-size: 13px;
+  }
+  #shopify-block-{{ block.id }} .price-tag-mini__main-discount-off {
+    font-size: 9px;
+  }
+
+  @media (min-width: 750px) {
+    #shopify-block-{{ block.id }} .price-tag-mini {
+      height: 54px;
+    }
+    #shopify-block-{{ block.id }} .price-tag-mini__main {
+      font-size: 16px;
+    }
+    #shopify-block-{{ block.id }} .price-tag-mini__main-discount {
+      font-size: 18px;
+    }
+    #shopify-block-{{ block.id }} .price-tag-mini__main-discount-off {
+      font-size: 12px;
+    }
+  }
+
+  #shopify-block-{{ block.id }} .price-tag-mini span {
+    position: relative;
+    z-index: 1;
+  }
+</style>
+
+{% schema %}
+{
+  "name": "Price Tag Mini",
+  "settings": [
+    {
+      "type": "product",
+      "id": "product",
+      "label": "Product",
+      "info": "选择产品"
+    },
+    {
+      "type": "text",
+      "id": "variant_id",
+      "label": "Variant ID",
+      "placeholder": "变体ID",
+      "info": "输入变体ID，变体ID可以在产品编辑页面查看"
+    }
+  ],
+  "presets": [
+    {
+      "name": "Price Tag Mini"
+    }
+  ]
+}
+{% endschema %}

package/blocks/zz-price-tag.liquid

@@ -1,41 +1,41 @@
-{% assign product = all_products[block.settings.product] %}
-{% assign variant_id = block.settings.variant_id | times: 1 %}
-{% assign variant = product.variants | where: 'id', variant_id | first %}
-
-{% render 'zz-price-tag',
-  price: variant.price,
-  compare_at_price: variant.compare_at_price,
-  show_discount_percentage_off: block.settings.show_discount_percentage_off
-%}
-
-{% schema %}
-{
-  "name": "Price Tag",
-  "settings": [
-    {
-      "type": "product",
-      "id": "product",
-      "label": "Product",
-      "info": "选择产品"
-    },
-    {
-      "type": "text",
-      "id": "variant_id",
-      "label": "Variant ID",
-      "placeholder": "变体ID",
-      "info": "输入变体ID，变体ID可以在产品编辑页面查看"
-    },
-    {
-      "type": "checkbox",
-      "id": "show_discount_percentage_off",
-      "label": "展示 Off 后缀",
-      "default": false
-    }
-  ],
-  "presets": [
-    {
-      "name": "Price Tag"
-    }
-  ]
-}
-{% endschema %}
+{% assign product = all_products[block.settings.product] %}
+{% assign variant_id = block.settings.variant_id | times: 1 %}
+{% assign variant = product.variants | where: 'id', variant_id | first %}
+
+{% render 'zz-price-tag',
+  price: variant.price,
+  compare_at_price: variant.compare_at_price,
+  show_discount_percentage_off: block.settings.show_discount_percentage_off
+%}
+
+{% schema %}
+{
+  "name": "Price Tag",
+  "settings": [
+    {
+      "type": "product",
+      "id": "product",
+      "label": "Product",
+      "info": "选择产品"
+    },
+    {
+      "type": "text",
+      "id": "variant_id",
+      "label": "Variant ID",
+      "placeholder": "变体ID",
+      "info": "输入变体ID，变体ID可以在产品编辑页面查看"
+    },
+    {
+      "type": "checkbox",
+      "id": "show_discount_percentage_off",
+      "label": "展示 Off 后缀",
+      "default": false
+    }
+  ],
+  "presets": [
+    {
+      "name": "Price Tag"
+    }
+  ]
+}
+{% endschema %}

package/blocks/zz-ratio-image.liquid

@@ -1,182 +1,182 @@
-{% schema %}
-{
-  "name": "Ratio Image",
-  "class": "ratio-image",
-  "settings": [
-    {
-      "type": "header",
-      "content": "PC端设置"
-    },
-    {
-      "type": "image_picker",
-      "id": "desktop_image",
-      "label": "PC端图片"
-    },
-    {
-      "type": "range",
-      "id": "pc_width",
-      "min": 0,
-      "max": 100,
-      "step": 1,
-      "unit": "%",
-      "label": "PC端占父容器的百分比，单位%",
-      "default": 50
-    },
-    {
-      "type": "number",
-      "id": "desktop_border_radius",
-      "label": "PC端圆角",
-      "default": 16,
-      "info": "单位：px"
-    },
-    {
-      "type": "header",
-      "content": "移动端设置"
-    },
-    {
-      "type": "image_picker",
-      "id": "mobile_image",
-      "label": "移动端图片"
-    },
-    {
-      "type": "range",
-      "id": "mobile_width",
-      "min": 0,
-      "max": 100,
-      "step": 1,
-      "unit": "%",
-      "label": "移动端占父容器的百分比，单位%",
-      "default": 100
-    },
-    {
-      "type": "number",
-      "id": "mobile_border_radius",
-      "label": "移动端圆角",
-      "default": 10,
-      "info": "单位：px"
-    },
-    {
-      "type": "text",
-      "id": "alt",
-      "label": "alt",
-      "default": "image loading"
-    },
-    {
-      "type": "checkbox",
-      "id": "has_link",
-      "label": "是否有链接",
-      "default": false
-    },
-    {
-      "type": "select",
-      "id": "function_type",
-      "label": "功能类型",
-      "options": [
-        {
-          "value": "link",
-          "label": "链接"
-        },
-        {
-          "value": "link_map",
-          "label": "多国家映射"
-        },
-      ],
-      "default": "link",
-      "visible_if": "{{ block.settings.has_link == true }}"
-    },
-    {
-      "type": "url",
-      "id": "url",
-      "label": "链接",
-      "visible_if": "{{ block.settings.function_type == 'link' and block.settings.has_link == true }}"
-    },
-    {
-      "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' and block.settings.has_link == true }}"
-    },
-
-  ],
-  "presets": [
-    {
-      "name": "Ratio Image"
-    },
-    {
-      "name": "宽度比例图片"
-    }
-  ]
-}
-{% endschema %}
-
-{% assign link_class = 'zz-link-' | append: block.id %}
-{% assign image_class = 'ratio-image ' | append: link_class %}
-
-    {% render 'zz-img',
-      pc_image: block.settings.desktop_image,
-      mb_image: block.settings.mobile_image,
-      image_alt: block.settings.alt | escape,
-      class_name: image_class,
-  %}
-
-<style>
- 
-  #shopify-block-{{ block.id }} {
-    {% if block.settings.has_link %}
-      cursor: pointer;
-    {% endif %}
-    overflow: hidden;
-  }
-
-  @media screen and (max-width: 1023px) {
-    #shopify-block-{{ block.id }} {
-      width: {% if block.settings.mobile_width > 0 %}{{ block.settings.mobile_width }}%{% else %}100%{% endif %};
-      border-radius: {{ block.settings.mobile_border_radius }}px;
-    }
-  
-  }
-  @media screen and (min-width: 1024px) {
-    #shopify-block-{{ block.id }} {
-      width: {% if block.settings.pc_width > 0 %}{{ block.settings.pc_width }}%{% else %}100%{% endif %};
-      border-radius: {{ block.settings.desktop_border_radius }}px;
-    }
-  }
- 
-
-</style>
-
-{% if block.settings.has_link %}
-  {% if block.settings.function_type == 'link_map' %}
-    <script>
-      document.addEventListener('DOMContentLoaded', (event) => {
-        const btn = document.getElementsByClassName('{{ link_class }}')
-        if(btn && btn.length > 0) {
-          Array.from(btn).forEach(item => {
-            if(window.bindSiteJump) {
-              bindSiteJump(item, {{ block.settings.links | json }})
-            }
-          })
-        }
-      })
-    </script>
-  {% else %}
-    <script>
-      document.addEventListener('DOMContentLoaded', (event) => {
-  
-        const btn = document.getElementsByClassName('{{ link_class }}')
-        if(btn && btn.length > 0) {
-          Array.from(btn).forEach(item => {
-            item.addEventListener('click', (event) => {
-              event.preventDefault();
-              // 阻止冒泡
-              event.stopPropagation();
-              window.location.href = '{{ block.settings.url }}';
-            })
-          })
-        }
-      })
-    </script>
-  {% endif %}
-
+{% schema %}
+{
+  "name": "Ratio Image",
+  "class": "ratio-image",
+  "settings": [
+    {
+      "type": "header",
+      "content": "PC端设置"
+    },
+    {
+      "type": "image_picker",
+      "id": "desktop_image",
+      "label": "PC端图片"
+    },
+    {
+      "type": "range",
+      "id": "pc_width",
+      "min": 0,
+      "max": 100,
+      "step": 1,
+      "unit": "%",
+      "label": "PC端占父容器的百分比，单位%",
+      "default": 50
+    },
+    {
+      "type": "number",
+      "id": "desktop_border_radius",
+      "label": "PC端圆角",
+      "default": 16,
+      "info": "单位：px"
+    },
+    {
+      "type": "header",
+      "content": "移动端设置"
+    },
+    {
+      "type": "image_picker",
+      "id": "mobile_image",
+      "label": "移动端图片"
+    },
+    {
+      "type": "range",
+      "id": "mobile_width",
+      "min": 0,
+      "max": 100,
+      "step": 1,
+      "unit": "%",
+      "label": "移动端占父容器的百分比，单位%",
+      "default": 100
+    },
+    {
+      "type": "number",
+      "id": "mobile_border_radius",
+      "label": "移动端圆角",
+      "default": 10,
+      "info": "单位：px"
+    },
+    {
+      "type": "text",
+      "id": "alt",
+      "label": "alt",
+      "default": "image loading"
+    },
+    {
+      "type": "checkbox",
+      "id": "has_link",
+      "label": "是否有链接",
+      "default": false
+    },
+    {
+      "type": "select",
+      "id": "function_type",
+      "label": "功能类型",
+      "options": [
+        {
+          "value": "link",
+          "label": "链接"
+        },
+        {
+          "value": "link_map",
+          "label": "多国家映射"
+        },
+      ],
+      "default": "link",
+      "visible_if": "{{ block.settings.has_link == true }}"
+    },
+    {
+      "type": "url",
+      "id": "url",
+      "label": "链接",
+      "visible_if": "{{ block.settings.function_type == 'link' and block.settings.has_link == true }}"
+    },
+    {
+      "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' and block.settings.has_link == true }}"
+    },
+
+  ],
+  "presets": [
+    {
+      "name": "Ratio Image"
+    },
+    {
+      "name": "宽度比例图片"
+    }
+  ]
+}
+{% endschema %}
+
+{% assign link_class = 'zz-link-' | append: block.id %}
+{% assign image_class = 'ratio-image ' | append: link_class %}
+
+    {% render 'zz-img',
+      pc_image: block.settings.desktop_image,
+      mb_image: block.settings.mobile_image,
+      image_alt: block.settings.alt | escape,
+      class_name: image_class,
+  %}
+
+<style>
+ 
+  #shopify-block-{{ block.id }} {
+    {% if block.settings.has_link %}
+      cursor: pointer;
+    {% endif %}
+    overflow: hidden;
+  }
+
+  @media screen and (max-width: 1023px) {
+    #shopify-block-{{ block.id }} {
+      width: {% if block.settings.mobile_width > 0 %}{{ block.settings.mobile_width }}%{% else %}100%{% endif %};
+      border-radius: {{ block.settings.mobile_border_radius }}px;
+    }
+  
+  }
+  @media screen and (min-width: 1024px) {
+    #shopify-block-{{ block.id }} {
+      width: {% if block.settings.pc_width > 0 %}{{ block.settings.pc_width }}%{% else %}100%{% endif %};
+      border-radius: {{ block.settings.desktop_border_radius }}px;
+    }
+  }
+ 
+
+</style>
+
+{% if block.settings.has_link %}
+  {% if block.settings.function_type == 'link_map' %}
+    <script>
+      document.addEventListener('DOMContentLoaded', (event) => {
+        const btn = document.getElementsByClassName('{{ link_class }}')
+        if(btn && btn.length > 0) {
+          Array.from(btn).forEach(item => {
+            if(window.bindSiteJump) {
+              bindSiteJump(item, {{ block.settings.links | json }})
+            }
+          })
+        }
+      })
+    </script>
+  {% else %}
+    <script>
+      document.addEventListener('DOMContentLoaded', (event) => {
+  
+        const btn = document.getElementsByClassName('{{ link_class }}')
+        if(btn && btn.length > 0) {
+          Array.from(btn).forEach(item => {
+            item.addEventListener('click', (event) => {
+              event.preventDefault();
+              // 阻止冒泡
+              event.stopPropagation();
+              window.location.href = '{{ block.settings.url }}';
+            })
+          })
+        }
+      })
+    </script>
+  {% endif %}
+
 {% endif %}