${images.map((img, i) => `

`).join('')}

${images.map((_, i) => ` `).join('')}

`; wrapper.innerHTML = ''; wrapper.appendChild(slider); const track = slider.querySelector('.slider-track'); const dots = slider.querySelectorAll('.dot'); let currentIndex = 0; // 👉 detect active slide on scroll track.addEventListener('scroll', () => { const slideWidth = track.clientWidth; const index = Math.round(track.scrollLeft / slideWidth); if (index !== currentIndex) { currentIndex = index; dots.forEach(dot => dot.classList.remove('active')); if (dots[currentIndex]) { dots[currentIndex].classList.add('active'); } } }); // 👉 click dots dots.forEach(dot => { dot.addEventListener('click', (e) => { const index = Number(e.target.dataset.index); const slideWidth = track.clientWidth; track.scrollTo({ left: index * slideWidth, behavior: 'smooth' }); }); }); }); }, 50); }); }); }); // ========================= // 1. INIT FUNCTION (SAFE) // ========================= function init() { if (window.innerWidth < desktopMinWidth) return; const sidebar = document.querySelector('#st-filter-sidebar'); const sortContainer = document.querySelector('#st-sort'); if (!sidebar || !sortContainer) return; // ✅ Prevent duplicate button if (document.getElementById('custom-filter-btn')) return; // ========================= // CREATE ELEMENTS (SAFE) // ========================= // FILTER BUTTON const btn = document.createElement('button'); btn.id = 'custom-filter-btn'; btn.innerText = 'Filters'; sortContainer.parentNode.appendChild(btn); // OVERLAY let overlay = document.getElementById('filter-overlay'); if (!overlay) { overlay = document.createElement('div'); overlay.id = 'filter-overlay'; document.body.appendChild(overlay); } // CLOSE BUTTON let closeBtn = document.getElementById('filter-close-btn'); if (!closeBtn) { closeBtn = document.createElement('div'); closeBtn.id = 'filter-close-btn'; closeBtn.innerHTML = '✕'; sidebar.appendChild(closeBtn); } // APPLY BUTTON let applyBtn = document.getElementById('filter-apply-btn'); if (!applyBtn) { applyBtn = document.createElement('button'); applyBtn.id = 'filter-apply-btn'; applyBtn.innerText = applyButtonLabel; sidebar.appendChild(applyBtn); } // ========================= // EVENTS (NO DUPLICATES) // ========================= function openDrawer() { sidebar.classList.add('open'); overlay.classList.add('active'); document.body.style.overflow = 'hidden'; } function closeDrawer() { sidebar.classList.remove('open'); overlay.classList.remove('active'); document.body.style.overflow = ''; } btn.addEventListener('click', openDrawer); overlay.addEventListener('click', closeDrawer); closeBtn.addEventListener('click', closeDrawer); applyBtn.addEventListener('click', closeDrawer); } // ========================= // 2. RUN ON SEARCH EVENTS // ========================= document.addEventListener('stSearchResultsEvent', () => { setTimeout(init, 100); // wait for DOM update }); // ========================= // 3. FALLBACK (INITIAL LOAD) // ========================= window.addEventListener('load', () => { setTimeout(init, 200); }); })(); //Filter outside click document.addEventListener("DOMContentLoaded", () => { document.addEventListener('click', function (event) { const sidebar = document.querySelector('#st-filter-sidebar'); const closeBtn = document.querySelector('.st-btn.st-close-btn'); const filterbtn = document.querySelector('.st-filter-btn'); const isFilterOpen = document.body.classList.contains('st-filter-popup-is-open'); if (isFilterOpen && sidebar && closeBtn) { if (!sidebar.contains(event.target) && !filterbtn.contains(event.target)) { if (!closeBtn.contains(event.target)) { closeBtn.click(); } } } }); }); // Adding money class in the price boxes (function () { function applyMoneyClass(root = document) { const prices = root.querySelectorAll('.st-sale-price, .st-main-price'); prices.forEach(el => { if (!el.classList.contains('money')) { el.classList.add('money'); } }); } document.addEventListener('DOMContentLoaded', () => { applyMoneyClass(); }); document.addEventListener('stSearchResultsEvent', () => { setTimeout(() => applyMoneyClass(), 200); }); const observer = new MutationObserver((mutations) => { mutations.forEach(mutation => { mutation.addedNodes.forEach(node => { if (!(node instanceof HTMLElement)) return; if ( node.matches?.('.st-product-card') || node.querySelector?.('.st-sale-price, .st-main-price') ) { applyMoneyClass(node); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); // wishlist document.addEventListener('DOMContentLoaded', () => { document.addEventListener('stSearchResultsEvent', (event) => { if (event.detail.source !== "searchResultsPage") return; event.detail.data.forEach(product => { setTimeout(() => { const productCard = document.querySelector( `[data-st-product-id="${product.id}"]` ); if (!productCard) return; if (productCard.querySelector('wishlist-button-collection')) return; const imageWrapper = productCard.querySelector(".st-image-wrapper"); if (!imageWrapper) return; const wishlistEl = document.createElement('wishlist-button-collection'); wishlistEl.classList.add("wish-list-btn"); wishlistEl.setAttribute('data-product-handle', product.handle); wishlistEl.setAttribute('show-icon', ''); wishlistEl.setAttribute('icon', 'wishlist'); wishlistEl.setAttribute('align-self', 'center'); wishlistEl.setAttribute('align-content', 'center'); wishlistEl.setAttribute( 'floating', JSON.stringify({ reference: '[wk-id="wAip70YJw1mAFD6jbV8rq"]', position: { placement: 'top-start', inset: true } }) ); imageWrapper.appendChild(wishlistEl); wishlistEl.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); }); }, 100); }); }); }); //Quick view document.addEventListener('DOMContentLoaded', () => { document.addEventListener('stSearchResultsEvent', (event) => { if (event.detail.source !== "searchResultsPage") return; event.detail.data.forEach(product => { setTimeout(() => { const productCard = document.querySelector( `[data-st-product-id="${product.id}"]` ); if (!productCard) return; if (productCard.querySelector('.custom-quickview')) return; const imageWrapper = productCard.querySelector(".st-image-wrapper"); if (!imageWrapper) return; // ✅ Create wrapper const wrapper = document.createElement('div'); wrapper.className = "custom-quickview"; // ✅ Inject HTML (dynamic product binding) wrapper.innerHTML = `

`; // append imageWrapper.appendChild(wrapper); // ✅ IMPORTANT: Re-init Alpine for this block if (window.Alpine) { window.Alpine.initTree(wrapper); } // ✅ stop propagation wrapper.addEventListener('click', (e) => { e.stopPropagation(); }); }, 100); }); }); }); // ATC or Choose options // document.addEventListener('DOMContentLoaded', () => { // document.addEventListener('stSearchResultsEvent', (event) => { // if (event.detail.source !== "searchResultsPage") return; // event.detail.data.forEach((product, index) => { // setTimeout(() => { // const productCard = document.querySelector( // `[data-st-product-id="${product.id}"]` // ); // if (!productCard) return; // if (productCard.querySelector('.custom-atc')) return; // const imageWrapper = productCard.querySelector(".st-image-wrapper"); // if (!imageWrapper) return; // // ✅ SAFE variant count // const variantCount = Array.isArray(product.variants) // ? product.variants.length // : (product.variants || 0); // if (!variantCount) return; // const wrapper = document.createElement('div'); // wrapper.className = "custom-atc"; // // ✅ REQUIRED dynamic values // const productUrl = `/products/${product.handle}`; // const templateId = `st-${product.id}-${index}`; // // ===================================== // // ✅ SINGLE VARIANT → REAL ATC (THEME SAFE) // // ===================================== // if (variantCount === 1 && product.variants[0]?.id) { // const variantId = product.variants[0].id; // wrapper.innerHTML = ` //

// //

// `; // } // // ===================================== // // ✅ MULTI VARIANT → REAL CHOOSE OPTION // // ===================================== // else { // wrapper.innerHTML = ` //

// //

// `; // } // // ✅ find target containers // const innerBox = productCard.querySelector(".st-inner-box"); // // function to place button correctly // const placeButton = () => { // if (window.innerWidth <= 1024) { // // 📱 Mobile / iPad → move inside inner box // if (innerBox && !innerBox.contains(wrapper)) { // innerBox.appendChild(wrapper); // } // } else { // // 💻 Desktop → keep on image // if (!imageWrapper.contains(wrapper)) { // imageWrapper.appendChild(wrapper); // } // } // }; // // ✅ initial placement // placeButton(); // // ✅ handle resize (optimized) // let resizeTimeout; // window.addEventListener("resize", () => { // clearTimeout(resizeTimeout); // resizeTimeout = setTimeout(placeButton, 150); // }); // // ✅ stop propagation // wrapper.addEventListener('click', (e) => { // e.stopPropagation(); // }); // }, 100); // }); // }); // }); document.addEventListener('DOMContentLoaded', () => { document.addEventListener('stSearchResultsEvent', (event) => { if (event.detail.source !== "searchResultsPage") return; event.detail.data.forEach((product, index) => { setTimeout(() => { const productCard = document.querySelector(`[data-st-product-id="${product.id}"]`); if (!productCard || productCard.querySelector('.custom-atc')) return; const imageWrapper = productCard.querySelector(".st-image-wrapper"); const innerBox = productCard.querySelector(".st-inner-box"); if (!imageWrapper) return; const variantCount = Array.isArray(product.variants) ? product.variants.length : (product.variants || 0); if (!variantCount) return; const wrapper = document.createElement('div'); wrapper.className = "custom-atc w-full"; if (variantCount === 1 && product.variants[0]?.id) { const variantId = product.variants[0].id; // Cleaned up version of your Live Theme HTML wrapper.innerHTML = `

`; } else { wrapper.innerHTML = `

`; } // --- Placement Logic --- const placeButton = () => { if (window.innerWidth <= 1024) { if (innerBox && !innerBox.contains(wrapper)) innerBox.appendChild(wrapper); } else { if (!imageWrapper.contains(wrapper)) imageWrapper.appendChild(wrapper); } }; placeButton(); // --- CRITICAL STEP: Initialize Alpine on the new HTML --- // if (window.Alpine) { // window.Alpine.initTree(wrapper); // } window.addEventListener("resize", () => placeButton()); wrapper.addEventListener('click', (e) => e.stopPropagation()); }, 100); }); }); });

Coastline Collection

Join Paksha Purpose