zz-shopify-components 0.0.21 → 0.0.22

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-swiper-perview-item.liquid

@@ -1,221 +1,221 @@
-<style>
-  @media screen and (max-width: 1023px) {
-    #shopify-block-{{block.id}} {
-      width: calc(100% - 40px);
-      box-sizing: border-box;
-    }
-    #shopify-block-{{block.id}} .image-video-box {
-      border-radius: 10px;
-    }
-  }
-  @media screen and (min-width: 1024px) {
-    #shopify-block-{{block.id}} {
-      width: 83.3594vw;
-      {% comment %} height: 46.875vw; {% endcomment %}
-    }
-    #shopify-block-{{block.id}} .image-video-box {
-      border-radius: 16px;
-    }
-
-  }
-  @media screen and (min-width: 1280px) {
-    #shopify-block-{{block.id}} {
-      width: 1067px;
-      {% comment %} height: 600px; {% endcomment %}
-    }
-
-  }
-  #shopify-block-{{block.id}} .media-box {
-    {% if block.settings.has_link %}
-      cursor: pointer;
-    {% endif %}
-  }
-
-
-  #shopify-block-{{block.id}}.swiper-slide-active .active-box-content {
-    display: block !important;
-  }
-</style>
-
-{% assign media_class = 'zz-link-' | append: block.id %}
-
-<div class='media-box banner-item {{ media_class }}'>
-  {% 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',
-      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 ',
-      autoplay: false,
-      muted: true
-    %}
-  {% else %}
-    {%
-      render 'zz-img',
-      pc_image: block.settings.poster_pc,
-      mb_image: block.settings.poster_mb,
-      image_alt: block.settings.heading | escape,
-      class_name: 'image-video-box',
-    %}
-  {% endif %}
-</div>
-
-<div class='slide-box {% if block.settings.has_title_and_content %} tw-pt-[20px] tw-h-[140px] lg:tw-pt-[48px] lg:tw-h-[178px] {% else %} tw-h-[25px] {% endif %}  tw-box-border max-lg:tw-px-[15px] lg:tw-px-[10vw]'>
-  <div class='active-box-content tw-hidden'>
-    {% render 'zz-h5',
-      title: block.settings.heading,
-      title_color: block.settings.title_color,
-      class_name: 'tw-text-center'
-    %}
-    <div class='tw-mt-[8px] lg:tw-mt-[16px]'>
-      {% render 'zz-content-text',
-        text: block.settings.row_content,
-        mb_text: block.settings.row_content,
-        pc_font_size: 16,
-        mobile_font_size: 12,
-        text_color: block.settings.content_color,
-        class_name: 'tw-text-center'
-      %}
-    </div>
-  </div>
-</div>
-
-{% schema %}
-{
-  "name": "Video Swiper Preview Item",
-  "class": "zz-video-swiper-preview-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": "#000000",
-      "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": "Video Swiper Preview Item"
-    },
-    {
-      "name": "可预览轮播图-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: 1023px) {
+    #shopify-block-{{block.id}} {
+      width: calc(100% - 40px);
+      box-sizing: border-box;
+    }
+    #shopify-block-{{block.id}} .image-video-box {
+      border-radius: 10px;
+    }
+  }
+  @media screen and (min-width: 1024px) {
+    #shopify-block-{{block.id}} {
+      width: 83.3594vw;
+      {% comment %} height: 46.875vw; {% endcomment %}
+    }
+    #shopify-block-{{block.id}} .image-video-box {
+      border-radius: 16px;
+    }
+
+  }
+  @media screen and (min-width: 1280px) {
+    #shopify-block-{{block.id}} {
+      width: 1067px;
+      {% comment %} height: 600px; {% endcomment %}
+    }
+
+  }
+  #shopify-block-{{block.id}} .media-box {
+    {% if block.settings.has_link %}
+      cursor: pointer;
+    {% endif %}
+  }
+
+
+  #shopify-block-{{block.id}}.swiper-slide-active .active-box-content {
+    display: block !important;
+  }
+</style>
+
+{% assign media_class = 'zz-link-' | append: block.id %}
+
+<div class='media-box banner-item {{ media_class }}'>
+  {% 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',
+      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 ',
+      autoplay: false,
+      muted: true
+    %}
+  {% else %}
+    {%
+      render 'zz-img',
+      pc_image: block.settings.poster_pc,
+      mb_image: block.settings.poster_mb,
+      image_alt: block.settings.heading | escape,
+      class_name: 'image-video-box',
+    %}
+  {% endif %}
+</div>
+
+<div class='slide-box {% if block.settings.has_title_and_content %} tw-pt-[20px] tw-h-[140px] lg:tw-pt-[48px] lg:tw-h-[178px] {% else %} tw-h-[25px] {% endif %}  tw-box-border max-lg:tw-px-[15px] lg:tw-px-[10vw]'>
+  <div class='active-box-content tw-hidden'>
+    {% render 'zz-h5',
+      title: block.settings.heading,
+      title_color: block.settings.title_color,
+      class_name: 'tw-text-center'
+    %}
+    <div class='tw-mt-[8px] lg:tw-mt-[16px]'>
+      {% render 'zz-content-text',
+        text: block.settings.row_content,
+        mb_text: block.settings.row_content,
+        pc_font_size: 16,
+        mobile_font_size: 12,
+        text_color: block.settings.content_color,
+        class_name: 'tw-text-center'
+      %}
+    </div>
+  </div>
+</div>
+
+{% schema %}
+{
+  "name": "Video Swiper Preview Item",
+  "class": "zz-video-swiper-preview-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": "#000000",
+      "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": "Video Swiper Preview Item"
+    },
+    {
+      "name": "可预览轮播图-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 %}