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

package/blocks/zz-video-button.liquid

@@ -1,84 +1,84 @@
-
-{% 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": "Video Button"
-    },
-    {
-      "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
-%}
-
+
+{% 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": "Video Button"
+    },
+    {
+      "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
+%}
+

package/blocks/zz-video-img-item.liquid

@@ -1,203 +1,203 @@
-<style>
-  @media screen and (max-width: 750px) {
-    #shopify-block-{{block.id}} {
-      width: calc(100% - 72px);
-      box-sizing: border-box; 
-      transform: translateX(-18px);
-    }
-    #shopify-block-{{block.id}} .image-video-box {
-      width: 100%;
-      aspect-ratio: 3 / 4;
-      object-fit: cover; 
-    }
-  }
-  @media screen and (min-width: 750px) {
-    #shopify-block-{{block.id}} {
-      width: 318px;
-    }
-    #shopify-block-{{block.id}} .image-video-box {
-      width: 100%;
-      aspect-ratio: 9 / 16;
-      object-fit: cover; 
-    }
-  }
-
-  #shopify-block-{{block.id}} .media-box {
-    {% if block.settings.has_link %}
-      cursor: pointer;
-    {% endif %}
-  }
-
-</style>
-
-{% assign media_class = 'zz-link-' | append: block.id %}
-
-<div class='media-box banner-item {{ media_class }} max-md:tw-rounded-[12px] md:tw-rounded-[16px]'>
-  {% if block.settings.video_pc != blank %}
-    {% if block.settings.video_url_pc != blank %}
-      {% assign pc_video = block.settings.video_url_pc %}
-    {% else %}
-      {% assign pc_video = block.settings.video_pc %}
-    {% endif %}
-    {% render 'zz-video-md',
-      pc_video: pc_video,
-      pc_poster: block.settings.poster_pc,
-      mb_video: block.settings.video_mb,
-      mb_poster: block.settings.poster_mb,
-      lazy: true,
-      class: 'image-video-box tw-w-full tw-h-auto max-md:tw-rounded-[12px] md:tw-rounded-[16px]',
-      autoplay: true,
-      muted: true,
-      loop: true
-    %}
-  {% else %}
-    {%
-      render 'zz-img-md',
-      pc_image: block.settings.poster_pc,
-      mb_image: block.settings.poster_mb,
-      image_alt: block.settings.heading | escape,
-      class_name: 'image-video-box max-md:tw-rounded-[12px] md:tw-rounded-[16px]',
-    %}
-  {% endif %}
-</div>
-{% if block.settings.has_title_and_content %}
-  <div class='active-box-content md:tw-text-[20px] max-md:tw-text-[17px] max-md:tw-mt-[20px] md:tw-mt-[24px]'>
-    <div class="tw-text-left tw-font-bold max-md:tw-text-[17px] md:tw-text-[20px]" style="color: {{ block.settings.title_color }};">
-      {{ block.settings.heading }}
-    </div>
-      <div class='tw-mt-[12px] max-md:tw-text-[12px] md:tw-text-[14px] tw-leading-[1.5]' style="color: {{ block.settings.content_color }};">
-        {{ block.settings.row_content }}
-      </div>
-    </div>
-  
-{% endif %}
-
-{% schema %}
-{
-  "name": "ZZ Video Img Item",
-  "class": "zz-video-img-item",
-  "settings": [
-    {
-      "type": "text",
-      "id": "video_url_pc",
-      "label": "Video url PC",
-      "info": "使用cdn视频时，填写视频url。防止大屏幕视频模糊"
-    },
-    {
-      "type": "video",
-      "id": "video_pc",
-      "label": "Video"
-    },
-    {
-      "type": "image_picker",
-      "id": "poster_pc",
-      "label": "Poster"
-    },
-    {
-      "type": "video",
-      "id": "video_mb",
-      "label": "Video(Mobile)"
-    },
-    {
-      "type": "image_picker",
-      "id": "poster_mb",
-      "label": "Poster(Mobile)"
-    },
-    {
-      "type": "checkbox",
-      "id": "has_title_and_content",
-      "label": "是否有标题与内容",
-      "default": true
-    },
-    {
-      "type": "text",
-      "id": "heading",
-      "label": "标题",
-      "visible_if": "{{ block.settings.has_title_and_content == true }}"
-    },
-    {
-      "type": "color",
-      "id": "title_color",
-      "default": "#ffffff",
-      "label": "标题颜色",
-      "visible_if": "{{ block.settings.has_title_and_content == true }}"
-    },
-    {
-      "type": "richtext",
-      "id": "row_content",
-      "label": "description",
-      "visible_if": "{{ block.settings.has_title_and_content == true }}"
-    },
-    {
-      "type": "color",
-      "id": "content_color",
-      "default": "#B2B2B2",
-      "label": "内容颜色",
-      "visible_if": "{{ block.settings.has_title_and_content == true }}"
-    },
-    {
-      "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": "ZZ Video Img Item"
-    },
-  ]
-}
-{% endschema %}
-
-{% if block.settings.has_link %}
-  <script>
-    document.addEventListener('DOMContentLoaded', (event) => {
-      const btn = document.getElementsByClassName('{{ media_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 %}
+<style>
+  @media screen and (max-width: 750px) {
+    #shopify-block-{{block.id}} {
+      width: calc(100% - 72px);
+      box-sizing: border-box; 
+      transform: translateX(-18px);
+    }
+    #shopify-block-{{block.id}} .image-video-box {
+      width: 100%;
+      aspect-ratio: 3 / 4;
+      object-fit: cover; 
+    }
+  }
+  @media screen and (min-width: 750px) {
+    #shopify-block-{{block.id}} {
+      width: 318px;
+    }
+    #shopify-block-{{block.id}} .image-video-box {
+      width: 100%;
+      aspect-ratio: 9 / 16;
+      object-fit: cover; 
+    }
+  }
+
+  #shopify-block-{{block.id}} .media-box {
+    {% if block.settings.has_link %}
+      cursor: pointer;
+    {% endif %}
+  }
+
+</style>
+
+{% assign media_class = 'zz-link-' | append: block.id %}
+
+<div class='media-box banner-item {{ media_class }} max-md:tw-rounded-[12px] md:tw-rounded-[16px]'>
+  {% if block.settings.video_pc != blank %}
+    {% if block.settings.video_url_pc != blank %}
+      {% assign pc_video = block.settings.video_url_pc %}
+    {% else %}
+      {% assign pc_video = block.settings.video_pc %}
+    {% endif %}
+    {% render 'zz-video-md',
+      pc_video: pc_video,
+      pc_poster: block.settings.poster_pc,
+      mb_video: block.settings.video_mb,
+      mb_poster: block.settings.poster_mb,
+      lazy: true,
+      class: 'image-video-box tw-w-full tw-h-auto max-md:tw-rounded-[12px] md:tw-rounded-[16px]',
+      autoplay: true,
+      muted: true,
+      loop: true
+    %}
+  {% else %}
+    {%
+      render 'zz-img-md',
+      pc_image: block.settings.poster_pc,
+      mb_image: block.settings.poster_mb,
+      image_alt: block.settings.heading | escape,
+      class_name: 'image-video-box max-md:tw-rounded-[12px] md:tw-rounded-[16px]',
+    %}
+  {% endif %}
+</div>
+{% if block.settings.has_title_and_content %}
+  <div class='active-box-content md:tw-text-[20px] max-md:tw-text-[17px] max-md:tw-mt-[20px] md:tw-mt-[24px]'>
+    <div class="tw-text-left tw-font-bold max-md:tw-text-[17px] md:tw-text-[20px]" style="color: {{ block.settings.title_color }};">
+      {{ block.settings.heading }}
+    </div>
+      <div class='tw-mt-[12px] max-md:tw-text-[12px] md:tw-text-[14px] tw-leading-[1.5]' style="color: {{ block.settings.content_color }};">
+        {{ block.settings.row_content }}
+      </div>
+    </div>
+  
+{% endif %}
+
+{% schema %}
+{
+  "name": "ZZ Video Img Item",
+  "class": "zz-video-img-item",
+  "settings": [
+    {
+      "type": "text",
+      "id": "video_url_pc",
+      "label": "Video url PC",
+      "info": "使用cdn视频时，填写视频url。防止大屏幕视频模糊"
+    },
+    {
+      "type": "video",
+      "id": "video_pc",
+      "label": "Video"
+    },
+    {
+      "type": "image_picker",
+      "id": "poster_pc",
+      "label": "Poster"
+    },
+    {
+      "type": "video",
+      "id": "video_mb",
+      "label": "Video(Mobile)"
+    },
+    {
+      "type": "image_picker",
+      "id": "poster_mb",
+      "label": "Poster(Mobile)"
+    },
+    {
+      "type": "checkbox",
+      "id": "has_title_and_content",
+      "label": "是否有标题与内容",
+      "default": true
+    },
+    {
+      "type": "text",
+      "id": "heading",
+      "label": "标题",
+      "visible_if": "{{ block.settings.has_title_and_content == true }}"
+    },
+    {
+      "type": "color",
+      "id": "title_color",
+      "default": "#ffffff",
+      "label": "标题颜色",
+      "visible_if": "{{ block.settings.has_title_and_content == true }}"
+    },
+    {
+      "type": "richtext",
+      "id": "row_content",
+      "label": "description",
+      "visible_if": "{{ block.settings.has_title_and_content == true }}"
+    },
+    {
+      "type": "color",
+      "id": "content_color",
+      "default": "#B2B2B2",
+      "label": "内容颜色",
+      "visible_if": "{{ block.settings.has_title_and_content == true }}"
+    },
+    {
+      "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": "ZZ Video Img Item"
+    },
+  ]
+}
+{% endschema %}
+
+{% if block.settings.has_link %}
+  <script>
+    document.addEventListener('DOMContentLoaded', (event) => {
+      const btn = document.getElementsByClassName('{{ media_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 %}