zz-shopify-components 0.36.1-beta.5 → 0.36.1-beta.7

package/blocks/zz-bottom-popup.liquid

@@ -170,7 +170,11 @@
         </svg>
       </button>
 
-      <div class="zz-bottom-popup__body zz-overflow-scrollbar-hidden">
+      <div 
+        {% if block.settings.modal_id != blank %}
+        data-track-zz-scroll="{{ block.settings.modal_id }}"
+        {% endif %}
+        class="zz-bottom-popup__body zz-overflow-scrollbar-hidden">
         <div class="zz-bottom-popup__inner" id="{{ modal_id }}-title">
           {% content_for 'blocks' %}
         </div>

package/package.json

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

package/sections/zz-FAQ.liquid

@@ -46,7 +46,7 @@
   {% if section.settings.is_exposure != false %}
     data-track-zz-exposure="true"
   {% endif %} 
-  data-zz-module-name="faq"
+  data-zz-module-name="faq-id"
   class="faq-custom max-lg:tw-px-[20px] lg:tw-mx-auto lg:tw-w-[95.3125vw] xl:tw-w-[1220px] fade-in-box">
   {% render 'content-h2',
     title_color: section.settings.title_color,

package/sections/zz-content-navigation.liquid

@@ -0,0 +1,409 @@
+{% schema %}
+{
+  "name": "页面内容导航",
+  "tag": "section",
+  "class": "zz-content-navigation",
+  "settings": [
+     {
+      "type": "image_picker",
+      "id": "logo",
+      "label": "Logo"
+    },
+    {
+      "type": "text",
+      "id": "aftershow",
+      "label": "在某个模块后显示",
+      "default": "product-buy"
+    },
+    {
+      "type": "color",
+      "id": "bg",
+      "label": "背景颜色",
+      "default": "#000000"
+    },
+    {
+      "type": "select",
+      "id": "text_color",
+      "options": [
+        {
+          "value": "dark",
+          "label": "深色模式"
+        },
+        {
+          "value": "white",
+          "label": "白色模式"
+        }
+      ],
+      "default": "white",
+      "label": "文案颜色模式"
+    },
+  ],
+  "blocks": [
+    {
+      "type": "item",
+      "name": "内容导航项",
+      "settings": [
+        {
+          "type": "text",
+          "id": "title",
+          "label": "标题"
+        },
+        {
+          "type": "text",
+          "id": "module_id",
+          "label": "模块id"
+        }
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "page content navigation"
+    }
+  ]
+}
+{% endschema %}
+<style>
+  #shopify-section-{{ section.id }} {
+    position: sticky;
+    height: 50px;
+    top: 0;
+    z-index: 501;
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(-100%);
+    transition: opacity 0.2s ease, transform 0.2s ease;
+  }
+
+  #shopify-section-{{ section.id }}.content-navigation--visible {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(0);
+  }
+
+  #shopify-section-{{ section.id }} .content-navigation-item--active {
+    opacity: 1;
+  }
+
+  #shopify-section-{{ section.id }} .nav-swiper-shadow {
+    position: relative;
+    overflow: hidden;
+  }
+
+  /* 移动端导航箭头位置 */
+  #shopify-section-{{ section.id }} .nav-swiper-button-prev,
+  #shopify-section-{{ section.id }} .nav-swiper-button-next {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 40;
+    pointer-events: auto;
+  }
+
+  /* 阴影加在左右箭头的伪元素上 */
+  #shopify-section-{{ section.id }} .nav-swiper-button-prev::before,
+  #shopify-section-{{ section.id }} .nav-swiper-button-next::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 40px;
+    pointer-events: none;
+    z-index: -1;
+  }
+
+  /* 左侧渐变阴影，从左箭头往内容方向淡出 */
+  #shopify-section-{{ section.id }} .nav-swiper-button-prev::before {
+    left: -4px;
+    background: linear-gradient(
+      to right,
+      {{ section.settings.bg }} 0%,
+      rgba(0, 0, 0, 0) 70%
+    );
+  }
+
+  /* 右侧渐变阴影，从右箭头往内容方向淡出 */
+  #shopify-section-{{ section.id }} .nav-swiper-button-next::before {
+    right: -4px;
+    background: linear-gradient(
+      to left,
+      {{ section.settings.bg }} 0%,
+      rgba(0, 0, 0, 0) 70%
+    );
+  }
+
+
+  #shopify-section-{{ section.id }} .nav-swiper-button-prev {
+    left: -4px;
+  }
+
+  #shopify-section-{{ section.id }} .nav-swiper-button-next {
+    right: -4px;
+  }
+{% comment %} 
+  #shopify-section-{{ section.id }} {
+    scroll-behavior: auto ;
+  } {% endcomment %}
+</style>
+
+<!-- PC端 -->
+<div
+  data-track-zz-section="page_content_nav"
+  class='content-navigation content-navigation-pc  tw-h-[50px] max-lg:tw-hidden'
+  style='background-color: {{ section.settings.bg }};'
+>
+  <div class=' tw-max-w-[1660px] lg:tw-px-[20px] tw-w-full tw-mx-auto tw-h-full tw-flex tw-items-center tw-justify-between'>
+    <div class='content-navigation-logo'>
+      {% if section.settings.logo != blank %}
+        {{
+          section.settings.logo
+          | image_url: width: 200
+          | image_tag: class: 'tw-w-auto tw-h-[12px]'
+        }}
+      {% endif %}
+    </div>
+    <div class='content-navigation-items tw-flex tw-items-center tw-space-x-[20px]'>
+      {% for block in section.blocks %}
+        <button
+          data-module-id='{{ block.settings.module_id }}'
+          data-track-zz-element='quick_nav_{{ block.settings.module_id | downcase}}'
+          class='content-navigation-item tw-opacity-[0.6] {% if section.settings.text_color == 'white' %} tw-text-white {% else %} tw-text-black {% endif %} tw-text-[14px] tw-font-medium'
+        >
+          {{ block.settings.title }}
+        </button>
+        {%- if forloop.last == false -%}
+          <div class='tw-w-[1px] tw-h-[16px] tw-bg-[#9E9E9E]'>&nbsp;</div>
+        {%- endif -%}
+      {% endfor %}
+    </div>
+  </div>
+</div>
+
+<!-- 移动端 -->
+<div
+  data-track-zz-section="page_content_nav"
+  class='content-navigation content-navigation-mobile  lg:tw-hidden tw-px-[20px]'
+  style='background-color: {{ section.settings.bg }};'
+>
+  <div class='tw-py-[12px]'>
+    {% if section.settings.logo != blank %}
+      {{
+        section.settings.logo
+        | image_url: width: 200
+        | image_tag: class: 'tw-h-[10px] tw-object-contain tw-w-auto'
+      }}
+    {% endif %}
+  </div>
+  <div class='nav-swiper-shadow'>
+    <div class=' swiper'>
+      <div class='swiper-wrapper tw-px-[20px]'>
+        {% for block in section.blocks %}
+          <div class='swiper-slide tw-py-[12px] tw-max-w-[30vw]'> 
+            <button
+              data-module-id='{{ block.settings.module_id }}'
+              data-track-zz-element='quick_nav_{{ block.settings.module_id | downcase }}'
+              class='content-navigation-item tw-opacity-[0.6] tw-w-full tw-text-center {% if section.settings.text_color == 'white' %} tw-text-white {% else %} tw-text-black {% endif %} tw-text-[13px] tw-font-medium'
+            >
+              {{ block.settings.title }}
+            </button>
+          </div>
+        {% endfor %}
+      </div>
+
+      <div class="nav-swiper-button-prev">
+        <svg
+        width='24'
+        height='24'
+        viewBox='0 0 24 24'
+        fill='none'
+        xmlns='http://www.w3.org/2000/svg'
+      >
+        {% if section.settings.text_color == 'white' %}
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M7 12L14.0711 4.92893L14.0608 7.11487L9.17571 12L14.0711 16.8718L14.0711 19.0711L7 12Z" fill="white"/>
+        {% else %}
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M7 12L14.0711 4.92893L14.0608 7.11487L9.17571 12L14.0711 16.8718L14.0711 19.0711L7 12Z" fill="black"/>
+        {% endif %}
+        
+      </svg>
+      </div>
+
+      <div class="nav-swiper-button-next">
+        <svg
+          width='24'
+          height='24'
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+        >
+          {% if section.settings.text_color == 'white' %}
+           <path fill-rule="evenodd" clip-rule="evenodd" d="M17 12L9.92893 4.92893L9.93916 7.11487L14.8243 12L9.92893 16.8718L9.92893 19.0711L17 12Z" fill="white"/> 
+          {% else %}
+           <path fill-rule="evenodd" clip-rule="evenodd" d="M17 12L9.92893 4.92893L9.93916 7.11487L14.8243 12L9.92893 16.8718L9.92893 19.0711L17 12Z" fill="black"/>
+          {% endif %}
+        </svg>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  document.addEventListener('DOMContentLoaded', (event) => {
+    const isDesktop = window.innerWidth > 1024;
+    const currentSection = document.getElementById(
+      'shopify-section-{{ section.id }}'
+    );
+    let exposure = false;
+    // 显示逻辑
+    const afterShowModuleName = '{{ section.settings.aftershow | strip | escape }}';
+    const isDesignMode =
+      typeof Shopify !== 'undefined' && Shopify.designMode === true;
+
+    if (currentSection) {
+      if (!afterShowModuleName || isDesignMode) {
+        currentSection.classList.add('content-navigation--visible');
+      } else {
+        const afterShowTarget = document.querySelector(
+          `[data-zz-module-name="${afterShowModuleName}"]`
+        );
+
+        if (afterShowTarget) {
+          const afterShowObserver = new IntersectionObserver(
+            (entries) => {
+              entries.forEach((entry) => {
+                const shouldShow = entry.boundingClientRect.bottom <= 0;
+                  console.log('shouldShow', shouldShow);
+                  const element = currentSection.querySelector('[data-track-zz-section="page_content_nav"]');
+                  const hpm = window.zzGetElementHpm ? zzGetElementHpm(element, 'section') : null;
+                  if (!exposure && shouldShow && hpm) {
+                    exposure = true; // 只触发一次曝光
+                    window.zzAnalytics && window.zzAnalytics.trackEvent('exposure', {
+                        page_element: {
+                            hpm,
+                        }
+                    });
+                  }
+                  
+                currentSection.classList.toggle(
+                  'content-navigation--visible',
+                  shouldShow
+                );
+              });
+            },
+            {
+              root: null,
+              rootMargin: '0px 0px -200px 0px',
+              threshold: 0,
+            }
+          );
+
+          afterShowObserver.observe(afterShowTarget);
+        } else {
+          currentSection.classList.add('content-navigation--visible');
+        }
+      }
+    }
+
+    
+    const navItems = currentSection.querySelectorAll('.content-navigation-item');
+    const sections = [];
+    let swiper = null;
+    const moduleIdToSlideIndex = {};
+
+    navItems.forEach((item) => {
+      const id = item.getAttribute('data-module-id');
+      if (!id) return;
+
+      const target = document.querySelector(`[data-zz-module-name="${id}"]`);
+      if (!target) return;
+
+      sections.push(target);
+
+      item.addEventListener('click', (e) => {
+        e.preventDefault();
+        const headerHeight = isDesktop ? 64 : 82;
+        const rect = target.getBoundingClientRect();
+        const offsetTop = rect.top + window.pageYOffset - headerHeight;
+
+        window.scrollTo({ top: offsetTop, behavior: 'smooth' })
+      });
+    });
+
+    if (sections.length) {
+      const observerOptions = {
+        root: null,
+        rootMargin: '0px 0px -200px 0px',
+        threshold: 0.1,
+      };
+
+        const observer = new IntersectionObserver((entries) => {
+          entries.forEach((entry) => {
+            if (!entry.isIntersecting) return;
+
+            const id = entry.target.dataset.zzModuleName;
+            navItems.forEach((item) => {
+              const isActive = item.getAttribute('data-module-id') === id;
+              item.classList.toggle('content-navigation-item--active', isActive);
+            });
+
+            if (swiper && moduleIdToSlideIndex[id] != null) {
+              const targetIndex = moduleIdToSlideIndex[id];
+              if (swiper.activeIndex !== targetIndex) {
+                swiper.slideTo(targetIndex);
+              }
+            }
+          });
+        }, observerOptions);
+
+      sections.forEach((sec) => observer.observe(sec));
+    }
+
+    /* 移动端 */
+    const swiperEl = currentSection.querySelector('.swiper');
+    const nextBtn = currentSection.querySelector('.nav-swiper-button-next');
+    const prevBtn = currentSection.querySelector('.nav-swiper-button-prev');
+
+    if (swiperEl) {
+      swiper = new Swiper(swiperEl, {
+        slidesPerView: 3.2,
+        spaceBetween: 12,
+        centeredSlides: false,
+        slidesOffsetAfter: 20,
+        navigation: {
+          nextEl: nextBtn,
+          prevEl: prevBtn,
+        },
+        clickable: true,
+      });
+
+      const slides = swiperEl.querySelectorAll('.swiper-slide');
+      slides.forEach((slide, index) => {
+        const btn = slide.querySelector('[data-module-id]');
+        if (!btn) return;
+        const id = btn.getAttribute('data-module-id');
+        if (!id) return;
+        moduleIdToSlideIndex[id] = index;
+      });
+
+      const updateNavState = () => {
+        const atBeginning = swiper.isBeginning;
+        const atEnd = swiper.isEnd;
+
+        if (prevBtn) {
+          prevBtn.style.display = atBeginning ? 'none' : 'flex';
+        }
+
+        if (nextBtn) {
+          nextBtn.style.display = atEnd ? 'none' : 'flex';
+        }
+      };
+
+      updateNavState();
+      swiper.on('slideChange', updateNavState);
+      swiper.on('resize', updateNavState);
+    }
+  });
+</script>