zz-shopify-components 0.14.0 → 0.15.1-beta.0

package/assets/zz-components.css

@@ -6,7 +6,7 @@
   border-radius: 32px;
   background: #F5F5F6;
 }
-html, body {
+body {
   overflow-x: hidden;
 }
 .zz-radio-tabs-black.zz-radio-tabs {
@@ -127,7 +127,7 @@ zz-radio-tabs-item {
 }
 .content-text ol {
   list-style: decimal;
-  padding-left: 20px;
+  padding-left: 25px;
 }
 
 .content-text ul {

package/blocks/zz-accessories-jp-item.liquid

@@ -0,0 +1,179 @@
+<style>
+  #shopify-block-{{ block.id }} .banner-item {
+    box-sizing: border-box;
+    background: {{ block.settings.banner_bg_color }};
+  }
+  @media screen and (min-width: 1024px) {
+    #shopify-block-{{ block.id }}  {
+      width: 238px;
+      height: fit-content;
+    }
+    #shopify-block-{{ block.id }} .banner-item {
+      box-sizing: border-box;
+      background: {{ block.settings.banner_bg_color }};
+    }
+  }
+  
+  
+  
+  @media screen and (max-width: 1023px) {
+ 
+    #shopify-block-{{ block.id }}  {
+      
+      height: fit-content;
+      width: calc(50% - 8px);
+    }
+    #shopify-block-{{ block.id }} .banner-item {
+      width: 100%;
+      height: fit-content;
+    }
+ 
+  }
+</style>
+
+{% assign btn_class = 'zz-accessories-item-btn' | append: block.id %}
+
+<div class='banner-item lg:tw-px-[27px] lg:tw-py-[37px] max-lg:tw-py-[24px] max-lg:tw-px-[18px] tw-rounded-[4px] lg:tw-rounded-[6px]'>
+  <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='slide-title tw-h-[42px] lg:tw-h-[58px] tw-mb-[23px] lg:tw-mb-[34px] tw-text-[16px] lg:tw-text-[18px] tw-leading-[1.3] tw-text-center tw-font-bold tw-text-black'
+      style='color: {{ block.settings.slide_title_color }};'>
+      {{ block.settings.slide_title }}
+    </div>
+   
+  <a
+    class='tw-block tw-relative tw-text-center {{ btn_class }} tw-w-full tw-mx-auto tw-mt-[30px] tw-h-[24px] lg:tw-h-[34px] tw-rounded-[3px] tw-cursor-pointer tw-text-white tw-font-medium tw-text-[9px] lg:tw-text-[12px] tw-leading-[24px] lg:tw-leading-[34px] 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 }} 
+    <span class="max-lg:tw-hidden tw-absolute  tw-right-[8px] tw-top-[11px]">
+      <svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M0.630737 11.1126L9.37046 5.90794L0.630737 0.624512" stroke="black" stroke-width="0.661193" stroke-miterlimit="10"/>
+      </svg>
+    </span>
+    <span class="lg:tw-hidden tw-absolute tw-right-[7px] tw-top-[8px]">
+      <svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M0.630737 11.1126L9.37046 5.90794L0.630737 0.624512" stroke="black" stroke-width="0.661193" stroke-miterlimit="10"/>
+      </svg>
+    </span>
+      
+  </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 Japan 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": "richtext",
+      "id": "slide_title",
+      "label": "标题"
+    },
+    {
+      "type": "color",
+      "id": "slide_title_color",
+      "default": "#000000",
+      "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": "Accessories JP Item"
+    }
+  ]
+}
+{% endschema %}

package/blocks/zz-accessories-swiper.liquid

@@ -23,7 +23,9 @@
   }
 
   #shopify-block-{{ block.id }} .zz-accessories-swiper .swiper-slide {
-    width: 320px;
+    {% if block.settings.type != 'japan' %}
+      width: 320px;
+    {% endif %}
     height: fit-content;
   }
 
@@ -69,6 +71,7 @@
       padding-top: 64px;
       padding-bottom: 108px;
     }
+   
   }
 
   @media screen and (max-width: 1023px) {
@@ -77,14 +80,29 @@
       box-sizing: border-box;
     }
     #shopify-block-{{ block.id }} .zz-accessories-swiper .swiper-slide {
-      width: 100%;
+      {% if block.settings.type != 'japan' %}
+        width: 100%;
+      {% endif %}
+     
     }
+    {% if block.settings.type == 'japan' %}
+      #shopify-block-{{ block.id }} .accessories-item-list {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        gap: 16px;
+      }
+    {% endif %}
 
     #shopify-block-{{ block.id }} .swiper-button-next,
     #shopify-block-{{ block.id }} .swiper-button-prev {
       width: 36px;
       height: 36px;
+      {% if block.settings.type == 'japan' %}
+        display: none;
+      {% endif %}
     }
+    
     #shopify-block-{{ block.id }} .swiper-button-prev {
       left: 50%;
       transform: translate(-{{ btn_offset }}px, 0px);
@@ -93,7 +111,11 @@
       right: 50%;
       transform: translate({{ btn_offset }}px, 0px);
     }
+    
     #shopify-block-{{ block.id }} .zz-accessories-swiper .swiper-pagination-bullets {
+      {% if block.settings.type == 'japan' %}
+        display: none;
+      {% endif %}
       bottom: 9px;
     }
 
@@ -109,7 +131,7 @@
   class='swiper zz-accessories-swiper'
   data-id='{{ block.id }}'
 >
-  <div class='swiper-wrapper'>
+  <div class='swiper-wrapper accessories-item-list'>
     {% content_for 'blocks' %}
   </div>
   <!-- If we need navigation buttons -->
@@ -141,39 +163,48 @@
 </div>
 
 <script>
-  const blockId = '{{ block.id }}';
+  
   document.addEventListener('DOMContentLoaded', function () {
-    // 轮播图每个 wrapper 之间的间距
-    let isDesktop = window.innerWidth > 1023;
+    const blockId = '{{ block.id }}';
+    const type = '{{ block.settings.type }}';
+    function initSwiper() {
+        // 轮播图每个 wrapper 之间的间距
+        let isDesktop = window.innerWidth > 1023;
+        if (type === 'japan' && !isDesktop) {
+          // 日本移动端直接展示 不轮播
+          return;
+        }
 
-    // 获取 class zz-accessories-swiper 的元素 且data-id 为 block.id 的元素
-    const zzAccessoriesSwiper = document.querySelector(
-      `.zz-accessories-swiper[data-id='${blockId}']`
-    );
-    const swiperWrapper = zzAccessoriesSwiper.querySelector('.swiper-wrapper');
-    // 获取当前 swiper-wrapper 下面 所有 第一层 div
-    const swiperSlides = swiperWrapper.querySelectorAll(':scope > div');
-    // 给每个 swiper-slide 添加 class swiper-slide
-    swiperSlides.forEach((slide) => {
-      slide.classList.add('swiper-slide');
-    });
-    setTimeout(() => {
-      const bannerAccessoriesSwiper = new Swiper('.zz-accessories-swiper', {
-        initialSlide: isDesktop ? 1 : 0,
-        slidesPerView: 'auto',
-        centeredSlides: true,
-        spaceBetween: isDesktop ? 24 : 8,
-        navigation: {
-          nextEl: '.swiper-button-next',
-          prevEl: '.swiper-button-prev',
-        },
-        pagination: {
-          el: '.swiper-pagination',
-          clickable: true,
-        },
-        effect: 'slide',
-      });
-    }, 200);
+        // 获取 class zz-accessories-swiper 的元素 且data-id 为 block.id 的元素
+        const zzAccessoriesSwiper = document.querySelector(
+          `.zz-accessories-swiper[data-id='${blockId}']`
+        );
+        const swiperWrapper = zzAccessoriesSwiper.querySelector('.swiper-wrapper');
+        // 获取当前 swiper-wrapper 下面 所有 第一层 div
+        const swiperSlides = swiperWrapper.querySelectorAll(':scope > div');
+        // 给每个 swiper-slide 添加 class swiper-slide
+        swiperSlides.forEach((slide) => {
+          slide.classList.add('swiper-slide');
+        });
+        setTimeout(() => {
+          const bannerAccessoriesSwiper = new Swiper('.zz-accessories-swiper', {
+            initialSlide: isDesktop ? type === 'japan' ? 2 : 1 : 0,
+            slidesPerView: 'auto',
+            centeredSlides: true,
+            spaceBetween: isDesktop ? 24 : 8,
+            navigation: {
+              nextEl: '.swiper-button-next',
+              prevEl: '.swiper-button-prev',
+            },
+            pagination: {
+              el: '.swiper-pagination',
+              clickable: true,
+            },
+            effect: 'slide',
+          });
+        }, 200);
+    }
+    initSwiper();
   });
 </script>
 
@@ -204,7 +235,23 @@
       "type": "image_picker",
       "id": "next_icon",
       "label": "轮播下一张图标"
-    }
+    },
+    {
+      "type": "select",
+      "id": "type",
+      "label": "类型",
+      "options": [
+        {
+          "value": "normal",
+          "label": "正常模式"
+        },
+        {
+          "value": "japan",
+          "label": "日本站模式"
+        },
+      ],
+      "default": "normal"
+    },
   ],
   "blocks": [
     {
@@ -212,6 +259,9 @@
     },
     {
       "type": "zz-accessories-price-item",
+    },
+    {
+      "type": "zz-accessories-jp-item"
     }
   ],
   "presets": [

package/blocks/zz-flex-layout-widget.liquid

@@ -183,6 +183,17 @@
       "label": "移动端圆角大小",
       "default": 0
     },
+    {
+      "type": "select",
+      "id": "pc_mobile_show",
+      "label": "PC/移动端分开显示",
+      "options": [
+        { "value": "pc_mobile_show", "label": "PC/移动端都显示" },
+        { "value": "pc_only", "label": "PC端显示" },
+        { "value": "mobile_only", "label": "移动端显示" }
+      ],
+      "default": "pc_mobile_show"
+    },
     {
       "type": "header",
       "content": "动画设置"
@@ -256,13 +267,18 @@
 {% endschema %}
 
 <style>
-  #shopify-block-{{ block.id }} {
-    {% if block.settings.mobile_width == 0 %}
-      width: 100%;
-      flex: 1;
-    {% else %}
-      width: {{ block.settings.mobile_width }}%;
-    {% endif %}
+  @media (max-width: 1024px) {
+    #shopify-block-{{ block.id }} {
+      {% if block.settings.mobile_width == 0 %}
+        width: 100%;
+        flex: 1;
+      {% else %}
+        width: {{ block.settings.mobile_width }}%;
+      {% endif %}
+      {% if block.settings.pc_mobile_show == "pc_only" %}
+        display: none;
+      {% endif %}
+    }
   }
   #shopify-block-{{ block.id }} .flex-layout-widget-container {
     width: 100%;
@@ -288,6 +304,9 @@
       {% else %}
         width: {{ block.settings.pc_width }}%;
       {% endif %}
+      {% if block.settings.pc_mobile_show == "mobile_only" %}
+        display: none;
+      {% endif %}
     }
     #shopify-block-{{ block.id }} .flex-layout-widget-container {
       width: 100%;

package/blocks/zz-price-tag-line.liquid

@@ -0,0 +1,56 @@
+{% assign product = all_products[block.settings.product] %}
+{% assign variant_id = block.settings.variant_id | times: 1 %}
+{% assign variant = product.variants | where: 'id', variant_id | first %}
+
+{% if block.settings.custom_currency_unit != blank %}
+{% render 'zz-price-tag-unit',
+  price: variant.price,
+    compare_at_price: variant.compare_at_price,
+    custom_currency_unit: block.settings.custom_currency_unit
+  %}
+{% else %}
+  {% render 'zz-price-tag',
+    price: variant.price,
+    compare_at_price: variant.compare_at_price,
+    show_discount_percentage_off: block.settings.show_discount_percentage_off
+  %}
+{% endif %}
+
+{% schema %}
+{
+  "name": "Price Tag Line",
+  "settings": [
+    {
+      "type": "product",
+      "id": "product",
+      "label": "Product",
+      "info": "选择产品"
+    },
+    {
+      "type": "text",
+      "id": "variant_id",
+      "label": "Variant ID",
+      "placeholder": "变体ID",
+      "info": "输入变体ID，变体ID可以在产品编辑页面查看"
+    },
+    {
+      "type": "checkbox",
+      "id": "show_discount_percentage_off",
+      "label": "展示 Off 后缀",
+      "default": true
+    },
+    {
+      "type": "text",
+      "id": "custom_currency_unit",
+      "label": "自定义货币单位",
+      "placeholder": "自定义货币单位",
+      "info": "输入自定义货币单位，如：円，会放到价格后"
+    },
+  ],
+  "presets": [
+    {
+      "name": "Price Tag Line"
+    }
+  ]
+}
+{% endschema %}

package/blocks/zz-tag.liquid

@@ -57,6 +57,26 @@
         "default": 10,
         "info": "单位：px"
       },
+      {
+        "type": "range",
+        "id": "pc_font_size",
+        "min": 12,
+        "max": 60,
+        "step": 1,
+        "unit": "px",
+        "label": "PC Font Size",
+        "default": 18
+      },
+      {
+        "type": "range",
+        "id": "mb_font_size",
+        "min": 12,
+        "max": 48,
+        "step": 1,
+        "unit": "px",
+        "label": "Mobile Font Size",
+        "default": 14
+      },
       {
         "type": "number",
         "id": "pc_padding_x",
@@ -152,6 +172,7 @@
       padding-bottom: {{ block.settings.mobile_padding_y }}px;
       padding-left: {{ block.settings.mobile_padding_x }}px;
       padding-right: {{ block.settings.mobile_padding_x }}px;
+      font-size: {{ block.settings.mb_font_size }}px;
       {% if block.settings.border_color != blank %}
         border: 1px solid {{ block.settings.border_color }};
       {% endif %}
@@ -164,6 +185,7 @@
         padding-bottom: {{ block.settings.pc_padding_y }}px;
         padding-left: {{ block.settings.pc_padding_x }}px;
         padding-right: {{ block.settings.pc_padding_x }}px;
+        font-size: {{ block.settings.pc_font_size }}px;
         {% if block.settings.border_color != blank %}
           border: 2px solid {{ block.settings.border_color }};
         {% endif %}

package/blocks/zz-title.liquid

@@ -28,26 +28,13 @@
       ],
       "default": "h2"
     },
+
     {
-      "type": "select",
-      "id": "pc_font_weight",
-      "label": "PC Font Weight",
-      "options": [
-        { "value": "default", "label": "默认" },
-        { "value": "custom", "label": "自定义" }
-      ],
-      "default": "default"
-    },
-    {
-      "type": "range",
-      "id": "pc_font_weight_custom",
-      "label": "PC Font Weight Custom",
-      "min": 100,
-      "max": 900,
-      "step": 100,
-      "default": 700,
-      "visible_if": "{{ block.settings.pc_font_weight == 'custom' }}"
+      "type": "text",
+      "id": "line_height",
+      "label": "Line Height",
     },
+   
     {
         "type": "checkbox",
         "id": "italic",
@@ -94,6 +81,26 @@
       "label": "PC下外边距 (Margin Bottom)",
       "default": 0
     },
+    {
+      "type": "select",
+      "id": "pc_font_weight",
+      "label": "PC Font Weight",
+      "options": [
+        { "value": "default", "label": "默认" },
+        { "value": "custom", "label": "自定义" }
+      ],
+      "default": "default"
+    },
+    {
+      "type": "range",
+      "id": "pc_font_weight_custom",
+      "label": "PC Font Weight Custom",
+      "min": 100,
+      "max": 900,
+      "step": 100,
+      "default": 700,
+      "visible_if": "{{ block.settings.pc_font_weight == 'custom' }}"
+    },
     {
       "type": "header",
       "content": "📱 移动端样式设置"
@@ -284,4 +291,10 @@
     }
   {% endif %}
 
+  {% if block.settings.line_height %}
+    #shopify-block-{{ block.id }} .zz-title-hx {
+      line-height: {{ block.settings.line_height }};
+    }
+  {% endif %}
+
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-shopify-components",
-  "version": "0.14.0",
+  "version": "0.15.1-beta.0",
   "description": "Reusable Shopify components for theme projects",
   "keywords": [
     "shopify",

package/snippets/zz-price-tag-unit.liquid

@@ -0,0 +1,35 @@
+{% assign discount_value = compare_at_price | minus: price %}
+{% assign discount_value = discount_value | money_without_currency %}
+
+<zz-price-custom-currency-unit 
+  class='tw-flex tw-items-center'
+  unit='{{ custom_currency_unit }}'
+  price='{{ price | money_without_currency }}'
+  compare-price='{{ compare_at_price | money_without_currency }}'
+  discount='{{ discount_value }}'
+>
+  <span class='tw-font-[800] tw-text-[18px] lg:tw-text-[28px] xl:tw-text-[36px] tw-text-black'>
+    {{ price | money_without_currency }}{{ custom_currency_unit }}
+  </span>
+  {% if compare_at_price > price %}
+    <span class='before tw-font-regular tw-ml-[4px] lg:tw-ml-[8px] tw-text-[16px] lg:tw-text-[18px] xl:tw-text-[22px] tw-text-[rgba(0,0,0,0.3)] tw-line-through'>
+      {{ compare_at_price | money_without_currency }}{{ custom_currency_unit }}
+    </span>
+    
+    <div class='discount-value-tag tw-relative tw-font-semibold tw-text-[#DF483F] tw-bg-[#FCD8D6] 
+      max-lg:tw-w-[124px] max-lg:tw-ml-[14px] max-lg:tw-text-[14px] max-lg:tw-pl-[18px] max-lg:tw-pr-[12px] max-lg:tw-h-[22px] max-lg:tw-leading-[22px] 
+      lg:tw-w-[182px] lg:tw-ml-[20px] xl:tw-ml-[24px] lg:tw-pl-[30px] lg:tw-pr-[15px] lg:tw-text-[20px] lg:tw-h-[37px] lg:tw-leading-[37px]'>
+      {{ discount_value }}{{ custom_currency_unit }}OFF
+    </div>
+  {% endif %}
+</zz-price-custom-currency-unit>
+<style>
+ .discount-value-tag {
+    background: url("https://cdn.shopify.com/s/files/1/0606/0969/1734/files/Rectangle_34625370.png?v=1757328788");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    
+} 
+
+
+</style>