zz-shopify-components 0.0.1-beta.1

package/blocks/zz-video-swiper-perview-item.liquid

@@ -0,0 +1,216 @@
+<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": "可预览轮播图-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' %}
+          bindSiteJump(btn[0], {{ block.settings.links | json }})
+        {% else %}
+          // 监听点击事件
+          btn[0].addEventListener('click', (event) => {
+            event.preventDefault();
+            window.location.href = '{{ block.settings.url }}';
+          })
+        {% endif %}
+      }
+
+    })
+  </script>
+{% endif %}