zz-shopify-components 0.34.1-beta.21 → 0.34.1-beta.22

package/assets/zz-components.js

@@ -173,7 +173,6 @@ if (!customElements.get('zz-video-popup')) {
       this.popup = null;
     }
 
-
     connectedCallback() {
       this.querySelectorAll('.togglePopup').forEach((el) => {
         el.addEventListener('click', (event) => {
@@ -184,8 +183,6 @@ if (!customElements.get('zz-video-popup')) {
         });
       });
       this.popup = this.querySelector('.popup');
-
-
     }
 
     disconnectedCallback() {
@@ -226,7 +223,7 @@ if (!customElements.get('zz-video-popup')) {
           backdropFilter: 'blur(30px)',
           onComplete: () => {
             const videos = this.popup.querySelectorAll('video');
-            videos.forEach(video => {
+            videos.forEach((video) => {
               if (window.getComputedStyle(video).display !== 'none') {
                 video.play();
               }
@@ -246,7 +243,7 @@ if (!customElements.get('zz-video-popup')) {
         onComplete: () => {
           this.popup.classList.add('!tw-hidden');
           const videos = this.popup.querySelectorAll('video');
-          videos.forEach(video => {
+          videos.forEach((video) => {
             if (video) {
               video.pause();
             }
@@ -261,7 +258,6 @@ if (!customElements.get('zz-video-popup')) {
   customElements.define('zz-video-popup', ZZVideoPopup);
 }
 
-
 if (!customElements.get('zz-video-handler')) {
   class ZZVideoHandler extends HTMLElement {
     constructor() {
@@ -310,7 +306,6 @@ if (!customElements.get('zz-video-handler')) {
   customElements.define('zz-video-handler', ZZVideoHandler);
 }
 
-
 /**
  * Toast 组件
  */
@@ -430,9 +425,11 @@ if (!customElements.get('zz-video-handler')) {
   function isSafari() {
     const ua = navigator.userAgent;
     // 包含 Safari / WebKit，且不包含 Chrome / CriOS / FxiOS / Android
-    return /Safari/.test(ua)
-      && /AppleWebKit/.test(ua)
-      && !/CriOS|FxiOS|Chrome|Edg|OPR/.test(ua);
+    return (
+      /Safari/.test(ua) &&
+      /AppleWebKit/.test(ua) &&
+      !/CriOS|FxiOS|Chrome|Edg|OPR/.test(ua)
+    );
   }
 
   function isSafari26() {
@@ -442,8 +439,6 @@ if (!customElements.get('zz-video-handler')) {
     return /Version\/26\./.test(ua);
   }
 
-
-
   function lockBodyScroll() {
     if (isSafari26()) {
       scrollTop = window.scrollY;
@@ -506,11 +501,10 @@ document.addEventListener('DOMContentLoaded', (event) => {
     entries.forEach((entry) => {
       const el = entry.target;
       if (entry.isIntersecting) {
-        
       } else {
         if (el.classList.contains('zz-card-animate-list')) {
           // 重置所有
-          el.querySelectorAll('.zz-card-inner').forEach(card => {
+          el.querySelectorAll('.zz-card-inner').forEach((card) => {
             card.classList.remove('is-active');
           });
         }
@@ -518,47 +512,48 @@ document.addEventListener('DOMContentLoaded', (event) => {
     });
   });
 
-
   if (!isDesktop) {
     const switchCard = document.querySelectorAll('.product-switch-card');
     // 监听所有的switchCard 当它完全出现屏幕中时候，定时2秒切换成背景图。移出屏幕时候恢复
 
     if (switchCard.length > 0) {
       const switchTimers = new Map(); // 存储每个卡片的定时器
-      
-      const switchCardObserver = new IntersectionObserver((entries) => {
-        entries.forEach((entry) => {
-          const card = entry.target;
-          console.log('switchCardObserver')
-          if (entry.isIntersecting && entry.intersectionRatio >= 0.8) {
-            // 完全出现在屏幕中，2秒后切换成背景图
-            const timer = setInterval(() => {
-              if (card.classList.contains('switchCard')) {
-                card.classList.remove('switchCard');
-              } else {
-                card.classList.add('switchCard');
+
+      const switchCardObserver = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            const card = entry.target;
+            console.log('switchCardObserver');
+            if (entry.isIntersecting && entry.intersectionRatio >= 0.8) {
+              // 完全出现在屏幕中，2秒后切换成背景图
+              const timer = setInterval(() => {
+                if (card.classList.contains('switchCard')) {
+                  card.classList.remove('switchCard');
+                } else {
+                  card.classList.add('switchCard');
+                }
+              }, 2000);
+              switchTimers.set(card, timer);
+            } else {
+              // 移出屏幕，恢复原状
+              const timer = switchTimers.get(card);
+              if (timer) {
+                clearInterval(timer);
+                switchTimers.delete(card);
               }
-            }, 2000);
-            switchTimers.set(card, timer);
-          } else {
-            // 移出屏幕，恢复原状
-            const timer = switchTimers.get(card);
-            if (timer) {
-              clearInterval(timer);
-              switchTimers.delete(card);
+              card.classList.remove('switchCard');
             }
-            card.classList.remove('switchCard');
-          }
-        });
-      }, {
-        threshold: [0.2, 0.8] // 监听0%、99%和100%的可见度
-      });
-      
-      switchCard.forEach(card => {
+          });
+        },
+        {
+          threshold: [0.2, 0.8], // 监听0%、99%和100%的可见度
+        }
+      );
+
+      switchCard.forEach((card) => {
         switchCardObserver.observe(card);
       });
     }
-
   }
 
   // 处理统一的定位脚本
@@ -568,17 +563,17 @@ document.addEventListener('DOMContentLoaded', (event) => {
     if (positionTrigger) {
       const selector = positionTrigger.getAttribute('data-zz-module-target');
       if (selector) {
-        const target = document.querySelector(`[data-zz-module-name="${selector}"]`);
-          const headerHeight = 50;
-          const offsetTop = target.offsetTop - headerHeight;
-          window.scrollTo(0, offsetTop);
-       
+        const target = document.querySelector(
+          `[data-zz-module-name="${selector}"]`
+        );
+        const headerHeight = 50;
+        const offsetTop = target.offsetTop - headerHeight;
+        window.scrollTo(0, offsetTop);
       }
       return;
     }
   });
 
-
   // zz-card-animate-text.liquid
   const cardListGroup = document.querySelectorAll('.zz-card-animate-list');
   cardListGroup.forEach((list) => {
@@ -591,7 +586,7 @@ document.addEventListener('DOMContentLoaded', (event) => {
       console.log('click card item');
 
       // 重置所有
-      list.querySelectorAll('.zz-card-inner').forEach(el => {
+      list.querySelectorAll('.zz-card-inner').forEach((el) => {
         el.classList.remove('is-active');
       });
 
@@ -599,8 +594,89 @@ document.addEventListener('DOMContentLoaded', (event) => {
       item.classList.add('is-active');
     });
     compIntersectionObserver.observe(list);
-
   });
+});
+
+if (!customElements.get('zz-normal-modal')) {
+  class ZZNormalModal extends HTMLElement {
+    constructor() {
+      super();
+      this.handleOverlayClick = this.handleOverlayClick.bind(this);
+      this.handleDocumentKeydown = this.handleDocumentKeydown.bind(this);
+      this.handleCloseClick = this.handleCloseClick.bind(this);
+    }
+
+    connectedCallback() {
+      this.dialogContent = this.querySelector('[data-modal-content]');
+      this.overlay = this.querySelector('[data-modal-overlay]');
+      this.closeButton = this.querySelector('[data-modal-close]');
 
+      if (this.overlay) {
+        this.overlay.addEventListener('click', this.handleOverlayClick);
+      }
+
+      if (this.closeButton) {
+        this.closeButton.addEventListener('click', this.handleCloseClick);
+      }
+    }
 
-});
+    disconnectedCallback() {
+      if (this.overlay) {
+        this.overlay.removeEventListener('click', this.handleOverlayClick);
+      }
+
+      if (this.closeButton) {
+        this.closeButton.removeEventListener('click', this.handleCloseClick);
+      }
+
+      document.removeEventListener('keydown', this.handleDocumentKeydown);
+    }
+
+    show() {
+      this.previousActiveElement = document.activeElement;
+      this.dialogContent.classList.add('is-open');
+      this.overlay.classList.add('is-open');
+      this.setAttribute('aria-hidden', 'false');
+      window.zzLockBodyScroll && window.zzLockBodyScroll();
+      document.addEventListener('keydown', this.handleDocumentKeydown);
+
+      requestAnimationFrame(() => {
+        if (this.dialogContent) {
+          this.dialogContent.focus();
+        }
+      });
+    }
+
+    hide() {
+      this.dialogContent.classList.remove('is-open');
+      this.overlay.classList.remove('is-open');
+      this.setAttribute('aria-hidden', 'true');
+      window.zzUnlockBodyScroll && window.zzUnlockBodyScroll();
+      document.removeEventListener('keydown', this.handleDocumentKeydown);
+
+      if (
+        this.previousActiveElement &&
+        typeof this.previousActiveElement.focus === 'function'
+      ) {
+        this.previousActiveElement.focus();
+      }
+    }
+
+    handleOverlayClick() {
+      this.hide();
+    }
+
+    handleCloseClick() {
+      console.log('click-close');
+      this.hide();
+    }
+
+    handleDocumentKeydown(event) {
+      if (event.key === 'Escape') {
+        this.hide();
+      }
+    }
+  }
+
+  customElements.define('zz-normal-modal', ZZNormalModal);
+}

package/package.json

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

package/sections/zz-voc-section.liquid

@@ -41,12 +41,23 @@
       "default": 24,
       "info": "单位：px"
     },
+     {
+      "type": "richtext",
+      "id": "title",
+      "label": "标题",
+      "info": "没有就不填写"
+    },
+      {
+      "type": "richtext",
+      "id": "title_mb",
+      "label": "标题移动端",
+      "info": "没有就不填写"
+    },
   ],
   "blocks": [
     {
       "type": "comment",
       "name": "comment",
-      "limit": 3,
       "settings": [
         {
           "type": "select",
@@ -131,30 +142,54 @@
 }
 {% endschema %}
 
-<div class='user-spokes-section lg:tw-w-[85.3906vw] xl:tw-w-[1093px] lg:tw-mx-auto'>
-  <div class='voc-item-list max-lg:tw-px-[20px] tw-flex  lg:tw-justify-between max-lg:tw-overflow-x-auto tw-gap-[8px] lg:tw-gap-[20px] slow-reveal'>
-    {% for block in section.blocks %}
-      <div class='comment-box lg:tw-w-[351px] tw-flex tw-flex-col'>
-        <div class='comment-item lg:tw-w-[351px] lg:tw-h-[468px]'>
-          {% render 'zz-spoke',
-            bg_color: 'rgba(0,0,0,0.04)',
-            class_name: 'max-lg:tw-bg-[#F5F5F6]',
-            pc_image: block.settings.pc_image,
-            pc_video: block.settings.pc_video,
-            mb_image: block.settings.mb_image,
-            mb_video: block.settings.mb_video,
-            pc_media_pos: block.settings.pc_media_pos,
-            mb_media_pos: block.settings.mb_media_pos,
-            user_name: block.settings.username,
-            user_avatar: block.settings.avatar,
-            user_account: block.settings.account,
-            content: block.settings.content,
-            name_class: 'tw-text-black max-lg:tw-text-[10px] lg:tw-text-[14px]',
-            content_class: 'voc-text-content max-lg:tw-text-[10px] lg:tw-text-[14px] tw-text-black/70 lg:tw-text-black/60 max-lg:tw-leading-[1.2] tw-line-clamp-8 lg:tw-line-clamp-6'
-          %}
+{%- assign desktop_slider_enabled = false -%}
+{%- if section.blocks.size > 3 -%}
+  {%- assign desktop_slider_enabled = true -%}
+{%- endif -%}
+<div class='user-spokes-section{% if desktop_slider_enabled %} voc-slider-active{% else %} lg:tw-w-[90vw] xl:tw-w-[1220px] lg:tw-mx-auto{% endif %}'>
+  {% if section.settings.title != blank %}
+    <div class='tw-flex tw-justify-center tw-mb-[30px] lg:tw-mb-[72px]'>
+      {% render 'zz-h3', 
+        title: section.settings.title, 
+        title_mb: section.settings.mb_title | default: section.settings.title,
+        class_name: 'tw-text-center'
+      
+      %}
+    </div>
+  {% endif %}
+  <div class='tw-relative'>
+    <div class='voc-item-list max-lg:tw-px-[20px] tw-flex tw-gap-[8px] lg:tw-gap-[20px] slow-reveal{% if desktop_slider_enabled %} voc-item-list--desktop-slider{% else %} lg:tw-justify-center{% endif %}' data-voc-list>
+      {% for block in section.blocks %}
+        <div class='comment-box lg:tw-w-[351px] tw-flex tw-flex-col'>
+          <div class='comment-item lg:tw-w-[351px] lg:tw-h-[468px]'>
+            {% render 'zz-spoke',
+              bg_color: 'rgba(0,0,0,0.04)',
+              class_name: 'max-lg:tw-bg-[#F5F5F6]',
+              pc_image: block.settings.pc_image,
+              pc_video: block.settings.pc_video,
+              mb_image: block.settings.mb_image,
+              mb_video: block.settings.mb_video,
+              pc_media_pos: block.settings.pc_media_pos,
+              mb_media_pos: block.settings.mb_media_pos,
+              user_name: block.settings.username,
+              user_avatar: block.settings.avatar,
+              user_account: block.settings.account,
+              content: block.settings.content,
+              name_class: 'tw-text-black max-lg:tw-text-[10px] lg:tw-text-[14px]',
+              content_class: 'voc-text-content max-lg:tw-text-[10px] lg:tw-text-[14px] tw-text-black/70 lg:tw-text-black/60 max-lg:tw-leading-[1.2] tw-line-clamp-8 lg:tw-line-clamp-6'
+            %}
+          </div>
         </div>
-      </div>
-    {% endfor %}
+      {% endfor %}
+    </div>
+    {% if desktop_slider_enabled %}
+      <button type='button' class='voc-slider-button voc-slider-button--prev' data-voc-prev aria-label='Previous comments'>
+        {% render 'zz-prev-next-blur-icon', type: 'prev', color_type: 'light' %}
+      </button>
+      <button type='button' class='voc-slider-button voc-slider-button--next' data-voc-next aria-label='Next comments'>
+        {% render 'zz-prev-next-blur-icon', type: 'next', color_type: 'light' %}
+      </button>
+    {% endif %}
   </div>
 </div>
 
@@ -171,46 +206,48 @@
   #shopify-section-{{section.id}} .zz-spoke-block-media img{
     height: 100%;
   }
-
-   .voc-item-list {
-    -webkit-overflow-scrolling: touch; /* 移动端流畅滚动（可选） */
-    scrollbar-width: none;     /* Firefox */
-    -ms-overflow-style: none;  /* IE 和 Edge */
+  #shopify-section-{{section.id}} .voc-item-list {
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
   }
-  .voc-item-list::-webkit-scrollbar {
-    width: 0px; /* 隐藏滚动条 */
+  #shopify-section-{{section.id}} .voc-item-list::-webkit-scrollbar {
+    width: 0px;
+    display: none;
   }
-  .voc-item-list::-webkit-scrollbar {
+  #shopify-section-{{section.id}} .voc-slider-button {
     display: none;
   }
   @media screen and (max-width: 1023px) {
+    #shopify-section-{{section.id}} .voc-item-list {
+      overflow-x: auto;
+    }
     #shopify-section-{{section.id}} .comment-box .comment-item {
       width: 168px;
-      
     }
-
-       #shopify-section-{{section.id}} .comment-box {
-        width: 168px;
-        height: 380px;
-      }
-      #shopify-section-{{section.id}} .comment-box .zz-spoke-block-media {
-        height: 221px;
-      }
-      #shopify-section-{{section.id}} .comment-box .zz-spoke-block-content {
-        box-sizing: border-box;
-        height: 160px;
-      }
- 
-    
-    
+    #shopify-section-{{section.id}} .comment-box {
+      width: 168px;
+      height: 380px;
+    }
+    #shopify-section-{{section.id}} .comment-box .zz-spoke-block-media {
+      height: 221px;
+    }
+    #shopify-section-{{section.id}} .comment-box .zz-spoke-block-content {
+      box-sizing: border-box;
+      height: 160px;
+    }
   }
   @media (min-width: 1024px) {
     #shopify-section-{{section.id}} {
       padding-top: {{ section.settings.padding_top }}px;
       padding-bottom: {{ section.settings.padding_bottom }}px;
     }
+    #shopify-section-{{section.id}} .user-spokes-section {
+      width: 100%;
+    }
     #shopify-section-{{section.id}} .comment-box {
       height: 688px;
+      flex: 0 0 auto;
     }
     #shopify-section-{{section.id}} .comment-box .zz-spoke-block-media {
       height: 468px;
@@ -218,9 +255,53 @@
     #shopify-section-{{section.id}} .comment-box .zz-spoke-block-content {
       height: 210px;
     }
+    #shopify-section-{{section.id}} .voc-item-list--desktop-slider {
+      overflow-x: auto; 
+      justify-content: flex-start; 
+      scroll-behavior: smooth; 
+      {% comment %} scroll-snap-type: x proximity;  {% endcomment %}
+      width: 100vw;
+      max-width: 100vw;
+      {% comment %} padding-right: 5vw; {% endcomment %}
+      {% comment %} padding-left: 5vw; {% endcomment %}
+      box-sizing: border-box;
+    }
+    #shopify-section-{{section.id}} .voc-item-list--desktop-slider::before, #shopify-section-{{section.id}} .voc-item-list--desktop-slider::after {
+      content: '';
+      flex-shrink: 0;
+      width: 5vw;
+    }
+    #shopify-section-{{section.id}} .voc-item-list--desktop-slider .comment-box {
+      scroll-snap-align: start;
+    }
+    #shopify-section-{{section.id}} .voc-slider-button {
+      position: absolute;
+      top: 50%;
+      z-index: 2;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      transform: translateY(-50%);
+      border: 0;
+      background: transparent;
+      padding: 0;
+      cursor: pointer;
+    }
+    #shopify-section-{{section.id}} .voc-slider-button[disabled] {
+      opacity: 0;
+      visibility: hidden;
+      pointer-events: none;
+      cursor: default;
+    }
+    #shopify-section-{{section.id}} .voc-slider-button--prev {
+      left: 16px;
+    }
+    #shopify-section-{{section.id}} .voc-slider-button--next {
+      right: 16px;
+    }
   }
-  @media (min-width: 1024px) and (max-width: 1280px) {
-    #shopify-section-{{section.id}} .user-spokes-section {
+  @media (min-width: 1024px) and (max-width: 1279px) {
+    #shopify-section-{{section.id}} .user-spokes-section:not(.voc-slider-active) {
       width: 85.3906vw;
     }
     #shopify-section-{{section.id}} .comment-box {
@@ -236,4 +317,63 @@
       height: 36.5625vw;
     }
   }
+  @media (min-width: 1280px) {
+    #shopify-section-{{section.id}} .voc-item-list--desktop-slider {
+      {% comment %} padding-left: calc((100vw - 1220px) / 2); {% endcomment %}
+      {% comment %} padding-right: calc((100vw - 1220px) / 2); {% endcomment %}
+    }
+    #shopify-section-{{section.id}} .voc-item-list--desktop-slider::after, #shopify-section-{{section.id}} .voc-item-list--desktop-slider::before {
+      content: '';
+      flex-shrink: 0;
+      width: calc((100vw - 1220px) / 2);
+    }
+  }
 </style>
+
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    const sectionRoot = document.getElementById('shopify-section-{{section.id}}');
+    if (!sectionRoot || window.innerWidth < 1024) return;
+
+    const list = sectionRoot.querySelector('[data-voc-list]');
+    const prevButton = sectionRoot.querySelector('[data-voc-prev]');
+    const nextButton = sectionRoot.querySelector('[data-voc-next]');
+    if (!list || !prevButton || !nextButton) return;
+
+    const getScrollAmount = () => {
+      const firstCard = list.querySelector('.comment-box');
+      if (!firstCard) return list.clientWidth;
+      const styles = window.getComputedStyle(list);
+      const gap = Number.parseFloat(styles.columnGap || styles.gap || '0') || 0;
+      return firstCard.getBoundingClientRect().width + gap;
+    };
+
+    const updateButtonState = () => {
+      const maxScrollLeft = Math.max(list.scrollWidth - list.clientWidth, 0);
+      const currentScrollLeft = Math.max(list.scrollLeft, 0);
+      prevButton.disabled = currentScrollLeft <= 2;
+      nextButton.disabled = currentScrollLeft >= maxScrollLeft - 2;
+    };
+
+    const scrollList = (direction) => {
+      list.scrollBy({
+        left: getScrollAmount() * direction,
+        behavior: 'smooth',
+      });
+    };
+
+    prevButton.addEventListener('click', () => {
+      if (prevButton.disabled) return;
+      scrollList(-1);
+    });
+
+    nextButton.addEventListener('click', () => {
+      if (nextButton.disabled) return;
+      scrollList(1);
+    });
+
+    list.addEventListener('scroll', updateButtonState, { passive: true });
+    window.addEventListener('resize', updateButtonState);
+    updateButtonState();
+  });
+</script>

package/snippets/zz-button-v2.liquid

@@ -64,15 +64,29 @@ size：按钮尺寸
 
 {% else %}
 
-<button
-  class="zz-btn zz-btn-{{ btn_type }} zz-btn-{{ btn_color }} zz-btn-shape-{{ shape }} zz-btn-{{ btn_size }} {% if width == 'full' %} tw-w-full {% endif %} {{ width }} {{ class_name }}"
-  {% if modal_id != blank %} data-zz-modal-target="#{{ modal_id }}" {% endif %}
-  {% if btn_id != blank %} id="{{ btn_id }}" data-track-zz-element="{{ btn_id }}" {% endif %}
-  {% if backdrop_filter %}
-    style="backdrop-filter: blur(12px);background: #FFFFFF0F;"
+  {% if btn_type == 'link' %}
+    <a href="{{ href | default: '#' }}" 
+      {% if modal_id != blank %} data-zz-modal-target="#{{ modal_id }}" {% endif %}
+      {% if btn_id != blank %} id="{{ btn_id }}" data-track-zz-element="{{ btn_id }}" {% endif %} 
+      class="zz-btn-link tw-text-[#378DDD] tw-inline-flex tw-items-center tw-text-[12px] lg:tw-text-[14px] tw-no-underline zz-btn-link-{{ btn_size }} {% if width == 'full' %} tw-w-full {% endif %} {{ class_name }}">
+      <span class="zz-btn-text">{{ text }}</span>
+      {% if postfix_icon %}<span class="zz-btn-icon" style="margin-left: {{ icon_left_margin }}px; margin-right: {{ icon_right_margin }}px;">
+        {% render 'zz-icon', icon_name: postfix_icon, icon_size: icon_size %}
+      </span>{% endif %}
+    </a>
+  {% else %}
+    <button
+    class="zz-btn zz-btn-{{ btn_type }} zz-btn-{{ btn_color }} zz-btn-shape-{{ shape }} zz-btn-{{ btn_size }} {% if width == 'full' %} tw-w-full {% endif %} {{ width }} {{ class_name }}"
+    {% if modal_id != blank %} data-zz-modal-target="#{{ modal_id }}" {% endif %}
+    {% if btn_id != blank %} id="{{ btn_id }}" data-track-zz-element="{{ btn_id }}" {% endif %}
+    {% if backdrop_filter %}
+      style="backdrop-filter: blur(12px);background: #FFFFFF0F;"
+    {% endif %}
+  >
+    {% if icon %}<span class="zz-btn-icon">{{ icon }}</span>{% endif %}
+    <span class="zz-btn-text">{{ text }}</span>
+  </button>
+  
   {% endif %}
->
-  {% if icon %}<span class="zz-btn-icon">{{ icon }}</span>{% endif %}
-  <span class="zz-btn-text">{{ text }}</span>
-</button>
+
 {% endif %}