zz-shopify-components 0.15.1-beta.2 → 0.16.0

package/package.json

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

package/sections/zz-swiper-banner.liquid

@@ -580,6 +580,7 @@
         >
           <div
             id='{{ banner.id }}-bannerlink'
+            data-banner-name="{{ banner.settings.banner_name }}"
             class='{{ banner.id }}-site-event swiper-content tw-w-full tw-max-w-screen tw-relative tw-text-left tw-h-full'
           >
             {%- if banner.type == 'img' -%}
@@ -937,5 +938,37 @@
         }
       }
     }
+
+    function handleBannerShow() {
+      // 监听滚动，高亮 tab
+      const observerOptions = {
+        root: null,
+        rootMargin: '0px 0px 0px 0px',
+        threshold: 0.5
+      };
+  
+      const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            const bannerName = entry.target.dataset.bannerName;
+            console.log('banner_show', bannerName);
+            dataLayer.push({
+              event: "banner_show",
+              timestamp: new Date().toISOString(),
+              event_type_attribute: bannerName,
+              section_name: "swiper_banner_v3",
+            });
+          }
+          
+        });
+      }, observerOptions);
+
+      const banner = document.querySelectorAll('[data-banner-name]');
+      banner.forEach(item => {
+        observer.observe(item);
+      });
+    
+    }
+    handleBannerShow();
   })
 </script>