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

package/blocks/zz-swiper-title-in-item.liquid

@@ -37,7 +37,7 @@
   {% render 'zz-h6',
       title: block.settings.heading,
       title_color: block.settings.title_color,
-      class_name: 'media-box-title tw-text-center max-lg:tw-hidden tw-absolute tw-top-[20px] tw-left-[20px]'
+      class_name: 'media-box-title tw-text-left max-lg:tw-hidden tw-absolute tw-top-[20px] tw-left-[20px] tw-right-[20px]'
     %}
   {% if block.settings.video_pc != blank %}
     {% if block.settings.video_url_pc != blank %}
@@ -80,7 +80,7 @@
         pc_font_size: 16,
         mobile_font_size: 12,
         text_color: block.settings.content_color,
-        class_name: 'tw-text-left',
+        class_name: 'max-lg:tw-text-center lg:tw-text-left',
       %}
     </div>
   </div>

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

@@ -129,11 +129,11 @@
 
 </style>
 
-<div class="left-title-desc max-lg:tw-px-[20px]  lg:tw-w-[450px] xl:tw-w-[509px] tw-flex-shrink-0 max-lg:tw-mb-[20px] fade-in-box">
+<div class="left-title-desc max-lg:tw-px-[20px]  lg:tw-w-[460px] xl:tw-w-[531px] tw-flex-shrink-0 max-lg:tw-mb-[20px] fade-in-box">
 
    {% render 'zz-h4',
             title: block.settings.heading,
-            title_mb: block.settings.heading,
+            title_mb: block.settings.heading_mobile,
             title_color: block.settings.text_color,
             class_name: 'content-title tw-text-left tw-mb-[20px] lg:tw-mb-[24px] '
           %}
@@ -356,6 +356,12 @@
       "label": "标题 (Heading)",
       "default": "<p>这里是文字内容</p>"
     },
+    {
+      "type": "richtext",
+      "id": "heading_mobile",
+      "label": "标题 移动 (Heading)",
+      "default": "<p>这里是文字内容</p>"
+    },
     {
       "type": "richtext",
       "id": "desc",

package/package.json

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

package/sections/zz-navigation-tab-v3.liquid

@@ -248,7 +248,7 @@
           const id = tab.dataset.target;
           const target = document.querySelector(`[data-zz-module-name="${id}"]`);
           if (!target) return;
-          const headerHeight = isDesktop ? 50 : 50;
+          const headerHeight = isDesktop ? 50 : 100;
           const rect = target.getBoundingClientRect();
           const offsetTop = rect.top + window.scrollY - headerHeight;
           scrollPaginationToCenter();

package/sections/zz-swiper-gallery-center.liquid

@@ -41,6 +41,9 @@
       right: 6px;
       height: 1px;
     }
+    #shopify-section-{{ section.id }} .custom-pagination {
+      padding-right: calc(100% - 20px - 196px);
+    }
     #shopify-section-{{ section.id }} .progress-line {
       height: 1px;
       background-color: #FFFFFF;
@@ -143,7 +146,7 @@
       </div>
 
       <!-- Pagination indicator -->
-      <div class='custom-pagination zz-overflow-scrollbar-hidden tw-px-[20px] lg:tw-px-[80px] tw-z-10 tw-w-full tw-absolute tw-left-0 tw-bottom-[122px] lg:tw-bottom-[20px] tw-flex tw-flex-nowrap tw-overflow-x-auto tw-overflow-y-hidden tw-justify-start lg:tw-justify-center tw-gap-[15px]'>
+      <div class='custom-pagination zz-overflow-scrollbar-hidden tw-pl-[20px] lg:tw-px-[80px] tw-z-10 tw-w-full tw-absolute tw-left-0 tw-bottom-[122px] lg:tw-bottom-[20px] tw-flex tw-flex-nowrap tw-overflow-x-auto tw-overflow-y-hidden tw-justify-start lg:tw-justify-center max-lg:tw-gap-[20px] lg:tw-gap-[15px]'>
         {% for block in swiper_blocks %}
           <div class="pagination-item tw-cursor-pointer tw-text-white tw-relative tw-rounded-[10px] tw-w-[196px] tw-h-[95px] lg:tw-w-[389px] lg:tw-h-[213px]" 
             {% if section.settings.module_id != blank %} data-track-zz-element="{{ section.settings.module_id }}_change" {% endif %}
@@ -298,12 +301,10 @@
       const activeBullet = paginationContainer.querySelector('.pagination-item-active');
 
       if (activeBullet) {
-        const containerWidth = paginationContainer.offsetWidth;
         const bulletLeft = activeBullet.offsetLeft;
-        const bulletWidth = activeBullet.offsetWidth;
 
-        // 计算需要滚动的位置，使当前bullet居中
-        const scrollPosition = bulletLeft - (containerWidth / 2) + (bulletWidth / 2);
+        // 计算需要滚动的位置，使当前bullet左对齐，保留20px左边距
+        const scrollPosition = bulletLeft - 20;
 
         paginationContainer.scrollTo({
           left: scrollPosition,

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

@@ -348,7 +348,7 @@
               {% assign collapsible_title_color = section.settings.collapsible_title_color
                 | color_modify: 'alpha', 0.5
               %}
-              <div class="tw-daisy-collapse-title tw-py-[20px] tw-pl-0 tw-pr-[30px]  tw-text-[20px]  tw-font-[700]  tw-leading-[1]" style="color: {{ collapsible_title_color }};">
+              <div class="tw-daisy-collapse-title tw-py-[20px] tw-pl-0 tw-pr-[30px]  tw-text-[20px]  tw-font-[700]  tw-leading-[1.3]" style="color: {{ collapsible_title_color }};">
                 {{ collapsible_row.settings.heading }}
               </div>
               <div class="tw-p-0  tw-daisy-collapse-content">
@@ -601,7 +601,7 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            
+            margin: 0px 20px 0px 0px;
             height: 58px;
             padding: 16px;
             {% if section.settings.collapse_button_color == 'black' %}
@@ -620,10 +620,9 @@
             white-space: nowrap;
             height: auto;
             background: none;
+            margin: 0;
             
           {% endif %}
-          
-          margin: 0;
           width: fit-content;
           font-size: 14px;
           border-top: 0;

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

@@ -26,6 +26,7 @@
       display: flex;
       gap: 16px;
       justify-content: space-between;
+      align-items: flex-end;
       top: 0px;
       left: 0px;
       right:0px;
@@ -76,18 +77,11 @@
   }
   #shopify-section-{{ section.id }} .swiper-pagination-bullet-active .bullet-desc{
     color: #FFFFFF;
+    display: block !important;
   }
 
  
-  @media screen and (min-width: 1024px) {
-    #shopify-section-{{ section.id }}  {
-      padding-top: {{ section.settings.pc_padding_top }}px;
-      padding-bottom: {{ section.settings.pc_padding_bottom }}px;
-    }
-    #shopify-section-{{ section.id }} .zz-video-progress-swiper .swiper-pagination-bullets .swiper-pagination-bullet {
-      padding-bottom: 30px;
-    }
-  }
+
    @media screen and (max-width: 1024px) {
     #shopify-section-{{ section.id }} { 
       padding-left: 20px;
@@ -127,6 +121,9 @@
      #shopify-section-{{ section.id }}  .swiper-pagination-horizontal::-webkit-scrollbar {
        display: none;             /* Chrome, Safari */
      }
+    #shopify-section-{{ section.id }} .bullet-title + .bullet-desc {
+      margin-bottom: 10px;
+    }
    }
    @media screen and (min-width: 1024px) {
      #shopify-section-{{ section.id }} .content-title {
@@ -138,6 +135,18 @@
      #shopify-section-{{ section.id }} .zz-video-progress-swiper .swiper-slide {
        width: 90vw;
      }
+
+     #shopify-section-{{ section.id }}  {
+      padding-top: {{ section.settings.pc_padding_top }}px;
+      padding-bottom: {{ section.settings.pc_padding_bottom }}px;
+    }
+    #shopify-section-{{ section.id }} .zz-video-progress-swiper .swiper-pagination-bullets .swiper-pagination-bullet {
+      padding-bottom: 30px;
+    }
+    #shopify-section-{{ section.id }} .bullet-title + .bullet-desc {
+      margin-bottom: 16px;
+    }
+
      #shopify-section-{{ section.id }} .zz-video-progress-swiper .swiper-slide .media-box {
        position: relative;
        aspect-ratio: 16 / 9;
@@ -284,7 +293,7 @@
             const title = slideTitles[index % slideTitles.length];
             const desc = slideDescs[index % slideDescs.length];
                return `<div class="${className}" {% if section.settings.module_id != blank %} data-track-zz-element="{{ section.settings.module_id }}_change" {% endif %}>
-                        <div class="bullet-title tw-text-left tw-text-[14px] lg:tw-text-[24px] tw-mb-[10px] lg:tw-mb-[16px] tw-flex tw-items-center tw-gap-[10px]">
+                        <div class="bullet-title tw-text-left tw-text-[14px] lg:tw-text-[24px] tw-flex tw-items-center tw-gap-[10px]">
                           <span class="bullet-active-icon tw-hidden tw-w-[17px] tw-h-[17px] lg:tw-w-[32px] lg:tw-h-[32px]">
                             <img class="tw-w-full tw-h-full tw-object-contain" src="{{ section.settings.active_icon | image_url: width: 40 }}" alt="Specs Header" width="40" height="auto">
                             
@@ -297,7 +306,7 @@
                           </span>
                           ${title}
                         </div>
-                        <div class="bullet-desc tw-text-left tw-text-[10px] lg:tw-text-[16px] tw-leading-[1.5]">${desc}</div>
+                        <div class="bullet-desc tw-hidden tw-text-left tw-text-[10px] lg:tw-text-[16px] tw-leading-[1.5]">${desc}</div>
                         <span class="progress-line"></span>
                       </div>`;
         }