zz-shopify-components 0.0.1-beta.1

package/blocks/zz-flex-layout-bg-block.liquid

@@ -0,0 +1,520 @@
+{% schema %}
+{
+  "name": "Flex Layout BG Block",
+  "class": "flex-layout-bg-block",
+  "settings": [
+    {
+      "type": "color_background",
+      "id": "background_color",
+      "label": "背景颜色",
+      "default": "rgba(0,0,0,0)"
+    },
+    {
+      "type": "select",
+      "id": "bg_type",
+      "label": "背景类型",
+      "options": [
+        { "value": "image", "label": "图片" },
+        { "value": "video", "label": "视频" }
+      ],
+      "default": "image"
+    },
+    {
+      "type": "checkbox",
+      "id": "full_screen_bg",
+      "label": "背景是否全屏展示",
+      "default": false,
+      "info": "首屏时候看需求选择开启设置，宽高都是100%"
+    },
+    {
+      "type": "image_picker",
+      "id": "pc_background_image",
+      "label": "PC端背景图片",
+      "visible_if": "{{ block.settings.bg_type == 'image' }}"
+    },
+    {
+      "type": "image_picker",
+      "id": "mobile_background_image",
+      "label": "移动端背景图片",
+      "visible_if": "{{ block.settings.bg_type == 'image' }}"
+    },
+    {
+      "type": "video",
+      "id": "pc_background_video",
+      "label": "PC端视频",
+      "visible_if": "{{ block.settings.bg_type == 'video' }}"
+    },
+    {
+      "type": "text",
+      "id": "pc_background_video_url",
+      "label": "PC端视频 链接",
+      "info": "使用cdn视频时，填写视频url。防止大屏幕视频模糊",
+      "visible_if": "{{ block.settings.bg_type == 'video' }}"
+    },
+    {
+      "type": "image_picker",
+      "id": "pc_background_video_poster",
+      "label": "PC端视频 封面",
+        "visible_if": "{{ block.settings.bg_type == 'video' }}"
+    },
+    {
+    "type": "video",
+    "id": "mobile_background_video",
+    "label": "移动端视频",
+        "visible_if": "{{ block.settings.bg_type == 'video' }}"
+  },
+  {
+    "type": "image_picker",
+    "id": "mobile_background_video_poster",
+    "label": "移动端视频封面",
+    "visible_if": "{{ block.settings.bg_type == 'video' }}"
+  },
+  {
+    "type": "checkbox",
+    "id": "video_loop",
+    "label": "视频是否循环",
+    "default": false,
+    "visible_if": "{{ block.settings.bg_type == 'video' }}",
+    "info": "在swiper中使用时，自动轮播，需要设置为false"
+  },
+    {
+      "type": "header",
+      "content": "💻 PC端布局设置"
+    },
+   
+    {
+      "type": "select",
+      "id": "pc_direction",
+      "label": "PC方向 (Direction)",
+      "options": [
+        { "value": "row", "label": "横向 (Horizontal)" },
+        { "value": "column", "label": "纵向 (Vertical)" },
+        { "value": "row-reverse", "label": "横向反向 (Horizontal Reverse)" },
+        { "value": "column-reverse", "label": "纵向反向 (Vertical Reverse)" }
+      ],
+      "default": "row"
+    },
+    {
+      "type": "number",
+      "id": "pc_gap",
+      "label": "区块间距 (Gap)",
+      "default": 40
+    },
+    
+    {
+      "type": "select",
+      "id": "pc_justify",
+      "label": "PC主轴对齐 (Justify Content)",
+      "options": [
+        { "value": "flex-start", "label": "起始对齐 (Flex Start)" },
+        { "value": "center", "label": "居中对齐 (Center)" },
+        { "value": "flex-end", "label": "末尾对齐 (Flex End)" },
+        { "value": "space-between", "label": "两端对齐 (Space Between)" },
+        { "value": "space-around", "label": "平均间距 (Space Around)" }
+      ],
+      "default": "flex-start"
+    },
+    {
+      "type": "select",
+      "id": "pc_align",
+      "label": "PC交叉轴对齐 (Align Items)",
+      "options": [
+        { "value": "flex-start", "label": "起始对齐 (Flex Start)" },
+        { "value": "center", "label": "居中对齐 (Center)" },
+        { "value": "flex-end", "label": "末尾对齐 (Flex End)" }
+      ],
+      "default": "center"
+    },
+    {
+      "type": "number",
+      "id": "pc_padding_top",
+      "label": "PC端顶部内边距 (px)",
+      "default": 0
+    },
+    {
+      "type": "number",
+      "id": "pc_padding_bottom",
+      "label": "PC端底部内边距 (px)",
+      "default": 0
+    },
+    {
+      "type": "checkbox",
+      "id": "pc_full_width",
+      "label": "内容区域是否全屏展示",
+      "default": true
+    },
+    {
+      "type": "number",
+      "id": "pc_xl_width",
+      "label": "XL屏幕内容区域宽度 (px)",
+      "default": 1200,
+      "info": "非全屏展示时有效",
+      "visible_if": "{{ block.settings.pc_full_width == false }}"
+    },
+    {
+      "type": "number",
+      "id": "pc_lg_width",
+      "label": "LG屏幕内容区域宽度 (vw)",
+      "default": 90,
+      "info": "非全屏展示时有效",
+      "visible_if": "{{ block.settings.pc_full_width == false }}"
+    },
+    {
+      "type": "header",
+      "content": "📱 移动端布局设置"
+    },
+ 
+    {
+      "type": "select",
+      "id": "mobile_direction",
+      "label": "移动方向 (Direction)",
+      "options": [
+        { "value": "row", "label": "横向 (Horizontal)" },
+        { "value": "column", "label": "纵向 (Vertical)" },
+        { "value": "row-reverse", "label": "横向反向 (Horizontal Reverse)" },
+        { "value": "column-reverse", "label": "纵向反向 (Vertical Reverse)" }
+      ],
+      "default": "column"
+    },
+    {
+      "type": "number",
+      "id": "mobile_gap",
+      "label": "移动区块间距 (Gap)",
+      "default": 20
+    },
+    {
+      "type": "select",
+      "id": "mobile_justify",
+      "label": "移动主轴对齐 (Justify Content)",
+      "options": [
+        { "value": "flex-start", "label": "起始对齐 (Flex Start)" },
+        { "value": "center", "label": "居中对齐 (Center)" },
+        { "value": "flex-end", "label": "末尾对齐 (Flex End)" },
+        { "value": "space-between", "label": "两端对齐 (Space Between)" },
+        { "value": "space-around", "label": "平均间距 (Space Around)" }
+      ],
+      "default": "flex-start"
+    },
+    {
+      "type": "select",
+      "id": "mobile_align",
+      "label": "移动交叉轴对齐 (Align Items)",
+      "options": [
+        { "value": "flex-start", "label": "起始对齐 (Flex Start)" },
+        { "value": "center", "label": "居中对齐 (Center)" },
+        { "value": "flex-end", "label": "末尾对齐 (Flex End)" }
+      ],
+      "default": "center"
+    },
+    {
+      "type": "number",
+      "id": "mobile_padding_x",
+      "label": "移动端左右内边距",
+      "default": 0,
+      "info": "单位：px"
+    },
+    {
+      "type": "number",
+      "id": "mobile_padding_top",
+      "label": "移动端顶部内边距 (px)",
+      "default": 0
+    },
+    {
+      "type": "number",
+      "id": "mobile_padding_bottom",
+      "label": "移动端底部内边距 (px)",
+      "default": 0
+    },
+    {
+      "type": "header",
+      "content": "动画设置"
+    },
+    {
+      "type": "select",
+      "id": "child_animation",
+      "label": "子元素动画",
+      "options": [
+        { "value": "none-animation", "label": "无动画" },
+        { "value": "fade-in-box", "label": "按序从下往上显示" },
+        { "value": "fade-in-from-left", "label": "按序从左进入显示" },
+        { "value": "fade-in-from-right", "label": "按序从右进入显示" },
+        { "value": "slow-reveal", "label": "跟随页面滚动缓慢显示" }
+      ],
+      "default": "none-animation"
+    },
+    {
+      "type": "select",
+      "id": "self_animation",
+      "label": "自身动画",
+      "options": [
+        { "value": "none-animation", "label": "无动画" },
+        { "value": "fade-in-content", "label": "从下往上显示" },
+        { "value": "fade-in-from-left-content", "label": "从左往右显示" },
+        { "value": "fade-in-from-right-content", "label": "从右往左显示" },
+        { "value": "slow-reveal-content", "label": "跟随页面滚动缓慢显示" }
+      ],
+      "default": "none-animation"
+    },
+    {
+      "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 }}"
+    },
+    
+  ],
+  "blocks": [
+    {
+        "type": "@theme",
+    }
+  ],
+  "presets": [
+    {
+      "name": "带背景的弹性布局",
+    },
+    {
+      "name": "背景+内容",
+      "settings": {
+        "bg_type": "image",
+        "pc_background_image": "shopify://shop_images/preset_pc_full_bg_pic.png",
+        "mobile_background_image": "shopify://shop_images/preset_mobile_full_bg_pic.png",
+        "pc_direction": "column",
+        "pc_gap": 40,
+        "pc_justify": "center",
+        "pc_align": "flex-start",
+        "pc_full_width": false,
+        "mobile_direction": "column",
+        "mobile_gap": 20,
+        "mobile_justify": "flex-end",
+        "mobile_align": "center",
+        "mobile_padding_bottom": 100,
+      },
+      "blocks": [
+        {
+          "type": "zz-responsive-width-image",
+          "settings": {
+            "desktop_image": "shopify://shop_images/1_521b8e7f-8da9-4df0-9ee1-10a25ee62323.png",
+            "desktop_width_xl": 322,
+            "desktop_width_lg": 322,
+            "desktop_border_radius": 0,
+            "mobile_image": "shopify://shop_images/12_5bbff2ea-19fe-46e1-944b-f78a79ae2d4a.png",
+            "mb_width_type": "mb_use_padding",
+            "mobile_padding_x": 60,
+            "mobile_width": 60,
+            "mb_width_px": 100,
+            "mobile_border_radius": 0,
+            "alt": "image loading",
+          },
+        },
+        {
+          "type": "zz-title",
+          "settings": {
+            "pc_title": "<p>OFFICIAL FLYING CAMERA OF<br/>USA CYCLING TEAM</p>",
+            "mb_title": "<p>OFFICIAL FLYING CAMERA OF<br/>USA CYCLING TEAM</p>",
+            "tag": "h3",
+            "text_color": "#ffffff",
+            "pc_align": "left",
+            "mobile_align": "center",
+
+          },
+        },
+        {
+          "type": "zz-button",
+          "settings": {
+            "text": "Buy Now",
+            "function_type": "link_map",
+            "type": "primary",
+            "color": "white",
+            "size": "medium"
+          },
+        },
+        
+      ]
+    }
+  ]
+}
+{% endschema %}
+
+<style>
+  #shopify-block-{{ block.id }} {
+    width: 100%;
+    position: relative;
+    overflow-x: hidden;
+    background-color: {{ block.settings.background_color }};
+  }
+
+  #shopify-block-{{ block.id }} .flex-layout-video {
+    width: 100%;
+    height: auto;
+  }
+  #shopify-block-{{ block.id }} .bg-responsive-block-layout {
+    box-sizing: border-box;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: {{ block.settings.mobile_direction }};
+    justify-content: {{ block.settings.mobile_justify }};
+    align-items: {{ block.settings.mobile_align }};
+    gap: {{ block.settings.mobile_gap }}px;
+
+    padding-top: {{ block.settings.mobile_padding_top }}px;
+    padding-bottom: {{ block.settings.mobile_padding_bottom }}px;
+    padding-left: {{ block.settings.mobile_padding_x }}px;
+    padding-right: {{ block.settings.mobile_padding_x }}px;
+    {% if block.settings.has_link %}
+      cursor: pointer;
+    {% endif %}
+  }
+
+  @media (min-width: 1024px) {
+    #shopify-block-{{ block.id }} .bg-responsive-block-layout {
+      flex-direction: {{ block.settings.pc_direction }};
+      justify-content: {{ block.settings.pc_justify }};
+      align-items: {{ block.settings.pc_align }};
+      gap: {{ block.settings.pc_gap }}px;
+      padding-top: {{ block.settings.pc_padding_top }}px;
+      padding-bottom: {{ block.settings.pc_padding_bottom }}px;
+      padding-left: 0px;
+      padding-right: 0px;
+      
+      {% if block.settings.pc_full_width %}
+        width: 100%;
+      {% else %}
+        width: {{ block.settings.pc_lg_width }}vw;
+        left: 50%;
+        transform: translateX(-50%);
+      {% endif %}
+    }
+  }
+
+  @media (min-width: 1280px) {
+    #shopify-block-{{ block.id }} .bg-responsive-block-layout {
+      {% if block.settings.pc_full_width %}
+        width: 100%;
+      {% else %}
+        width: {{ block.settings.pc_xl_width }}px;
+        left: 50%;
+        transform: translateX(-50%);
+      {% endif %}
+    }
+  }
+  {% if block.settings.full_screen_bg %}
+    #shopify-block-{{ block.id }} {
+      width: 100vw;
+      height: 100vh;
+    }
+    #shopify-block-{{ block.id }} .flex-layout-image {
+      width: 100vw;
+      height: 100vh;
+    }
+    #shopify-block-{{ block.id }} .flex-layout-video {
+      width: 100vw;
+      height: 100vh;
+      object-fit: cover;
+      object-position: center; 
+    }
+  {% endif %}
+
+</style>
+{% if block.settings.bg_type == 'image' %}
+  {% if block.settings.pc_background_image != blank %}
+    {% render 'zz-img',
+      pc_image: block.settings.pc_background_image,
+      mb_image: block.settings.mobile_background_image,
+      pc_width: 2000,
+      mb_width: 1024,
+      class_name: 'flex-layout-image',
+  %}
+  {% endif %}
+{% endif %}
+{% if block.settings.bg_type == 'video' %}
+  {% if block.settings.video_loop %}
+    {% assign loop = true %}
+  {% else %}
+    {% assign loop = false %}
+  {% endif %}
+  {% if block.settings.full_screen_bg %}
+    {% assign lazy = false %}
+  {% else %}
+    {% assign lazy = true %}
+  {% endif %}
+
+  {% if block.settings.pc_background_video_url != blank %}
+    {% assign pc_video = block.settings.pc_background_video_url %}
+  {% else %}
+    {% assign pc_video = block.settings.pc_background_video %}
+  {% endif %}
+  {% render 'zz-video',
+    pc_video: pc_video,
+    pc_poster: block.settings.pc_background_video_poster,
+    mb_video: block.settings.mobile_background_video,
+    mb_poster: block.settings.mobile_background_video_poster,
+    lazy: lazy,
+    class: 'flex-layout-video',
+    autoplay: true,
+    loop: loop,
+    muted: true
+  %}
+{% endif %}
+
+{% assign layout_class = 'bg-layout' | append: block.id %}
+
+<div class="bg-responsive-block-layout {{ layout_class }} {{ block.settings.self_animation }} {{ block.settings.child_animation }}">
+  
+    {% content_for 'blocks' %}
+</div>
+
+
+
+{% if block.settings.has_link %}
+  <script>
+    document.addEventListener('DOMContentLoaded', (event) => {
+      const btn = document.getElementsByClassName('{{ layout_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 %}