zz-shopify-components 0.24.0 → 0.24.1-beta.0

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

@@ -137,6 +137,18 @@
       "label": "PC端底部内边距 (px)",
       "default": 0
     },
+    {
+      "type": "number",
+      "id": "pc_margin_top",
+      "label": "PC端顶部外边距 (px)",
+      "default": 0
+    },
+    {
+      "type": "number",
+      "id": "pc_margin_bottom",
+      "label": "PC端底部外边距 (px)",
+      "default": 0
+    },
     {
       "type": "checkbox",
       "id": "pc_full_width",
@@ -159,13 +171,6 @@
       "info": "非全屏展示时有效",
       "visible_if": "{{ block.settings.pc_full_width == false }}"
     },
-    {
-      "type": "number",
-      "id": "pc_padding_x",
-      "label": "PC端左右内边距",
-      "default": 0,
-      "info": "单位：px"
-    },
     {
       "type": "number",
       "id": "pc_fixed_height",
@@ -180,16 +185,6 @@
       "default": 0,
       "info": "默认自适应高度，单位：px",
     },
-    {
-      "type": "range",
-      "id": "pc_border_radius",
-      "min": 0,
-      "max": 50,
-      "step": 1,
-      "unit": "px",
-      "label": "PC端圆角大小",
-      "default": 0
-    },
     {
       "type": "header",
       "content": "📱 移动端布局设置"
@@ -256,16 +251,6 @@
       "label": "移动端底部内边距 (px)",
       "default": 0
     },
-    {
-      "type": "range",
-      "id": "mobile_border_radius",
-      "min": 0,
-      "max": 50,
-      "step": 1,
-      "unit": "px",
-      "label": "移动端圆角大小",
-      "default": 0
-    },
     {
       "type": "header",
       "content": "动画设置"
@@ -296,10 +281,6 @@
       ],
       "default": "none-animation"
     },
-    {
-      "type": "header",
-      "content": "特殊设置"
-    },
     {
       "type": "checkbox",
       "id": "has_link",
@@ -352,24 +333,7 @@
       "id": "overflow_x_hidden",
       "label": "是否禁止横轴移动",
       "default": true
-    },
-    {
-      "type": "header",
-      "content": "统计相关"
-    },
-   {
-      "type": "text",
-      "id": "module_id",
-      "label": "唯一业务id",
-      "info": "需要唯一不要与其他模块重复，用户定位、埋点统计、代码隐藏控制等"
-    },
-    {
-      "type": "checkbox",
-      "id": "is_exposure",
-      "label": "是否曝光统计",
-      "default": false,
-      "info": "勾选后会对Block模块进行曝光统计埋点, 必须填写唯一业务id"
-    },
+    }
     
   ],
   "blocks": [
@@ -492,22 +456,11 @@
     padding-bottom: {{ block.settings.mobile_padding_bottom }}px;
     padding-left: {{ block.settings.mobile_padding_x }}px;
     padding-right: {{ block.settings.mobile_padding_x }}px;
-    border-radius: {{ block.settings.mobile_border_radius }}px;
     {% if block.settings.has_link %}
       cursor: pointer;
     {% endif %}
   }
 
-  {% if block.settings.mobile_border_radius != 0 %}
-      #shopify-block-{{ block.id }} .flex-layout-image {
-        border-radius: {{ block.settings.mobile_border_radius }}px;
-      }
-      #shopify-block-{{ block.id }} .flex-layout-video {
-        border-radius: {{ block.settings.mobile_border_radius }}px;
-      }
-  {% endif %}
-
-
   @media (min-width: 1024px) {
     #shopify-block-{{ block.id }} .bg-responsive-block-layout {
       flex-direction: {{ block.settings.pc_direction }};
@@ -516,9 +469,11 @@
       gap: {{ block.settings.pc_gap }}px;
       padding-top: {{ block.settings.pc_padding_top }}px;
       padding-bottom: {{ block.settings.pc_padding_bottom }}px;
-      padding-left: {{ block.settings.pc_padding_x }}px;
-      padding-right: {{ block.settings.pc_padding_x }}px;
-       border-radius: {{ block.settings.pc_border_radius }}px;
+      margin-top: {{ block.settings.pc_margin_top }}px;
+      margin-bottom: {{ block.settings.pc_margin_bottom }}px;
+      padding-left: 0px;
+      padding-right: 0px;
+      
       {% if block.settings.pc_full_width %}
         width: 100%;
       {% else %}
@@ -536,15 +491,6 @@
         object-fit: cover;
       }
     {% endif %}
-
-    {% if block.settings.pc_border_radius != 0 %}
-      #shopify-block-{{ block.id }} .flex-layout-image {
-        border-radius: {{ block.settings.pc_border_radius }}px;
-      }
-      #shopify-block-{{ block.id }} .flex-layout-video {
-        border-radius: {{ block.settings.pc_border_radius }}px;
-      }
-    {% endif %}
   }
 
   @media (min-width: 1280px) {
@@ -628,14 +574,7 @@
 
 {% assign layout_class = 'bg-layout' | append: block.id %}
 
-<div 
-   {% if block.settings.module_id != blank %}
-      data-track-zz-block="{{ block.settings.module_id }}"
-    {% endif %}
-    {% if block.settings.is_exposure != false %}
-      data-track-zz-exposure="true"
-    {% endif %}
-  class="bg-responsive-block-layout {{ layout_class }} {{ block.settings.self_animation }} {{ block.settings.child_animation }}">
+<div class="bg-responsive-block-layout {{ layout_class }} {{ block.settings.self_animation }} {{ block.settings.child_animation }}">
   
     {% content_for 'blocks' %}
 </div>

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

@@ -76,6 +76,18 @@
       "label": "PC端底部内边距 (px)",
       "default": 0
     },
+    {
+      "type": "number",
+      "id": "pc_margin_top",
+      "label": "PC端顶部外边距 (px)",
+      "default": 0
+    },
+    {
+      "type": "number",
+      "id": "pc_margin_bottom",
+      "label": "PC端底部外边距 (px)",
+      "default": 0
+    },
     {
       "type": "number",
       "id": "pc_border_radius",
@@ -605,6 +617,8 @@
       padding-bottom: {{ block.settings.pc_padding_bottom }}px;
       padding-left: {{ block.settings.pc_padding_x }}px;
       padding-right: {{ block.settings.pc_padding_x }}px;
+      margin-top: {{ block.settings.pc_margin_top }}px;
+      margin-bottom: {{ block.settings.pc_margin_bottom }}px;
       border-radius: {{ block.settings.pc_border_radius  }}px;
       
       {% if block.settings.pc_full_width %}

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

@@ -64,7 +64,8 @@
       "options": [
         { "value": "flex-start", "label": "起始对齐 (Flex Start)" },
         { "value": "center", "label": "居中对齐 (Center)" },
-        { "value": "flex-end", "label": "末尾对齐 (Flex End)" }
+        { "value": "flex-end", "label": "末尾对齐 (Flex End)" },
+         { "value": "stretch", "label": "拉伸对齐 (Stretch)" }
       ],
       "default": "center"
     },
@@ -150,7 +151,8 @@
       "options": [
         { "value": "flex-start", "label": "起始对齐 (Flex Start)" },
         { "value": "center", "label": "居中对齐 (Center)" },
-        { "value": "flex-end", "label": "末尾对齐 (Flex End)" }
+        { "value": "flex-end", "label": "末尾对齐 (Flex End)" },
+         { "value": "stretch", "label": "拉伸对齐 (Stretch)" }
       ],
       "default": "center"
     },

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

@@ -0,0 +1,84 @@
+{% assign discount_percentage = block.settings.percentage %}
+<span class='price-tag-mini'>
+  <span class='price-tag-mini__main'>UP TO</span
+  ><span class='price-tag-mini__main-price'>
+    <span class='price-tag-mini__main-discount'>
+      {{- discount_percentage -}}</span
+    ><span class='price-tag-mini__main-discount-off'>%off</span>
+  </span>
+</span>
+
+<style>
+  #shopify-block-{{ block.id }} .price-tag-mini {
+    left: 0px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: 40px;
+    margin-bottom: 10px;
+    padding: 4px 4px;
+    color: #fff;
+    font-weight: bold;
+    background-color: #FC6C0F;
+    line-height: 1;
+    justify-content: start;
+    align-items: center;
+    clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
+  }
+
+  #shopify-block-{{ block.id }} .price-tag-mini__main {
+    font-size: 12px;
+  }
+  #shopify-block-{{ block.id }} .price-tag-mini__main-discount {
+    font-size: 13px;
+  }
+  #shopify-block-{{ block.id }} .price-tag-mini__main-discount-off {
+    font-size: 9px;
+  }
+
+  @media (min-width: 750px) {
+    #shopify-block-{{ block.id }} .price-tag-mini {
+      height: 54px;
+    }
+    #shopify-block-{{ block.id }} .price-tag-mini__main {
+      font-size: 16px;
+    }
+    #shopify-block-{{ block.id }} .price-tag-mini__main-discount {
+      font-size: 18px;
+    }
+    #shopify-block-{{ block.id }} .price-tag-mini__main-discount-off {
+      font-size: 12px;
+    }
+  }
+
+  #shopify-block-{{ block.id }} .price-tag-mini span {
+    position: relative;
+    z-index: 1;
+  }
+</style>
+
+{% schema %}
+{
+  "name": "Price Tag Plain",
+  "settings": [
+    {
+      "type": "number",
+      "id": "percentage",
+      "label": "Percentage",
+      "info": "输入百分比",
+      "default": 10
+    },
+    {
+      "type": "checkbox",
+      "id": "show_discount_percentage_off",
+      "label": "展示 Off 后缀",
+      "default": true
+    }
+  ],
+  "presets": [
+    {
+      "name": "Price Tag Plain"
+    }
+  ]
+}
+{% endschema %}

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

@@ -39,6 +39,28 @@
 
 {% assign media_class = 'zz-link-' | append: block.id %}
 
+{% if block.settings.title_and_content_position == 'top' %}
+  <div class='slide-box {% if block.settings.has_title_and_content %} tw-pb-[20px] lg:tw-pb-[48px] {% else %} tw-h-[25px] {% endif %}  tw-box-border'>
+    <div class='active-box-content tw-hidden'>
+      {% render 'zz-h3',
+        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>
+{% endif %}
+
 <div class='media-box banner-item {{ media_class }}'>
   {% if block.settings.video_pc != blank %}
     {% if block.settings.video_url_pc != blank %}
@@ -67,6 +89,12 @@
   {% endif %}
 </div>
 
+{% if block.settings.title_and_content_position == 'top' %}
+  <div class='max-lg:tw-h-[25px]'>
+  </div>
+{% endif %}
+
+{% if block.settings.title_and_content_position != 'top' %}
 <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',
@@ -86,6 +114,7 @@
     </div>
   </div>
 </div>
+{% endif %}
 
 {% schema %}
 {
@@ -124,6 +153,17 @@
       "label": "是否有标题与内容",
       "default": true
     },
+    {
+      "type": "select",
+      "id": "title_and_content_position",
+      "label": "标题与内容位置",
+      "options": [
+        { "value": "top", "label": "顶部" },
+        { "value": "bottom", "label": "底部" },
+      ],
+      "default": "bottom",
+      "visible_if": "{{ block.settings.has_title_and_content == true }}"
+    },
     {
       "type": "text",
       "id": "heading",

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

@@ -23,11 +23,18 @@
     height: fit-content;
     position: relative;
     letter-spacing: 0;
+    {% if block.settings.has_title_and_content and block.settings.title_and_content_position == 'top' %}
+      padding-bottom: 40px;
+    {% endif %}
   }
 
   #shopify-block-{{block.id}} .swiper-button-next,
   #shopify-block-{{block.id}} .swiper-button-prev {
-    top: 0;
+    {% if block.settings.has_title_and_content and block.settings.title_and_content_position == 'top' %}
+      bottom: 0;
+    {% else %}
+      top: 0;
+    {% endif %}
     width: 48px;
     height: 48px;
   }
@@ -61,7 +68,9 @@
   #shopify-block-{{block.id}} .zz-video-swiper-preview .swiper-pagination-bullets .swiper-pagination-bullet-active {
     position: relative;
     width: 120px;
-    {% if block.settings.if_autoplay == false %}
+    {% if  block.settings.title_and_content_position == 'top' %}
+      background: rgba(0, 0, 0, 1);
+    {% elsif block.settings.if_autoplay == false %}
      background: #fff;
     {% endif %}
   }
@@ -121,7 +130,11 @@
     }
     #shopify-block-{{block.id}} .zz-video-swiper-preview .swiper-pagination-bullets {
       {% if block.settings.has_title_and_content %}
-        bottom: 220px;
+        {% if block.settings.title_and_content_position == 'top' %}
+          bottom: 0px;
+        {% else %}
+          bottom: 220px;
+        {% endif %}
       {% else %}
         bottom: 21px;
       {% endif %}
@@ -134,7 +147,11 @@
       display: block;
       position: absolute;
       left: calc(50% - 30px);
-      top: 0;
+      {% if block.settings.title_and_content_position == 'top' %}
+        bottom: 40px;
+      {% else %}
+        top: 0;
+      {% endif %}
       width: 83.3594vw;
       height: 46.875vw;
       transform: translateX(-150%);
@@ -148,7 +165,11 @@
       display: block;
       position: absolute;
       right: calc(50% - 30px);
-      top: 0;
+      {% if block.settings.title_and_content_position == 'top' %}
+        bottom: 40px;
+      {% else %}
+        top: 0;
+      {% endif %}
       width: 83.3594vw;
       height: 46.875vw;
       transform: translateX(150%);
@@ -166,22 +187,36 @@
       height: 600px;
     }
     #shopify-block-{{block.id}} .swiper-button-prev {
-      transform: translate(-594px, 300px);
+      {% if block.settings.title_and_content_position == 'top' %}
+        transform: translate(-594px, 60px);
+      {% else %}
+        transform: translate(-594px, 300px);
+      {% endif %}
     }
     #shopify-block-{{block.id}} .swiper-button-next {
-      transform: translate(594px, 300px);
+      {% if block.settings.title_and_content_position == 'top' %}
+        transform: translate(594px, 60px);
+      {% else %}
+        transform: translate(594px, 300px);
+      {% endif %}
     }
-
   }
+
+    {% if block.settings.title_and_content_position == 'top' %}
+    #shopify-block-{{block.id}} .swiper-wrapper {
+      align-items: stretch;
+    }
+    #shopify-block-{{block.id}} .swiper-slide {
+      display: flex;
+      flex-direction: column;
+      height: auto !important;
+      align-content: end;
+      align-self: flex-end;
+    }
+    {% endif %}
 </style>
 
 <div
-  {% if block.settings.module_id != blank %}
-      data-track-zz-block="{{ block.settings.module_id }}"
-    {% endif %}
-    {% if block.settings.is_exposure != false %}
-      data-track-zz-exposure="true"
-    {% endif %}
   class='zz-video-swiper-preview zz-video-swiper-preview-{{ block.id }}'
 >
   <div class='swiper-wrapper'>
@@ -532,25 +567,18 @@
       "type": "checkbox",
       "id": "has_title_and_content",
       "label": "是否有标题与内容",
-      "default": true
-    },
-    {
-      "type": "header",
-      "content": "统计相关"
-    },
-   {
-      "type": "text",
-      "id": "module_id",
-      "label": "唯一业务id",
-      "info": "需要唯一不要与其他模块重复，用户定位、埋点统计、代码隐藏控制等"
+      "default": true,
     },
     {
-      "type": "checkbox",
-      "id": "is_exposure",
-      "label": "是否曝光统计",
-      "default": false,
-      "info": "勾选后会对Block模块进行曝光统计埋点, 必须填写唯一业务id"
-    },
+      "type": "select",
+      "id": "title_and_content_position",
+      "label": "标题与内容位置",
+      "options": [
+        { "value": "top", "label": "顶部" },
+        { "value": "bottom", "label": "底部" },
+      ],
+      "default": "bottom",
+    }
   ],
   "blocks": [
     {
@@ -573,7 +601,8 @@
         "gradient_color_left": "linear-gradient(270deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 1) 40%)",
         "gradient_color_right": "linear-gradient(90deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 1) 40%)",
         "prev_next_type": "dark",
-        "has_title_and_content": true
+        "has_title_and_content": true,
+        "title_and_content_position": "bottom"
       },
       "blocks": [
         {
@@ -586,6 +615,7 @@
             "title_color": "#333232",
             "row_content": "<p>Description set here, Description set here.</p>",
             "content_color": "#5d544c",
+            "title_and_content_position": "bottom"
           },
         }, 
         {
@@ -598,6 +628,7 @@
             "title_color": "#333232",
             "row_content": "<p>Description set here, Description set here.</p>",
             "content_color": "#5d544c",
+            "title_and_content_position": "bottom"
           },
         
         }

package/package.json

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

package/sections/zz-video-tab-swiper.liquid

@@ -66,6 +66,7 @@
      }
      #shopify-section-{{ section.id }}  .swiper-pagination-horizontal {
        overflow-x: auto;       /* 启用横向滚动 */
+       overflow-y: hidden;
        white-space: nowrap;    /* 不换行，强制所有子项在一行 */
        -webkit-overflow-scrolling: touch; /* 移动端流畅滚动（可选） */
        scrollbar-width: none;     /* Firefox */
@@ -152,18 +153,18 @@
    }
    @media screen and (min-width: 1280px) {
      #shopify-section-{{ section.id }} .zz-banner-tab-swiper {
-      width: 1220px;
+      width: 1080px;
      }
      #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-slide {
-      width: 1220px;
+      width: 1080px;
      }
      #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-slide .media-box {
        position: relative;
-       width: 1220px;
-        height: 686px;
+       width: 1080px;
+        height: 608px;
      }
      #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets {
-       width: 1030px;
+       width: 930px;
      }
    }