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

package/blocks/zz-accessories-item.liquid

@@ -1,188 +1,188 @@
-
-
-<style>
-  
-  #shopify-block-{{ block.id }}  {
-    width: 320px;
-    height: fit-content;
-  }
-  #shopify-block-{{ block.id }} .banner-item {
-    position: relative;
-    width: 320px;
-    height: 438px;
-    box-sizing: border-box;
-    background: {{ block.settings.banner_bg_color }};
-  }
-  
-  @media screen and (max-width: 1023px) {
- 
-    #shopify-block-{{ block.id }}  {
-      width: 100%;
-    }
-    #shopify-block-{{ block.id }} .banner-item {
-      width: 100%;
-      height: auto;
-      
-    }
- 
-  }
-</style>
-
-{% assign btn_class = 'zz-accessories-item-btn' | append: block.id %}
-
-<div class='banner-item tw-pb-[20px] tw-px-[20px] tw-rounded-[12px] lg:tw-rounded-[16px]'>
-  <div class='max-lg:tw-px-[15px]'>
-    {% render 'zz-img',
-      pc_image: block.settings.image_pc,
-      mb_image: block.settings.image,
-      image_alt: block.settings.slide_title,
-      pc_width: 915,
-      mb_width: 640,
-    %}
-  </div>
-  <div class="lg:tw-h-[110px]">
-    <p 
-      class='slide-title tw-mt-[20px] lg:tw-mt-[30px] tw-mb-[8px] tw-text-[16px] lg:tw-text-[18px] tw-leading-[1.2] tw-text-center tw-font-bold tw-text-black'
-      style='color: {{ block.settings.slide_title_color }};'>
-      {{ block.settings.slide_title }}
-    </p>
-    {% render 'zz-content-text',
-      text: block.settings.slide_content,
-      mb_text: block.settings.slide_content,
-      text_color: block.settings.slide_content_color,
-      pc_font_size: 12,
-      mobile_font_size: 12,
-      pc_text_align: 'center',
-      mobile_text_align: 'center',
-    %}
-  </div>
-  <a
-    class='tw-block {{ btn_class }} tw-mx-auto tw-mt-[30px] tw-px-[28px] lg:tw-px-[12px] tw-w-fit tw-h-[42px] lg:tw-h-[28px] tw-rounded-[3px] tw-cursor-pointer tw-text-white tw-font-medium tw-text-[16px] lg:tw-text-[14px] tw-leading-[42px] lg:tw-leading-[28px] tw-bg-black tw-transition hover:tw-bg-black/80'
-    style='background: {{ block.settings.btn_bg_color }}; color: {{ block.settings.btn_text_color }};hover: color: {{ block.settings.btn_hover_color }};'  
-    href='{{ block.settings.url }}'
-  >
-    {{ block.settings.btn_text }}
-  </a>
-</div>
-
-{% if block.settings.function_type == 'link_map' %}
-  <script>
-    document.addEventListener('DOMContentLoaded', (event) => {
-      const btns = document.querySelectorAll('.{{ btn_class }}')
-      if(btns && btns[0]) {
-        if(window.bindSiteJump) {
-          bindSiteJump(btns[0], {{ block.settings.links | json }})
-        }
-      }
-
-    })
-  </script>
-{% endif %}
-
-{% schema %}
-{
-  "name": "Accessories Swiper Item",
-  "settings": [
-    {
-      "type": "color",
-      "id": "banner_bg_color",
-      "default": "#F5F5F6",
-      "label": "轮播卡片背景色"
-    },
-    {
-      "type": "image_picker",
-      "id": "image_pc",
-      "label": "Image"
-    },
-    {
-      "type": "image_picker",
-      "id": "image",
-      "label": "Image(mobile)"
-    },
-    {
-      "type": "text",
-      "id": "slide_title",
-      "label": "标题"
-    },
-    {
-      "type": "color",
-      "id": "slide_title_color",
-      "default": "#000000",
-      "label": "标题颜色"
-    },
-    {
-      "type": "richtext",
-      "id": "slide_content",
-      "label": "内容"
-    },
-    {
-      "type": "color",
-      "id": "slide_content_color",
-      "default": "#170B01",
-      "label": "内容颜色"
-    },
-    {
-      "type": "text",
-      "id": "btn_text",
-      "label": "按钮文字",
-      "default": "Buy Now"
-    },
-    {
-      "type": "color",
-      "id": "btn_bg_color",
-      "default": "#000000",
-      "label": "按钮背景颜色"
-    },
-    {
-      "type": "color",
-      "id": "btn_hover_color",
-      "default": "#000000",
-      "label": "按钮hover颜色"
-    },
-    {
-      "type": "color",
-      "id": "btn_text_color",
-      "default": "#FFFFFF",
-      "label": "按钮文字颜色"
-    },
-    {
-      "type": "select",
-      "id": "function_type",
-      "label": "功能类型",
-      "options": [
-        {
-          "value": "link",
-          "label": "链接"
-        },
-        {
-          "value": "link_map",
-          "label": "多国家映射"
-        },
-      ],
-      "default": "link"
-    },
-    {
-      "type": "url",
-      "id": "url",
-      "label": "按钮链接",
-      "visible_if": "{{ block.settings.function_type == 'link' }}"
-    },
-    {
-      "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' }}"
-    },
-  ],
-
-  "presets": [
-    {
-      "name": "配件 Item"
-    },
-    {
-      "name": "Accessories Swiper Item"
-    }
-  ]
-}
-{% endschema %}
+
+
+<style>
+  
+  #shopify-block-{{ block.id }}  {
+    width: 320px;
+    height: fit-content;
+  }
+  #shopify-block-{{ block.id }} .banner-item {
+    position: relative;
+    width: 320px;
+    height: 438px;
+    box-sizing: border-box;
+    background: {{ block.settings.banner_bg_color }};
+  }
+  
+  @media screen and (max-width: 1023px) {
+ 
+    #shopify-block-{{ block.id }}  {
+      width: 100%;
+    }
+    #shopify-block-{{ block.id }} .banner-item {
+      width: 100%;
+      height: auto;
+      
+    }
+ 
+  }
+</style>
+
+{% assign btn_class = 'zz-accessories-item-btn' | append: block.id %}
+
+<div class='banner-item tw-pb-[20px] tw-px-[20px] tw-rounded-[12px] lg:tw-rounded-[16px]'>
+  <div class='max-lg:tw-px-[15px]'>
+    {% render 'zz-img',
+      pc_image: block.settings.image_pc,
+      mb_image: block.settings.image,
+      image_alt: block.settings.slide_title,
+      pc_width: 915,
+      mb_width: 640,
+    %}
+  </div>
+  <div class="lg:tw-h-[110px]">
+    <p 
+      class='slide-title tw-mt-[20px] lg:tw-mt-[30px] tw-mb-[8px] tw-text-[16px] lg:tw-text-[18px] tw-leading-[1.2] tw-text-center tw-font-bold tw-text-black'
+      style='color: {{ block.settings.slide_title_color }};'>
+      {{ block.settings.slide_title }}
+    </p>
+    {% render 'zz-content-text',
+      text: block.settings.slide_content,
+      mb_text: block.settings.slide_content,
+      text_color: block.settings.slide_content_color,
+      pc_font_size: 12,
+      mobile_font_size: 12,
+      pc_text_align: 'center',
+      mobile_text_align: 'center',
+    %}
+  </div>
+  <a
+    class='tw-block {{ btn_class }} tw-mx-auto tw-mt-[30px] tw-px-[28px] lg:tw-px-[12px] tw-w-fit tw-h-[42px] lg:tw-h-[28px] tw-rounded-[3px] tw-cursor-pointer tw-text-white tw-font-medium tw-text-[16px] lg:tw-text-[14px] tw-leading-[42px] lg:tw-leading-[28px] tw-bg-black tw-transition hover:tw-bg-black/80'
+    style='background: {{ block.settings.btn_bg_color }}; color: {{ block.settings.btn_text_color }};hover: color: {{ block.settings.btn_hover_color }};'  
+    href='{{ block.settings.url }}'
+  >
+    {{ block.settings.btn_text }}
+  </a>
+</div>
+
+{% if block.settings.function_type == 'link_map' %}
+  <script>
+    document.addEventListener('DOMContentLoaded', (event) => {
+      const btns = document.querySelectorAll('.{{ btn_class }}')
+      if(btns && btns[0]) {
+        if(window.bindSiteJump) {
+          bindSiteJump(btns[0], {{ block.settings.links | json }})
+        }
+      }
+
+    })
+  </script>
+{% endif %}
+
+{% schema %}
+{
+  "name": "Accessories Swiper Item",
+  "settings": [
+    {
+      "type": "color",
+      "id": "banner_bg_color",
+      "default": "#F5F5F6",
+      "label": "轮播卡片背景色"
+    },
+    {
+      "type": "image_picker",
+      "id": "image_pc",
+      "label": "Image"
+    },
+    {
+      "type": "image_picker",
+      "id": "image",
+      "label": "Image(mobile)"
+    },
+    {
+      "type": "text",
+      "id": "slide_title",
+      "label": "标题"
+    },
+    {
+      "type": "color",
+      "id": "slide_title_color",
+      "default": "#000000",
+      "label": "标题颜色"
+    },
+    {
+      "type": "richtext",
+      "id": "slide_content",
+      "label": "内容"
+    },
+    {
+      "type": "color",
+      "id": "slide_content_color",
+      "default": "#170B01",
+      "label": "内容颜色"
+    },
+    {
+      "type": "text",
+      "id": "btn_text",
+      "label": "按钮文字",
+      "default": "Buy Now"
+    },
+    {
+      "type": "color",
+      "id": "btn_bg_color",
+      "default": "#000000",
+      "label": "按钮背景颜色"
+    },
+    {
+      "type": "color",
+      "id": "btn_hover_color",
+      "default": "#000000",
+      "label": "按钮hover颜色"
+    },
+    {
+      "type": "color",
+      "id": "btn_text_color",
+      "default": "#FFFFFF",
+      "label": "按钮文字颜色"
+    },
+    {
+      "type": "select",
+      "id": "function_type",
+      "label": "功能类型",
+      "options": [
+        {
+          "value": "link",
+          "label": "链接"
+        },
+        {
+          "value": "link_map",
+          "label": "多国家映射"
+        },
+      ],
+      "default": "link"
+    },
+    {
+      "type": "url",
+      "id": "url",
+      "label": "按钮链接",
+      "visible_if": "{{ block.settings.function_type == 'link' }}"
+    },
+    {
+      "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' }}"
+    },
+  ],
+
+  "presets": [
+    {
+      "name": "配件 Item"
+    },
+    {
+      "name": "Accessories Swiper Item"
+    }
+  ]
+}
+{% endschema %}