zz-shopify-components 0.0.21 → 0.0.22

package/blocks/zz-ratio-video.liquid

@@ -1,115 +1,115 @@
-{% schema %}
-{
-  "name": "Ratio Video",
-  "class": "ratio-video",
-  "settings": [
-    {
-      "type": "header",
-      "content": "PC端设置"
-    },
-    {
-      "type": "video",
-      "id": "video_pc",
-      "label": "PC端视频"
-    },
-    {
-      "type": "image_picker",
-      "id": "poster_pc",
-      "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": "video",
-      "id": "video_mb",
-      "label": "移动端视频"
-    },
-    {
-      "type": "image_picker",
-      "id": "poster_mb",
-      "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"
-    },
-   
-  ],
-  "presets": [
-    {
-      "name": "Ratio Video"
-    },
-    {
-      "name": "宽度比例视频",
-     
-    }
-  ]
-}
-{% endschema %}
-
-
-    {% render 'zz-video',
-      pc_video: block.settings.video_pc,
-      pc_poster: block.settings.poster_pc,
-      mb_video: block.settings.video_mb,
-      mb_poster: block.settings.poster_mb,
-      lazy: true,
-      class: 'ratio-video tw-w-full tw-h-auto',
-      autoplay: true,
-      loop: true,
-      muted: true
-    %}
-
-<style>
- 
-  #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;
-    overflow: hidden;
-    box-sizing: border-box;
-    overflow: hidden;
-  }
-
-
-  @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>
+{% schema %}
+{
+  "name": "Ratio Video",
+  "class": "ratio-video",
+  "settings": [
+    {
+      "type": "header",
+      "content": "PC端设置"
+    },
+    {
+      "type": "video",
+      "id": "video_pc",
+      "label": "PC端视频"
+    },
+    {
+      "type": "image_picker",
+      "id": "poster_pc",
+      "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": "video",
+      "id": "video_mb",
+      "label": "移动端视频"
+    },
+    {
+      "type": "image_picker",
+      "id": "poster_mb",
+      "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"
+    },
+   
+  ],
+  "presets": [
+    {
+      "name": "Ratio Video"
+    },
+    {
+      "name": "宽度比例视频",
+     
+    }
+  ]
+}
+{% endschema %}
+
+
+    {% render 'zz-video',
+      pc_video: block.settings.video_pc,
+      pc_poster: block.settings.poster_pc,
+      mb_video: block.settings.video_mb,
+      mb_poster: block.settings.poster_mb,
+      lazy: true,
+      class: 'ratio-video tw-w-full tw-h-auto',
+      autoplay: true,
+      loop: true,
+      muted: true
+    %}
+
+<style>
+ 
+  #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;
+    overflow: hidden;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+
+
+  @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>

package/blocks/zz-responsive-width-image.liquid

@@ -1,223 +1,223 @@
-{% schema %}
-{
-  "name": "Responsive Width Image",
-  "class": "responsive-width-image",
-  "settings": [
-    {
-      "type": "header",
-      "content": "PC端设置"
-    },
-    {
-      "type": "image_picker",
-      "id": "desktop_image",
-      "label": "PC端图片"
-    },
-    {
-      "type": "number",
-      "id": "desktop_width_xl",
-      "label": "PC端宽度 大屏xl屏幕",
-      "default": 800,
-      "info": "单位：px"
-    },
-    {
-      "type": "number",
-      "id": "desktop_width_lg",
-      "label": "PC端宽度 中等屏lg屏幕",
-      "default": 600,
-      "info": "单位：px"
-    },
-    {
-      "type": "number",
-      "id": "desktop_border_radius",
-      "label": "PC端圆角",
-      "default": 16,
-      "info": "单位：px"
-    },
-    {
-      "type": "header",
-      "content": "移动端设置"
-    },
-    {
-      "type": "image_picker",
-      "id": "mobile_image",
-      "label": "移动端图片"
-    },
-    {
-      "type": "select",
-      "id": "mb_width_type",
-      "label": "移动端宽度类型",
-      "options": [
-        { "value": "mb_use_padding", "label": "使用内边距限制" },
-        { "value": "mb_use_parent_ratio", "label": "父级比例限制" },
-        { "value": "mb_use_width_px", "label": "宽度限制PX" }
-      ],
-      "default": "mb_use_padding"
-    },
-    {
-      "type": "number",
-      "id": "mobile_padding_x",
-      "label": "移动端左右内边距",
-      "default": 0,
-      "info": "单位：px",
-      "visible_if": "{{ block.settings.mb_width_type == 'mb_use_padding' }}"
-    },
-    {
-      "type": "range",
-      "id": "mobile_width",
-      "min": 0,
-      "max": 100,
-      "step": 1,
-      "unit": "%",
-      "label": "移动端占父容器的百分比，单位%",
-      "default": 100,
-      "visible_if": "{{ block.settings.mb_width_type == 'mb_use_parent_ratio' }}"
-    },
-    {
-      "type": "number",
-      "id": "mb_width_px",
-      "label": "移动端宽度 宽度限制PX",
-      "default": 100,
-      "info": "单位：px",
-       "visible_if": "{{ block.settings.mb_width_type == 'mb_use_width_px' }}"
-    },
-    {
-      "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": "Responsive Width Image"
-    },
-    {
-      "name": "宽度响应式图片",
-    }
-  ]
-}
-{% endschema %}
-
-{% assign image_class = 'zz-link-' | append: block.id %}
-
-  <div class="responsive-width-container tw-w-full tw-box-border {{ image_class }}">
-    {% render 'zz-img',
-      pc_image: block.settings.desktop_image,
-      mb_image: block.settings.mobile_image,
-      image_alt: block.settings.alt | escape,
-      class_name: 'responsive-width-image',
-    %}
-
-
-  </div>
-
-
-<style>
- 
-  #shopify-block-{{ block.id }} .responsive-width-container {
-    box-sizing: border-box;
-    overflow: hidden;
-    {% if block.settings.has_link %}
-      cursor: pointer;
-    {% endif %}
-
-  }
-
-  @media screen and (max-width: 1023px) {
-    #shopify-block-{{ block.id }} {
-      {% if block.settings.mb_width_type == 'mb_use_padding' %}
-        width: 100%;
-      {% elsif block.settings.mb_width_type == 'mb_use_parent_ratio' %}
-        width: {{ block.settings.mobile_width }}%
-      {% elsif block.settings.mb_width_type == 'mb_use_width_px' %}
-        width: {{ block.settings.mb_width_px }}px;
-      {% endif %}
-      
-    }
-    #shopify-block-{{ block.id }} .responsive-width-container {
-      border-radius: {{ block.settings.mobile_border_radius }}px;
-      {% if block.settings.mb_width_type == 'mb_use_padding' %}
-        padding: 0 {{ block.settings.mobile_padding_x }}px;
-      {% endif %}
-    }
-  
-  }
-  @media screen and (min-width: 1024px) {
-    #shopify-block-{{ block.id }} .responsive-width-container {
-      padding: 0px;
-      width: {{ block.settings.desktop_width_lg }}px;
-      border-radius: {{ block.settings.desktop_border_radius }}px;
-    }
-  }
-  @media screen and (min-width: 1280px) {
-    #shopify-block-{{ block.id }} .responsive-width-container {
-      width: {{ block.settings.desktop_width_xl }}px;
-    }
-  }
-
-</style>
-
-{% if block.settings.has_link %}
-  <script>
-    document.addEventListener('DOMContentLoaded', (event) => {
-      const btn = document.getElementsByClassName('{{ image_class }}')
-      if(btn && btn[0]) {
-        {% if block.settings.function_type == 'link_map' %}
-          if(window.bindSiteJump) {
-            bindSiteJump(btn[0], {{ block.settings.links | json }})
-          }
-        {% else %}
-          // 监听点击事件
-          btn[0].addEventListener('click', (event) => {
-            event.preventDefault();
-            window.location.href = '{{ block.settings.url }}';
-          })
-        {% endif %}
-      }
-
-    })
-  </script>
+{% schema %}
+{
+  "name": "Responsive Width Image",
+  "class": "responsive-width-image",
+  "settings": [
+    {
+      "type": "header",
+      "content": "PC端设置"
+    },
+    {
+      "type": "image_picker",
+      "id": "desktop_image",
+      "label": "PC端图片"
+    },
+    {
+      "type": "number",
+      "id": "desktop_width_xl",
+      "label": "PC端宽度 大屏xl屏幕",
+      "default": 800,
+      "info": "单位：px"
+    },
+    {
+      "type": "number",
+      "id": "desktop_width_lg",
+      "label": "PC端宽度 中等屏lg屏幕",
+      "default": 600,
+      "info": "单位：px"
+    },
+    {
+      "type": "number",
+      "id": "desktop_border_radius",
+      "label": "PC端圆角",
+      "default": 16,
+      "info": "单位：px"
+    },
+    {
+      "type": "header",
+      "content": "移动端设置"
+    },
+    {
+      "type": "image_picker",
+      "id": "mobile_image",
+      "label": "移动端图片"
+    },
+    {
+      "type": "select",
+      "id": "mb_width_type",
+      "label": "移动端宽度类型",
+      "options": [
+        { "value": "mb_use_padding", "label": "使用内边距限制" },
+        { "value": "mb_use_parent_ratio", "label": "父级比例限制" },
+        { "value": "mb_use_width_px", "label": "宽度限制PX" }
+      ],
+      "default": "mb_use_padding"
+    },
+    {
+      "type": "number",
+      "id": "mobile_padding_x",
+      "label": "移动端左右内边距",
+      "default": 0,
+      "info": "单位：px",
+      "visible_if": "{{ block.settings.mb_width_type == 'mb_use_padding' }}"
+    },
+    {
+      "type": "range",
+      "id": "mobile_width",
+      "min": 0,
+      "max": 100,
+      "step": 1,
+      "unit": "%",
+      "label": "移动端占父容器的百分比，单位%",
+      "default": 100,
+      "visible_if": "{{ block.settings.mb_width_type == 'mb_use_parent_ratio' }}"
+    },
+    {
+      "type": "number",
+      "id": "mb_width_px",
+      "label": "移动端宽度 宽度限制PX",
+      "default": 100,
+      "info": "单位：px",
+       "visible_if": "{{ block.settings.mb_width_type == 'mb_use_width_px' }}"
+    },
+    {
+      "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": "Responsive Width Image"
+    },
+    {
+      "name": "宽度响应式图片",
+    }
+  ]
+}
+{% endschema %}
+
+{% assign image_class = 'zz-link-' | append: block.id %}
+
+  <div class="responsive-width-container tw-w-full tw-box-border {{ image_class }}">
+    {% render 'zz-img',
+      pc_image: block.settings.desktop_image,
+      mb_image: block.settings.mobile_image,
+      image_alt: block.settings.alt | escape,
+      class_name: 'responsive-width-image',
+    %}
+
+
+  </div>
+
+
+<style>
+ 
+  #shopify-block-{{ block.id }} .responsive-width-container {
+    box-sizing: border-box;
+    overflow: hidden;
+    {% if block.settings.has_link %}
+      cursor: pointer;
+    {% endif %}
+
+  }
+
+  @media screen and (max-width: 1023px) {
+    #shopify-block-{{ block.id }} {
+      {% if block.settings.mb_width_type == 'mb_use_padding' %}
+        width: 100%;
+      {% elsif block.settings.mb_width_type == 'mb_use_parent_ratio' %}
+        width: {{ block.settings.mobile_width }}%
+      {% elsif block.settings.mb_width_type == 'mb_use_width_px' %}
+        width: {{ block.settings.mb_width_px }}px;
+      {% endif %}
+      
+    }
+    #shopify-block-{{ block.id }} .responsive-width-container {
+      border-radius: {{ block.settings.mobile_border_radius }}px;
+      {% if block.settings.mb_width_type == 'mb_use_padding' %}
+        padding: 0 {{ block.settings.mobile_padding_x }}px;
+      {% endif %}
+    }
+  
+  }
+  @media screen and (min-width: 1024px) {
+    #shopify-block-{{ block.id }} .responsive-width-container {
+      padding: 0px;
+      width: {{ block.settings.desktop_width_lg }}px;
+      border-radius: {{ block.settings.desktop_border_radius }}px;
+    }
+  }
+  @media screen and (min-width: 1280px) {
+    #shopify-block-{{ block.id }} .responsive-width-container {
+      width: {{ block.settings.desktop_width_xl }}px;
+    }
+  }
+
+</style>
+
+{% if block.settings.has_link %}
+  <script>
+    document.addEventListener('DOMContentLoaded', (event) => {
+      const btn = document.getElementsByClassName('{{ image_class }}')
+      if(btn && btn[0]) {
+        {% if block.settings.function_type == 'link_map' %}
+          if(window.bindSiteJump) {
+            bindSiteJump(btn[0], {{ block.settings.links | json }})
+          }
+        {% else %}
+          // 监听点击事件
+          btn[0].addEventListener('click', (event) => {
+            event.preventDefault();
+            window.location.href = '{{ block.settings.url }}';
+          })
+        {% endif %}
+      }
+
+    })
+  </script>
 {% endif %}