zz-shopify-components 0.34.1-beta.23 → 0.34.1-beta.24

package/blocks/zz-scrollTrigger-block.liquid

@@ -0,0 +1,247 @@
+
+<style>
+  .zz-scrollTrigger-block-{{ block.id }} {
+    width: 100%;
+    height: 100vh;
+    background-color: {{ block.settings.background_color }};
+    padding: 0;
+    margin: 0;
+    position: relative;
+    {% if block.settings.scroll_direction == 'horizontal' %}
+    display: flex;
+    overflow-x: hidden;
+    {% else %}
+    overflow: hidden;
+    {% endif %}
+  }
+    .zz-scrollTrigger-block-{{ block.id }} .zz-scrollTrigger-item .responsive-width-image,
+      .zz-scrollTrigger-block-{{ block.id }} .zz-scrollTrigger-item .zz-video {
+      aspect-ratio: 16 / 9 !important;
+      max-width: 45vw !important;
+      {% comment %} border-radius: 12px; {% endcomment %}
+    }
+
+  .zz-scrollTrigger-block-{{ block.id }} .zz-scrollTrigger-item .content-video-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    {% comment %} border-radius: 12px; {% endcomment %}
+  }
+
+
+  {% if block.settings.scroll_direction == 'horizontal' %}
+  .zz-scrollTrigger-block-{{ block.id }} .zz-scrollTrigger-item {
+    width: 100vw;
+    height: 100vh;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    will-change: transform;
+  }
+  {% else %}
+  .zz-scrollTrigger-block-{{ block.id }} .zz-scrollTrigger-item {
+    width: 100%;
+    height: 100vh;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    will-change: transform, opacity;
+  }
+  {% endif %}
+  
+
+  @media (max-width: 768px) {
+    .zz-scrollTrigger-block-{{ block.id }} .zz-scrollTrigger-item {
+      height: 100vh;
+      width: 100%;
+      {% if block.settings.scroll_direction == 'horizontal' %}
+      width: 100vw;
+      padding: 0 10px;
+      {% else %}
+      padding: 0 10px;
+      {% endif %}
+    }
+  }
+</style>
+
+<div class="zz-scrollTrigger-block zz-scrollTrigger-block-{{ block.id }}" id="zz-scrollTrigger-block-{{ block.id }}">
+  {% for item in block.blocks %}
+    <div class="zz-scrollTrigger-item">
+      {% render item %}
+    </div>
+  {% endfor %}
+</div>
+
+<script>
+    document.addEventListener("DOMContentLoaded", () => {
+        if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') {
+            return;
+        }
+
+        gsap.registerPlugin(ScrollTrigger);
+        ScrollTrigger.config({
+          ignoreMobileResize: true,
+          autoRefreshEvents: "visibilitychange,DOMContentLoaded,load"
+        });
+
+        if (window.innerWidth < 1024) {
+            return;
+        }
+        
+        let items = gsap.utils.toArray('#zz-scrollTrigger-block-{{ block.id }} .zz-scrollTrigger-item');
+        let scrollTriggerInstances = [];
+        
+        if (items.length > 1) {
+            {% if block.settings.scroll_direction == 'horizontal' %}
+            const endValue = window.innerHeight * 1.3 * (items.length - 1);
+            
+            const horizontalST = gsap.to(items, {
+                xPercent: -100 * (items.length - 1),
+                ease: 'none',
+                scrollTrigger: {
+                    trigger: '#zz-scrollTrigger-block-{{ block.id }}',
+                    start: 'top top',
+                    end: `+=${endValue}`,
+                    pin: true,
+                    scrub: 1,
+                    markers: false,
+                    {% if block.settings.enable_snap %}
+                    snap: {
+                        snapTo: 1 / (items.length - 1),
+                        duration: 0.5,
+                        delay: 0.1, 
+                        directional: false,
+                        ease: "power2.inOut"
+                    },
+                    {% endif %}
+                }
+            });
+            scrollTriggerInstances.push(horizontalST.scrollTrigger);
+            {% else %}
+            gsap.set(items[0], { y: 0, opacity: 1 });
+            gsap.set(items.slice(1), { y: '10vh', opacity: 0 });
+            
+            const endValue = window.innerHeight * 1 * (items.length - 1); // 增加滚动距离让动画更平滑
+            
+            let tl = gsap.timeline({
+                scrollTrigger: {
+                    trigger: '#zz-scrollTrigger-block-{{ block.id }}',
+                    start: 'top top',
+                    end: `+=${endValue}`,
+                    pin: true,
+                    scrub: 1,
+                    markers: false,
+                    {% if block.settings.enable_snap %}
+                    snap: {
+                        snapTo: 1 / (items.length - 1),
+                        duration: 0.2,
+                        delay: 0.05, 
+                        directional: true,
+                        ease: "power2.out"
+                    },
+                    {% endif %}
+                    refreshPriority: -1,
+                }
+            });
+            scrollTriggerInstances.push(tl.scrollTrigger);
+            
+            items.forEach((item, index) => {
+                if (index < items.length - 1) {
+                    let currentItem = items[index];
+                    let nextItem = items[index + 1];
+                    
+                    tl.to(currentItem, {
+                        y: '-10vh',
+                        opacity: 0,
+                        duration: 0.1,
+                        ease: "power2.inOut"
+                    })
+                    .fromTo(nextItem, {
+                        y: '10vh',
+                        opacity: 0
+                    }, {
+                        y: 0,
+                        opacity: 1,
+                        duration: 0.1,
+                        ease: "power2.inOut"
+                    });
+                }
+            });
+            {% endif %}
+        }
+        
+        window.addEventListener('beforeunload', () => {
+            scrollTriggerInstances.forEach(st => {
+                if (st) st.kill();
+            });
+        });
+        
+        let resizeTimeout;
+        {% comment %} window.addEventListener('resize', () => {
+            clearTimeout(resizeTimeout);
+            resizeTimeout = setTimeout(() => {
+                ScrollTrigger.refresh();
+            }, 250);
+        }); {% endcomment %}
+    });
+</script>
+
+{% schema %}
+{
+  "name": "ZZ ScrollTrigger Block",
+  "settings": [
+    {
+      "type": "select",
+      "id": "scroll_direction",
+      "label": "滚动方向",
+      "options": [
+        {
+          "value": "vertical",
+          "label": "上下切换"
+        },
+        {
+          "value": "horizontal",
+          "label": "左右切换"
+        }
+      ],
+      "default": "vertical",
+      "info": "选择滚动的方向模式"
+    },
+    {
+      "type": "checkbox",
+      "id": "enable_snap",
+      "label": "启用吸附",
+      "default": false
+    },
+    {
+      "type": "color_background",
+      "id": "background_color",
+      "label": "背景颜色",
+      "default": "transparent"
+    }
+  ],
+  "blocks": [
+    {
+      "type": "@theme"
+    }
+  ],
+  "presets": [
+    {
+      "name": "ScrollTrigger滚动容器Block",
+      "blocks": [
+        {
+          "type": "zz-title",
+          "settings": {
+            "pc_title": "<p>滚动容器Block</p>"
+          }
+        }
+      ]
+    }
+  ]
+}
+{% endschema %}

package/package.json

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

package/sections/zz-live-chat.liquid

@@ -46,6 +46,8 @@
                 findTargetIframe();
             }
         });
+
+        let isLogin = false;
         
         // 监听滚动事件
         window.addEventListener('scroll', function() {
@@ -119,6 +121,77 @@
             setTimeout(findTargetIframe, 1000);
             return null;
         }
+
+        function checkLogin() {
+           console.log("jwt checkLogin")
+           if(isLogin) {
+                return;
+           }
+            if(window.__ZZ_ANALYTICS_CONTEXT__ && window.__ZZ_ANALYTICS_CONTEXT__.huid) {
+                const params = {
+                    email_verified: true,
+                    external_id: window.__ZZ_ANALYTICS_CONTEXT__.huid
+                };
+                
+                if(window.__ZZ_ANALYTICS_CONTEXT__.email) {
+                    params.email = window.__ZZ_ANALYTICS_CONTEXT__.email;
+                }
+                
+                if(window.__ZZ_ANALYTICS_CONTEXT__.firstName || window.__ZZ_ANALYTICS_CONTEXT__.lastName) {
+                    const nameParts = [];
+                    if(window.__ZZ_ANALYTICS_CONTEXT__.firstName) nameParts.push(window.__ZZ_ANALYTICS_CONTEXT__.firstName);
+                    if(window.__ZZ_ANALYTICS_CONTEXT__.lastName) nameParts.push(window.__ZZ_ANALYTICS_CONTEXT__.lastName);
+                    params.name = nameParts.join(' ');
+                }
+                
+                handleLogin(params);
+            }
+        }
+
+        function handleLogin(params) {
+            const { email_verified } = params;
+            isLogin = true;
+            zE("messenger", "loginUser", function (callback) { 
+                try {
+                    const jwt = requestMessagingJwt(params);
+                    callback(jwt)
+                } catch (error) {
+                    console.log('request-jwt', error); 
+                    return;
+                }
+            }, function (error) { 
+                if(error && email_verified) {
+                    handleLogin({...params, email_verified: false})
+                }
+                console.log('jwt login-error', error); 
+            });
+        }
+
+        async function requestMessagingJwt(params) {
+            const response = await fetch('https://static.zerozeroplatform.com/zendesk-jwt', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(params || {})
+            });
+            if (!response.ok) {
+                throw new Error('Failed to fetch messaging jwt');
+            }
+            const data = await response.json();
+            if (!data || !data.jwt) {
+                throw new Error('Messaging jwt request failed');
+            }
+
+            return data.jwt;
+        }
+
+        if (typeof subscribe === 'function') {
+            subscribe('zz:user-session-updated', checkLogin);
+        }
+        // 初始化检查登录状态
+        checkLogin();
+        
     });
 </script>