${message}

`; } function getSessionId() { let sessionId = localStorage.getItem('quantum_visitor_sid'); if (!sessionId) { sessionId = 'sid_' + Math.random().toString(36).substr(2, 9); localStorage.setItem('quantum_visitor_sid', sessionId); } return sessionId; } async function trackVisitor() { if (!visitorCounter.isEnabled) return null; try { const response = await fetch('https://sales-popup.gropulse.com/visitors/track', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ shop: Shopify.shop, sessionId: getSessionId(), deviceType: screen.width < 768 ? 'mobile' : 'desktop', currentPage: window.location.pathname }), }); const data = await response.json(); return data.visitorCount; } catch (error) { console.error('Error tracking visitor:', error); return null; } } const notificationWrapperElement = document.createElement("div"); notificationWrapperElement.classList.add("quantum-sn-notification-wrapper"); const closeBtnMarkup = true === true ? `` : ""; notificationWrapperElement.innerHTML = ` ${closeBtnMarkup}

`; document.body.appendChild(notificationWrapperElement); const notifElem = document.querySelector(".quantum-sn-notification-content-wrapper"); const closeBtn = document.querySelector(".quantum-sn-notification-content__close-btn"); let initialDelayTimeoutId; let intervalTimeoutId; let displayTimeTimeoutId; const deactivateNotifications = () => { clearTimeout(initialDelayTimeoutId); clearTimeout(intervalTimeoutId); clearTimeout(displayTimeTimeoutId); if (animation.isEnabled) { notificationWrapperElement.className = `quantum-sn-notification-wrapper animation-${animation.exitAnimation}-out`; setTimeout(() => { notificationWrapperElement.classList.remove("quantum-sn-show"); }, animation.duration + animation.delay); } else { notificationWrapperElement.classList.remove("quantum-sn-show"); } }; closeBtn?.addEventListener("click", deactivateNotifications); async function trackAnalytics(type, data = {}) { try { await fetch('https://sales-popup.gropulse.com/analytics/track', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ type, shop: Shopify.shop, deviceType: screen.width < 768 ? 'mobile' : 'desktop', ...data }) }); } catch (error) { console.error('Analytics tracking error:', error); } }; function getNotificationHeight() { const notification = document.querySelector('.quantum-sn-notification-wrapper'); if (!notification) return 200; // Default fallback height const height = notification.offsetHeight; return height + 50; // Adding extra padding } const stockScarcity = { isEnabled: false, threshold: 10, criticalThreshold: 5, lowStockMessage: 'Only {count} items left in stock!', criticalStockMessage: 'Hurry! Only {count} left!', position: 'after' }; async function createStockAlert(productId) { if (!stockScarcity.isEnabled) return ''; // Get stock level from Shopify product variant async function getProductStock(productId) { const storageKey = `product_stock_${productId}`; const cachedData = sessionStorage.getItem(storageKey); if (cachedData !== null) { const { stock, timestamp } = JSON.parse(cachedData); const currentTime = new Date().getTime(); // Cache expires after 5 minutes if (currentTime - timestamp < 5 * 60 * 1000) { return stock; } } try { const response = await fetch(`https://sales-popup.gropulse.com/product?shop=${Shopify.shop}&productId=${productId}`); const {product} = await response.json(); const totalStock = product.variants.edges.reduce((sum, { node }) => sum + (node.inventoryQuantity || 0), 0 ); const cacheData = { stock: totalStock, timestamp: new Date().getTime() }; sessionStorage.setItem(storageKey, JSON.stringify(cacheData)); return totalStock; } catch (error) { console.error('Error fetching product stock:', error); return null; } } const stockCount = await getProductStock(productId); if (stockCount === null || stockCount > stockScarcity.threshold) return ''; const isCritical = stockCount <= stockScarcity.criticalThreshold; const message = isCritical ? stockScarcity.criticalStockMessage : stockScarcity.lowStockMessage; return `

${message.replace('{count}', stockCount)}

`; } async function getRecommendedProducts(productId) { if (!crossSell.isEnabled) return null; try { const response = await fetch( `${window.Shopify.routes.root}recommendations/products.json?` + `product_id=${productId}&` + `limit=${crossSell.maxSuggestions}&` + `intent=${crossSell.suggestType}` ); const {products} = await response.json(); return products; } catch (error) { console.error('Error fetching recommended products:', error); return null; } } let i = 0; window.gpIsViewCounted = window.gpIsViewCounted || false; const showNotif = async () => { const notif = notifList[i++ % notifList.length]; const productId = notif?.lineItems?.edges[0]?.node?.product?.id; let recommendedProduct = null; if (crossSell.isEnabled && Math.random() < 0.3) { const recommendations = await getRecommendedProducts(productId.split("/").pop()); if (recommendations && recommendations.length > 0) { recommendedProduct = recommendations[Math.floor(Math.random() * recommendations.length)]; } } if(!window.gpIsViewCounted){ await trackAnalytics('view', { productId: notif?.lineItems?.edges[0]?.node?.product?.id }); window.gpIsViewCounted = true } let visitorCount = null; if (visitorCounter.isEnabled) { visitorCount = await trackVisitor(); } let stockAlert = ''; if (stockScarcity.isEnabled) { stockAlert = await createStockAlert(productId); } const customerName = notif?.customer?.firstName; const customerCity = notif?.customer?.addresses[0]?.city; const customerCountry = notif?.customer?.addresses[0]?.country; const productName = notif?.lineItems?.edges[0]?.node?.title; const productImage = notif?.lineItems?.edges[0]?.node?.image?.url; const productUrl = notif?.lineItems?.edges[0]?.node?.product?.handle; const orderTime = notif?.createdAt; const modifiedNotificationContent = `{{customer city}} 的客人購買了 {{product name}}❤️❤️❤️`.replace( /{{customer name}}/g, `${true || !customerName ? "Someone" : customerName}` ) .replace(/{{customer city}}/g, customerCity ? customerCity : "unknown city") .replace(/{{customer country}}/g, `${customerCountry ? customerCountry : "unknown country"}`) .replace( /{{product name}}/g, `${productName}` ); notifElem.innerHTML = recommendedProduct ? ` ${createVisitorCounter(visitorCount)}

${crossSell.message.replace('{product}', `${recommendedProduct.title}`)}

` : `${createVisitorCounter(visitorCount)}

${productImage ? (`

`) : ""}

${stockScarcity.isEnabled && stockScarcity.position === 'before' ? stockAlert : ''}

${modifiedNotificationContent}

${stockScarcity.isEnabled && stockScarcity.position === 'after' ? stockAlert : ''} ${timeTranslations?.about ?? ""} ${timeDifference( new Date(), new Date(orderTime) )}

`; if (countdownTimer.isEnabled) { // Create a unique timer ID for this product const timerKey = `quantum_timer_${notif?.lineItems?.edges[0]?.node?.product?.id}`; let endTime = localStorage.getItem(timerKey); if (!endTime) { endTime = Date.now() + (countdownTimer.duration * 60 * 60 * 1000); // Convert hours to milliseconds localStorage.setItem(timerKey, endTime); } const timeLeft = Math.max(0, endTime - Date.now()); const hours = Math.floor(timeLeft / (60 * 60 * 1000)); const minutes = Math.floor((timeLeft % (60 * 60 * 1000)) / (60 * 1000)); const seconds = Math.floor((timeLeft % (60 * 1000)) / 1000); let timeString; if (countdownTimer.style === 'digital') { timeString = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`; } else { timeString = `${hours}h ${minutes}m ${seconds}s`; } const timerMessage = countdownTimer.text.replace('{time}', timeString); // Insert timer based on position const notifContent = notifElem.querySelector('.quantum-sn-notification-content__text'); const timerElement = document.createElement('div'); timerElement.className = 'quantum-sn-timer'; const updateTimer = () => { const timeLeft = Math.max(0, endTime - Date.now()); const hours = Math.floor(timeLeft / (60 * 60 * 1000)); const minutes = Math.floor((timeLeft % (60 * 60 * 1000)) / (60 * 1000)); const seconds = Math.floor((timeLeft % (60 * 1000)) / 1000); if (timeLeft === 0) { clearInterval(timerInterval); // Optionally hide or update the timer when it reaches zero timerElement.style.display = 'none'; return; } let timeString; if (countdownTimer.style === 'digital') { timeString = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`; } else { timeString = `${hours}h ${minutes}m ${seconds}s`; } const timerMessage = countdownTimer.text.replace('{time}', timeString); timerElement.innerHTML = timerMessage; }; // Initial update updateTimer(); // Update timer every second const timerInterval = setInterval(updateTimer, 1000); if (countdownTimer.position === 'before') { notifContent.insertBefore(timerElement, notifContent.firstChild); } else if (countdownTimer.position === 'after') { notifContent.appendChild(timerElement); } else { notifContent.parentNode.insertBefore(timerElement, notifContent.nextSibling); } }; const height = getNotificationHeight(); notificationWrapperElement.style.setProperty('--notification-transform-distance', `${height}px`); notificationWrapperElement.classList.add("quantum-sn-show"); if (animation.isEnabled) { notificationWrapperElement.className = `quantum-sn-notification-wrapper animation-${animation.entryAnimation}-in`; } else { notificationWrapperElement.className = "quantum-sn-notification-wrapper quantum-sn-show"; } displayTimeTimeoutId = setTimeout(() => { if (animation.isEnabled) { // Apply exit animation notificationWrapperElement.className = `quantum-sn-notification-wrapper animation-${animation.exitAnimation}-out`; // Wait for animation to complete before hiding setTimeout(() => { notificationWrapperElement.classList.remove("quantum-sn-show"); intervalTimeoutId = setTimeout(showNotif, (+110*1000)); }, animation.duration + animation.delay); } else { // Use default behavior notificationWrapperElement.classList.remove("quantum-sn-show"); intervalTimeoutId = setTimeout(showNotif, (+110*1000)); } }, (+8*1000)); // Add click tracking to product links const productLinks = document.querySelectorAll('.order-product-name a'); productLinks.forEach(link => { link.addEventListener('click', () => { trackAnalytics('click', { productId: notif?.lineItems?.edges[0]?.node?.product?.id }); }); }); // Add close button tracking const closeButton = document.querySelector('.quantum-sn-notification-content__close-btn'); if (closeButton) { closeButton.addEventListener('click', () => { trackAnalytics('close'); }); } }; const selectedDevices = 'desktop,mobile'.split(","); const selectedPages = 'all'.split(","); const selectedTemplates = ''.split(","); async function checkGeoTargeting() { const geoTargeting = { isEnabled: false, mode: 'all', countries: [] }; if (!geoTargeting.isEnabled) return true; try { // Get user's country from session storage if available let userCountry = sessionStorage.getItem('quantum_user_country'); if (!userCountry) { // Fetch user's country using IP geolocation const response = await fetch('https://get.geojs.io/v1/ip/geo.json'); const data = await response.json(); userCountry = data.country_code; // Cache the result sessionStorage.setItem('quantum_user_country', userCountry); } // Check if notification should be shown based on targeting mode if (geoTargeting.mode === 'all') return true; const isCountryInList = geoTargeting.countries.includes(userCountry); return geoTargeting.mode === 'include' ? isCountryInList : !isCountryInList; } catch (error) { console.error('Error checking geo-targeting:', error); return true; // Show notification if geo-targeting check fails } } const displayBasedOnDevice = async () => { const shouldDisplayForLocation = await checkGeoTargeting(); if (!shouldDisplayForLocation) return; let shouldDisplay = false; // show notifications on mobile devices if(selectedDevices.length === 1 && selectedDevices[0] === "mobile"){ if(screen.width < 640) shouldDisplay = true; } // show notifications on desktop devices if(selectedDevices.length === 1 && selectedDevices[0] === "desktop"){ if(screen.width > 640) shouldDisplay = true; } // always show notifications if(selectedDevices.length === 2){ shouldDisplay = true; } // If device check passes, set up triggers if (shouldDisplay) { // Exit intent tracking if (triggerRules.exitIntent.isEnabled) { let mouseY = 0; document.addEventListener('mousemove', function(e) { mouseY = e.clientY; }); document.addEventListener('mouseleave', function(e) { if (mouseY < 100 && e.clientY <= 0) { // Exit intent detected showNotif(); } }); } // Scroll depth tracking if (triggerRules.scrollDepth.isEnabled) { window.addEventListener('scroll', function() { const scrollPercent = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100; if (scrollPercent >= triggerRules.scrollDepth.percentage) { showNotif(); } }); } // Time on page tracking if (triggerRules.timeOnPage.isEnabled) { setTimeout(showNotif, triggerRules.timeOnPage.seconds * 1000); } // Inactivity tracking if (triggerRules.inactivity.isEnabled) { let inactivityTimer; function resetInactivityTimer() { clearTimeout(inactivityTimer); inactivityTimer = setTimeout(showNotif, triggerRules.inactivity.seconds * 1000); } ['mousemove', 'keypress', 'scroll', 'click'].forEach(event => { document.addEventListener(event, resetInactivityTimer); }); resetInactivityTimer(); } // If no custom triggers are enabled, use default delay if (!triggerRules.exitIntent.isEnabled && !triggerRules.scrollDepth.isEnabled && !triggerRules.timeOnPage.isEnabled && !triggerRules.inactivity.isEnabled) { initialDelayTimeoutId = setTimeout(showNotif, (+30*1000)); } } }; // Display logic based on pages if(selectedPages[0] === 'all') { displayBasedOnDevice(); } if(selectedPages[0] === 'custom') { const currentPath = location.pathname.split("/")[1]; const pathMap = { '': 'index', 'collections': 'collection', 'products': 'product', 'cart': 'cart', 'blogs': 'blog', 'pages': 'page', 'search': 'search' }; if (selectedTemplates.includes(pathMap[currentPath] || '')) { displayBasedOnDevice(); } } })();