zz-shopify-components 0.25.1-beta.2 → 0.25.1-beta.4

package/blocks/zz-title-comment.liquid

@@ -16,6 +16,16 @@
       "label": "移动标题内容 (Mobile Title Content)",
       "default": "<p>这里是标题</p>"
     },
+    {
+      "type": "select",
+      "id": "comment_color",
+      "label": "评论颜色风格",
+      "options": [
+        { "value": "light", "label": "浅色" },
+        { "value": "dark", "label": "深色" },
+      ],
+      "default": "light"
+    },
     {
       "type": "richtext",
       "id": "pc_description",
@@ -203,26 +213,64 @@
   {% if block_size > 0 %}
     <div class="comment-content tw-absolute max-lg:tw-top-[-10px] max-lg:tw-right-[-20px] lg:tw-top-[20px] lg:tw-right-[-40px] tw-z-10">
       <div class="comment-btn lg:tw-w-[40px] lg:tw-h-[40px] max-lg:tw-w-[28px] max-lg:tw-h-[28px]">
-        <svg class="max-lg:tw-hidden" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M20 0.5C30.7696 0.5 39.5 9.23045 39.5 20C39.5 30.7696 30.7696 39.5 20 39.5C9.23045 39.5 0.5 30.7696 0.5 20C0.5 9.23045 9.23045 0.5 20 0.5Z" stroke="white" stroke-opacity="0.15"/>
-          <circle cx="13" cy="20" r="2" fill="white" fill-opacity="0.6"/>
-          <circle cx="20" cy="20" r="2" fill="white" fill-opacity="0.6"/>
-          <circle cx="27" cy="20" r="2" fill="white" fill-opacity="0.6"/>
-        </svg>
-        <svg class="lg:tw-hidden" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <rect x="0.352941" y="0.352941" width="27.2941" height="27.2941" rx="13.6471" stroke="white" stroke-opacity="0.15" stroke-width="0.705882"/>
-        <circle cx="9" cy="14" r="1.5" fill="white" fill-opacity="0.6"/>
-        <circle cx="14" cy="14" r="1.5" fill="white" fill-opacity="0.6"/>
-        <circle cx="19" cy="14" r="1.5" fill="white" fill-opacity="0.6"/>
-        </svg>
+        {% if block.settings.comment_color == 'dark' %}
+          <svg class="max-lg:tw-hidden" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <foreignObject x="-12" y="-12" width="64" height="64"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(6px);clip-path:url(#bgblur_0_1304_6600_clip_path);height:100%;width:100%"></div></foreignObject><g data-figma-bg-blur-radius="12">
+            <path d="M0 20C0 8.95431 8.95431 0 20 0C31.0457 0 40 8.95431 40 20C40 31.0457 31.0457 40 20 40C8.95431 40 0 31.0457 0 20Z" fill="black" fill-opacity="0.03"/>
+            <path d="M20 0.5C30.7696 0.5 39.5 9.23045 39.5 20C39.5 30.7696 30.7696 39.5 20 39.5C9.23045 39.5 0.5 30.7696 0.5 20C0.5 9.23045 9.23045 0.5 20 0.5Z" stroke="black" stroke-opacity="0.06"/>
+            <circle cx="13" cy="20" r="2" fill="black" fill-opacity="0.6"/>
+            <circle cx="20" cy="20" r="2" fill="black" fill-opacity="0.6"/>
+            <circle cx="27" cy="20" r="2" fill="black" fill-opacity="0.6"/>
+            </g>
+            <defs>
+            <clipPath id="bgblur_0_1304_6600_clip_path" transform="translate(12 12)"><path d="M0 20C0 8.95431 8.95431 0 20 0C31.0457 0 40 8.95431 40 20C40 31.0457 31.0457 40 20 40C8.95431 40 0 31.0457 0 20Z"/>
+            </clipPath></defs>
+          </svg>
+
+          <svg class="lg:tw-hidden" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <foreignObject x="-12" y="-12" width="52" height="52"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(6px);clip-path:url(#bgblur_0_1226_995_clip_path);height:100%;width:100%"></div></foreignObject><g data-figma-bg-blur-radius="12">
+            <path d="M0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14Z" fill="black" fill-opacity="0.03"/>
+            <path d="M14 0.5C21.4558 0.5 27.5 6.54416 27.5 14C27.5 21.4558 21.4558 27.5 14 27.5C6.54416 27.5 0.5 21.4558 0.5 14C0.5 6.54416 6.54416 0.5 14 0.5Z" stroke="black" stroke-opacity="0.06"/>
+            <circle cx="9" cy="14" r="1.5" fill="black" fill-opacity="0.6"/>
+            <circle cx="14" cy="14" r="1.5" fill="black" fill-opacity="0.6"/>
+            <circle cx="19" cy="14" r="1.5" fill="black" fill-opacity="0.6"/>
+            </g>
+            <defs>
+            <clipPath id="bgblur_0_1226_995_clip_path" transform="translate(12 12)"><path d="M0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14Z"/>
+            </clipPath></defs>
+          </svg>
+
+
+        {% else %}
+          <svg class="max-lg:tw-hidden" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M20 0.5C30.7696 0.5 39.5 9.23045 39.5 20C39.5 30.7696 30.7696 39.5 20 39.5C9.23045 39.5 0.5 30.7696 0.5 20C0.5 9.23045 9.23045 0.5 20 0.5Z" stroke="white" stroke-opacity="0.15"/>
+            <circle cx="13" cy="20" r="2" fill="white" fill-opacity="0.6"/>
+            <circle cx="20" cy="20" r="2" fill="white" fill-opacity="0.6"/>
+            <circle cx="27" cy="20" r="2" fill="white" fill-opacity="0.6"/>
+          </svg>
+          <svg class="lg:tw-hidden" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <rect x="0.352941" y="0.352941" width="27.2941" height="27.2941" rx="13.6471" stroke="white" stroke-opacity="0.15" stroke-width="0.705882"/>
+          <circle cx="9" cy="14" r="1.5" fill="white" fill-opacity="0.6"/>
+          <circle cx="14" cy="14" r="1.5" fill="white" fill-opacity="0.6"/>
+          <circle cx="19" cy="14" r="1.5" fill="white" fill-opacity="0.6"/>
+          </svg>
+        {% endif %}
+        
 
       </div>
       <div class="comment-number-div tw-items-center tw-justify-center lg:tw-pl-[20px] lg:tw-pr-[12px] lg:tw-py-[9px] tw-font-medium 
-        tw-text-white lg:tw-text-[16px]">
+         lg:tw-text-[16px]">
         {{ block.settings.modal_title }}
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M11.0005 7.05025L15.9503 12L11.0005 16.9497" stroke="white" stroke-opacity="0.7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
+        {% if block.settings.comment_color == 'dark' %}
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M11.0005 7.05025L15.9503 12L11.0005 16.9497" stroke="black" stroke-opacity="0.5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        {% else %}
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M11.0005 7.05025L15.9503 12L11.0005 16.9497" stroke="white" stroke-opacity="0.7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        {% endif %}
+        
 
       </div>
     </div>
@@ -231,16 +279,24 @@
   
 </div>
 
-{% if block_size > 0 %}
+  {% if block_size > 0 %}
     
     <div class="comment-list-popup tw-p-[20px] tw-absolute tw-opacity-0 tw-rounded-[16px]">
       <div class="comment-list-popup-header tw-h-[24px] tw-flex tw-items-center tw-justify-between tw-pb-[16px]">
-        <h4 class="tw-font-semibold tw-text-[12px] tw-text-white">{{ block.settings.modal_title }}</h4>
+        <h4 class="comment-list-popup-header-title tw-font-semibold tw-text-[12px]">{{ block.settings.modal_title }}</h4>
         <div class="close-modal-btn tw-ml-[20px] tw-cursor-pointer">
-          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M6.34766 6.34375L17.6614 17.6575" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
-          <path d="M6.34766 17.6562L17.6614 6.34254" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
-          </svg>
+          {% if block.settings.comment_color == 'dark' %}
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M6.34766 6.34326L17.6614 17.657" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
+              <path d="M6.34766 17.6567L17.6614 6.34303" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
+              </svg>
+            {% else %}
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M6.34766 6.34375L17.6614 17.6575" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+              <path d="M6.34766 17.6562L17.6614 6.34254" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+              </svg>
+          {% endif %}
+          
         </div>
 
       </div>
@@ -250,10 +306,30 @@
     </div>
   {% endif %}
 
+
+
+
+
+  
 <style>
   #shopify-block-{{ block.id }} {
     margin-top: {{ block.settings.mobile_margin_top }}px;
     margin-bottom: {{ block.settings.mobile_margin_bottom }}px;
+    {% if block.settings.comment_color == 'dark' %}
+      --zz-comment-text: #000000;
+      --zz-comment-list-bg-color: #FFFFFFCC;
+      --zz-comment-border-color: #0000000F;
+      --zz-comment-number-bg-color: #00000008;
+      --zz-comment-border-shadow: rgba(0, 0, 0, 0.2);
+      --zz-comment-border-shadow-end: rgba(0, 0, 0, 0);
+    {% else %}
+      --zz-comment-text: #FFFFFF;
+      --zz-comment-list-bg-color: #000000CC;
+      --zz-comment-border-color: #FFFFFF4D;
+      --zz-comment-number-bg-color: #0000004D;
+      --zz-comment-border-shadow: rgba(255, 255, 255, 0.4);
+      --zz-comment-border-shadow-end: rgba(255, 255, 255, 0);
+    {% endif %}
   }
   #shopify-block-{{ block.id }} .title-block {
     text-align: {{ block.settings.mobile_align }};
@@ -268,13 +344,19 @@
   #shopify-block-{{ block.id }} .comment-list-popup {
     display: none;
     width: 352px;
-    background: #000000CC;
-    border: 1px solid #FFFFFF4D;
+    background: var(--zz-comment-list-bg-color);
+    border: 1px solid var(--zz-comment-border-color);
     backdrop-filter: blur(20px);
     pointer-events: none;
     transform: translateY(6px);
     transition: opacity .18s ease, transform .18s ease;
   }
+  #shopify-block-{{ block.id }} .comment-list-popup-header, #shopify-block-{{ block.id }} .comment-list-popup-header-title {
+    color: var(--zz-comment-text);
+  }
+  #shopify-block-{{ block.id }} .comment-number-div {
+    color: var(--zz-comment-text);
+  }
   #shopify-block-{{ block.id }} .comment-list-popup.visible {
     display: block;
     opacity: 1;
@@ -292,8 +374,8 @@
   animation: pulse 1.5s infinite;
 }
  #shopify-block-{{ block.id }} .comment-number-div { 
-  background: #0000004D;
-  border: 0.7px solid #FFFFFF4D;
+  background: var(--zz-comment-number-bg-color);
+  border: 0.7px solid var(--zz-comment-border-color);
   backdrop-filter: blur(12px);
   display: none;
   transition: opacity .25s ease;
@@ -327,7 +409,7 @@
     height: 100%;
     border-radius: 50%;
     transform: translate(-50%, -50%);
-    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
+    box-shadow: 0 0 0 0 var(--zz-comment-border-shadow);
     animation: pulse-wave 1.5s infinite;
   }
 
@@ -335,10 +417,10 @@
   /* 波浪扩散动画 */
   @keyframes pulse-wave {
     0% {
-      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
+      box-shadow: 0 0 0 0 var(--zz-comment-border-shadow);
     }
     100% {
-      box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
+      box-shadow: 0 0 0 15px var(--zz-comment-border-shadow-end);
     }
   }
 

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

@@ -16,7 +16,7 @@
     overflow: hidden;
     position: relative;
   }
-  #shopify-block-{{block.id}} .zz-video-swiper-preview {
+  #shopify-block-{{block.id}} .zz-video-swiper-preview-jp {
     width: 100%;
     box-sizing: border-box;
     overflow: hidden;
@@ -25,20 +25,15 @@
     letter-spacing: 0;
   }
 
-  #shopify-block-{{block.id}} .swiper-button-next,
-  #shopify-block-{{block.id}} .swiper-button-prev {
-    top: 0;
-    width: 48px;
-    height: 48px;
-  }
-  #shopify-block-{{block.id}} .swiper-button-prev {
-    left: unset;
-    right: 50%;
-  }
-  #shopify-block-{{block.id}} .swiper-button-next {
-    right: unset;
-    left: 50%;
-  }
+  {% if block.settings.fixed_height == true %}
+    #shopify-block-{{block.id}} .swiper-wrapper {
+      align-items: stretch;
+    }
+    
+  {% endif %}
+  
+
+
   #shopify-block-{{block.id}} .swiper-button-next:after,
   #shopify-block-{{block.id}} .swiper-button-prev:after {
     display: none;
@@ -47,7 +42,7 @@
     opacity: 0.5;
   }
 
-  #shopify-block-{{block.id}} .zz-video-swiper-preview .swiper-pagination-bullets .swiper-pagination-bullet {
+  #shopify-block-{{block.id}} .zz-video-swiper-preview-jp .swiper-pagination-bullets .swiper-pagination-bullet {
     margin: 0 8px;
     width: 48px;
     height: 4px;
@@ -56,14 +51,14 @@
     opacity: 1;
     transition: 0.3s;
   }
-  #shopify-block-{{block.id}} .zz-video-swiper-preview .swiper-pagination-bullets .swiper-pagination-bullet-active {
+  #shopify-block-{{block.id}} .zz-video-swiper-preview-jp .swiper-pagination-bullets .swiper-pagination-bullet-active {
     position: relative;
     width: 120px;
     {% if block.settings.if_autoplay == false %}
       background-color: {{ block.settings.pagination_color }};
     {% endif %}
   }
-  #shopify-block-{{block.id}} .zz-video-swiper-preview .swiper-pagination-bullets .swiper-pagination-bullet-active .progress-line {
+  #shopify-block-{{block.id}} .zz-video-swiper-preview-jp .swiper-pagination-bullets .swiper-pagination-bullet-active .progress-line {
     display: block;
     position: absolute;
     width:0;
@@ -78,13 +73,13 @@
   }
 
   @media screen and (max-width: 1023px) {
-    #shopify-block-{{block.id}} .zz-video-swiper-preview {
+    #shopify-block-{{block.id}} .zz-video-swiper-preview-jp {
       padding-bottom: 68px;
       padding-left: 20px;
       padding-right: 20px;
     }
 
-    #shopify-block-{{block.id}} .zz-video-swiper-preview .swiper-slide .banner-item::after {
+    #shopify-block-{{block.id}} .zz-video-swiper-preview-jp .swiper-slide .banner-item::after {
       display: none;
     }
     #shopify-block-{{block.id}} .swiper-button-next,
@@ -104,49 +99,79 @@
       right: 50%;
       transform: translate({{ btn_offset }}px, 0px);
     }
-    #shopify-block-{{block.id}} .zz-video-swiper-preview .swiper-pagination-bullets .swiper-pagination-bullet {
+    #shopify-block-{{block.id}} .zz-video-swiper-preview-jp .swiper-pagination-bullets .swiper-pagination-bullet {
       margin: 0 4px;
       width: 6px;
       height: 6px;
       background-color: {{ block.settings.mb_pagination_color | color_modify: 'alpha', 0.3 }};
     }
-    #shopify-block-{{block.id}} .zz-video-swiper-preview .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
+    #shopify-block-{{block.id}} .zz-video-swiper-preview-jp .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
       width: 6px;
       background-color: {{ block.settings.mb_pagination_color }};
     }
   }
   @media screen and (min-width: 1024px) {
-    #shopify-block-{{block.id}} .zz-video-swiper-preview { 
+    #shopify-block-{{block.id}} .zz-video-swiper-preview-jp { 
       padding-bottom: 68px;
+      {% if block.settings.if_center == false %} 
+        padding-left: 10vw;
+      {% endif %}
+    }
+    #shopify-block-{{block.id}} .swiper-button-next.swiper-button-disabled, #shopify-block-{{block.id}} .swiper-button-prev.swiper-button-disabled {
+      display: none;
     }
-    #shopify-block-{{block.id}} .zz-video-swiper-preview .swiper-pagination-bullets {
+    #shopify-block-{{block.id}} .zz-video-swiper-preview-jp .swiper-pagination-bullets {
         bottom: 21px;
     }
+    #shopify-block-{{block.id}} .swiper-button-next,
+    #shopify-block-{{block.id}} .swiper-button-prev {
+      top: 0;
+      width: 48px;
+      height: 48px;
+    }
+   {% if block.settings.prev_next_position ==  'pos'%}
     #shopify-block-{{block.id}} .swiper-button-prev {
+       left: 50%;
       transform: translate(-500px, 220px);
     }
     #shopify-block-{{block.id}} .swiper-button-next {
       transform: translate(500px, 220px);
+      right: 50%;
     }
-    
-
-
-
-  }
-  @media screen and (min-width: 1280px) {
-    
+    {% else %}
     #shopify-block-{{block.id}} .swiper-button-prev {
-      transform: translate(-594px, 260px);
+       left: 48px;
+      top: 50% !important;
+      transform: translate(-0px, -50%);
     }
     #shopify-block-{{block.id}} .swiper-button-next {
-      transform: translate(594px, 260px);
+      top: 50% !important;
+      transform: translate(0px, -50%);
+      right: 48px;
     }
+     
+   {% endif %}
+    
+    
+  }
+  @media screen and (min-width: 1280px) {
+    {% if block.settings.prev_next_position ==  'pos'%}
+      #shopify-block-{{block.id}} .swiper-button-prev {
+        transform: translate(-594px, 260px);
+      }
+      #shopify-block-{{block.id}} .swiper-button-next {
+        transform: translate(594px, 260px);
+      }
+    {% endif %}
+    {% if block.settings.if_center == false %} 
+        padding-left: calc((100vw - 1220px)/2);
+    {% endif %}
 
   }
 </style>
 
 <div
-  class='zz-video-swiper-preview zz-video-swiper-preview-{{ block.id }}'
+  class='zz-video-swiper-preview-jp zz-video-swiper-preview-jp-{{ block.id }}'
 >
   <div class='swiper-wrapper'>
     {% content_for 'blocks' %}
@@ -204,7 +229,12 @@
 
 <script>
   document.addEventListener('DOMContentLoaded', function () {
-    const swiperClassName = '.zz-video-swiper-preview-{{ block.id }}';
+    const swiperClassName = '.zz-video-swiper-preview-jp-{{ block.id }}';
+    const mbSpace = {{ block.settings.mb_space }};
+    const pcSpace = {{ block.settings.pc_space }};
+    const autoHeight = {{ block.settings.fixed_height }};
+    const centeredSlides = {{ block.settings.if_center }}; 
+    const initialSlide = {{ block.settings.pc_initial_slide }} - 1;
     let isDesktop = window.innerWidth > 1023;
     // 获取 class zz-accessories-swiper 的元素 且data-id 为 block.id 的元素
     const zzAccessoriesSwiper = document.querySelector(swiperClassName);
@@ -220,15 +250,16 @@
 
     const prevSwiper = new Swiper(swiperClassName, {
       slidesPerView: 'auto',
-      initialSlide: isDesktop ? 1 : 0,
-      centeredSlides: isDesktop ? true : false,
-      spaceBetween: isDesktop ? 24 : 12,
+      autoHeight: autoHeight,
+      initialSlide: isDesktop ? initialSlide : 0,
+      centeredSlides: isDesktop ? centeredSlides : false,
+      spaceBetween: isDesktop ? pcSpace : mbSpace,
       navigation: {
-        nextEl: '.swiper-button-next',
-        prevEl: '.swiper-button-prev',
+        nextEl: zzAccessoriesSwiper.querySelector('.swiper-button-next'),
+        prevEl: zzAccessoriesSwiper.querySelector('.swiper-button-prev'),
       },
       pagination: {
-        el: '.swiper-pagination',
+        el: zzAccessoriesSwiper.querySelector('.swiper-pagination'),
         clickable: true,
         renderBullet: function (index, className) {
           return `
@@ -288,33 +319,7 @@
     if (swiperWrapper) {
       observer.observe(swiperWrapper);
     }
-
-    function getVisibleDisplayMedias(container) {
-      const videos = container.querySelectorAll('video');
-      const video = Array.from(videos).find((video) => {
-        const style = window.getComputedStyle(video);
-        return style.display !== 'none';
-      });
-      if (video) {
-        return {
-          video,
-          type: 'video',
-        };
-      } else {
-        const images = container.querySelectorAll('img');
-        const image = Array.from(images).find((image) => {
-          const style = window.getComputedStyle(image);
-          return style.display !== 'none';
-        });
-        if (image) {
-          return {
-            image,
-            type: 'image',
-          };
-        }
-      }
-      return null;
-    }
+    
     const endedHandler = function () {
 
       if (prevSwiper.isEnd) {
@@ -447,6 +452,30 @@
       "label": "是否自动轮播",
       "default": false
     },
+    {
+      "type": "number",
+      "id": "pc_space",
+      "label": "PC 端间距",
+      "default": 24
+    },
+    {
+      "type": "number",
+      "id": "mb_space",
+      "label": "Mobile 端间距",
+      "default": 12
+    },
+    {
+      "type": "number",
+      "id": "pc_initial_slide",
+      "label": "PC 端初始化显示第几个",
+      "default": 2
+    },
+    {
+      "type": "checkbox",
+      "id": "if_center",
+      "label": "是否居中显示",
+      "default": true,
+    },
     {
       "type": "select",
       "id": "prev_next_type",
@@ -457,25 +486,56 @@
       ],
       "default": "dark"
     },
+    {
+      "type": "select",
+      "id": "prev_next_position",
+      "label": "pc端 prev next 位置",
+      "options": [
+        { "value": "pos", "label": "固定位置" },
+        { "value": "left_right", "label": "左右排列" },
+      ],
+      "default": "pos"
+    },
+    {
+      "type": "checkbox",
+      "id": "if_mb_btn",
+      "label": "移动端展示切换按钮",
+      "default": true
+    },
     {
       "type": "image_picker",
       "id": "prev_icon",
-      "label": "轮播上一张图标 Mobile"
+      "label": "轮播上一张图标 Mobile",
+      "visible_if": "{{ block.settings.if_mb_btn == true }}"
     },
     {
       "type": "image_picker",
       "id": "next_icon",
-      "label": "轮播下一张图标 Mobile"
+      "label": "轮播下一张图标 Mobile",
+      "visible_if": "{{ block.settings.if_mb_btn == true }}"
     },
+    {
+      "type": "checkbox",
+      "id": "fixed_height",
+      "label": "强制高度一致",
+      "default": false
+    }
   ],
   "blocks": [
     {
       "type": "zz-video-swiper-jp-item"
+    },
+    {
+      "type": "zz-swiper-comment-item"
+    },
+    {
+      "type": "zz-swiper-blog-item"
     }
   ],
   "presets": [
     {
-      "name": "Video Swiper JP Preview"
+      "name": "Video Swiper JP Preview",
+        "category": "Swiper Block"
     },
   ]
 }

package/package.json

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

package/sections/zz-flex-layout-section.liquid

@@ -1,6 +1,7 @@
 {% schema %}
 {
   "name": "ZZ Flex Layout Section",
+  "class": "zz-flex-layout-section",
   "tag": "section",
   "settings": [
     {

package/sections/zz-swiper-banner.liquid

@@ -91,7 +91,7 @@
      display:none;
   }
 
-  #shopify-section-{{section.id}}  .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal{
+  #shopify-section-{{section.id}} .swiper-horizontal>.swiper-pagination-bullets, #shopify-section-{{section.id}} .swiper-pagination-bullets.swiper-pagination-horizontal{
     bottom:30px;
   }
 
@@ -647,25 +647,25 @@
               <div class='swiper-content-text lg:tw-w-[560px]'>
                 {%- if banner.settings.desc_text_type == 'text' -%}
                 <div
-                  class='lg:tw-hidden tw-p-0 tw-leading-[58px] tw-text-[48px] tw-font-bold tw-mb-[24px] max-lg:tw-my-[8px] max-lg:tw-text-[24px] max-lg:tw-leading-[1.2] max-lg:tw-text-center'
+                  class='lg:tw-hidden tw-p-0 tw-font-bold tw-mb-[24px] max-lg:tw-my-[8px] max-lg:tw-text-[24px] max-lg:tw-leading-[1.2] max-lg:tw-text-center'
                     style='color: {{ banner.settings.color | default: 'white' }};'
                 >
                   {{ banner.settings.title_mb }}
                 </div>
                 <div
-                  class='max-lg:tw-hidden tw-p-0 tw-leading-[58px] tw-text-[48px] tw-font-bold tw-mb-[24px] max-lg:tw-my-[8px] max-lg:tw-text-[24px] max-lg:tw-leading-[1.2] max-lg:tw-text-center'
+                  class='max-lg:tw-hidden tw-p-0 tw-leading-[1.2] {% if section.settings.site == 'central' %}tw-text-[48px]{% else %}tw-text-[40px]{% endif %} tw-font-bold tw-mb-[24px] max-lg:tw-my-[8px] max-lg:tw-text-[24px] max-lg:tw-leading-[1.2] max-lg:tw-text-center'
                     style='color: {{ banner.settings.color | default: 'white' }};'
                 >
                   {{ banner.settings.title }}
                 </div>
                 <div
-                  class='lg:tw-hidden tw-p-0 tw-m-0 tw-leading-[1.5] tw-text-[28px] tw-font-medium max-lg:tw-text-[14px] max-lg:tw-text-center'
+                  class='lg:tw-hidden tw-p-0 tw-m-0 tw-leading-[1.5]  tw-font-medium max-lg:tw-text-[14px] max-lg:tw-text-center'
                     style='color: {{ banner.settings.color | default: 'white' }}'
                 >
                   {{ banner.settings.subtitle_mb }}
                 </div>
                 <div
-                  class='max-lg:tw-hidden tw-p-0 tw-m-0 tw-leading-[1.5] tw-text-[28px] tw-font-medium max-lg:tw-text-[14px] max-lg:tw-text-center'
+                  class='max-lg:tw-hidden tw-p-0 tw-m-0 tw-leading-[1.5] {% if section.settings.site == 'central' %}tw-text-[28px]{% else %}tw-text-[20px]{% endif %} tw-font-medium max-lg:tw-text-[14px] max-lg:tw-text-center'
                     style='color: {{ banner.settings.color | default: 'white' }}'
                 >
                   {{ banner.settings.subtitle }}

package/sections/zz-swiper-gallery.liquid

@@ -418,7 +418,6 @@
   
 <style>
 #shopify-section-{{section.id}} {
-  position: relative;
   background: {{ section.settings.bg_color }};
   display: flex;
   flex-direction: column;

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

@@ -185,12 +185,6 @@
           "id": "row_content",
           "label": "description"
         },
-        {
-          "type": "color",
-          "id": "title_color",
-          "default": "#000000",
-          "label": "标题颜色",
-        },
         {
           "type": "video",
           "id": "video_pc",
@@ -314,7 +308,7 @@
             <div class="tw-daisy-collapse collapse-arrow tw-daisy-join-item ">
               <input type="radio" name="my-accordion-{{ section.id }}" value="{{ forloop.index }}" {% if forloop.first %}checked data-last-checked="true"{% endif %} style="cursor: pointer;" /> 
               {% assign collapsible_title_color = section.settings.collapsible_title_color
-                | color_modify: 'alpha', 0.6
+                | color_modify: 'alpha', 0.7
               %}
               <div class="tw-daisy-collapse-title tw-py-[20px] tw-px-0  tw-text-[20px]  tw-font-[700]  tw-leading-[1]" style="color: {{ collapsible_title_color }};">
                 {{ collapsible_row.settings.heading }}
@@ -417,7 +411,13 @@
 
     }
     #shopify-section-{{section.id}} .tw-daisy-collapse {
-      border-bottom: 1px solid #4C4C4C;
+      {% if section.settings.collapse_button_color == 'black' %}
+        {% comment %} 黑色按钮，下划线也成黑色 {% endcomment %}
+        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+      {% else %}
+        border-bottom: 1px solid #4C4C4C;
+      {% endif %}
+      
     }
 
     #shopify-section-{{section.id}} .row-content a {
@@ -470,7 +470,7 @@
 
       #shopify-section-{{section.id}} .swiper-button-next,
       #shopify-section-{{section.id}} .swiper-button-prev {
-        z-index: 1;
+        z-index: 19;
         top: unset;
         bottom: 0;
         width: 36px;