// --- ECOMPOSER WISHLIST REDIRECT BLOCKER (UPDATED) --- document.addEventListener('click', function(e) { // 1. Target the exact class shown in your inspector screenshot const wishlistBtn = e.target.closest('.ecom-product__wishlist-link'); if (!wishlistBtn) return; // 2. Check for the exact "Added" classes EComposer applies const isAddedState = wishlistBtn.classList.contains('ecom-product__wishlist-link-added') || wishlistBtn.classList.contains('ecom-button-active'); if (isAddedState) { // 3. Kill the browser redirect entirely e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation(); // 4. Visually EMPTY the heart by removing EComposer's active classes wishlistBtn.classList.remove('ecom-product__wishlist-link-added', 'ecom-button-active'); // 5. Strip the wishlist page URL so it stops acting like a link if (wishlistBtn.hasAttribute('href') && wishlistBtn.getAttribute('href').includes('wishlist')) { wishlistBtn.setAttribute('data-old-href', wishlistBtn.getAttribute('href')); wishlistBtn.removeAttribute('href'); } console.log('Redirect blocked and heart visually reset.'); } }, true); document.addEventListener('DOMContentLoaded', function() { // --- NEW CODE: ONLY RUN ON COLLECTION PAGES --- if (!window.location.pathname.includes('/collections/')) { return; // Stop the script entirely if this isn't a collection page } // ---------------------------------------------- // 1. INJECT THE HTML UI & STYLES GLOBALLY (ALL IN ONE) const uiWrapper = document.createElement('div'); uiWrapper.innerHTML = `

FILTER & SORT

`; document.body.appendChild(uiWrapper); // 2. INITIATE LOGIC const triggerBtn = document.getElementById('floating-filter-trigger'); const drawer = document.getElementById('custom-filter-drawer'); if (triggerBtn && drawer) { triggerBtn.addEventListener('click', (e) => { e.preventDefault(); drawer.classList.add('is-open'); document.body.style.overflow = 'hidden'; }); const closeDrawer = () => { drawer.classList.remove('is-open'); document.body.style.overflow = ''; }; document.getElementById('close-filter-btn').addEventListener('click', closeDrawer); document.getElementById('show-products-btn').addEventListener('click', closeDrawer); document.querySelectorAll('.accordion-header').forEach(acc => { acc.addEventListener('click', function() { const item = this.parentElement; const content = item.querySelector('.accordion-content'); item.classList.toggle('is-active'); content.style.maxHeight = item.classList.contains('is-active') ? content.scrollHeight + 30 + "px" : "0"; }); }); window.customFilterState = { productData: {}, extractedColors: new Set(), extractedMetals: new Set(), isFetchingMore: false }; const colorContainer = document.getElementById('filter-colors-container'); const metalContainer = document.getElementById('filter-metals-container'); function formatText(str) { return str.split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' '); } function renderFilterUI() { const activeColors = Array.from(document.querySelectorAll('.dynamic-filter-checkbox[data-type="color"]:checked')).map(cb => cb.value); const activeMetals = Array.from(document.querySelectorAll('.dynamic-filter-checkbox[data-type="metal"]:checked')).map(cb => cb.value); if(colorContainer) { if(window.customFilterState.extractedColors.size > 0) { const colors = Array.from(window.customFilterState.extractedColors).sort(); colorContainer.innerHTML = colors.map(color => { const isChecked = activeColors.includes(color) ? 'checked' : ''; return ` ${formatText(color)}`; }).join(''); } else { colorContainer.innerHTML = '

No colors found.

'; } } if(metalContainer) { if(window.customFilterState.extractedMetals.size > 0) { const metals = Array.from(window.customFilterState.extractedMetals).sort(); metalContainer.innerHTML = metals.map(metal => { const isChecked = activeMetals.includes(metal) ? 'checked' : ''; return ` ${formatText(metal)}`; }).join(''); } else { metalContainer.innerHTML = '

No metals found.

'; } } applyFilters(); } const norm = (s) => s ? s.toLowerCase().replace(/[-_ ]+/g, '') : ''; function updateSliderImages(card, handle, selectedColors, selectedMetals) { const data = window.customFilterState.productData[handle]; const mediaScroll = card.querySelector('.ecom-collection__product-media'); const imgContainer = card.querySelector('.ecom-collection__product-media--container'); if (!mediaScroll || !data || !imgContainer) return; let track = imgContainer.querySelector('.custom-slider-track'); let indicator; if (!track) { track = document.createElement('div'); track.className = 'custom-slider-track'; indicator = document.createElement('div'); indicator.className = 'custom-slider-indicator'; track.appendChild(indicator); imgContainer.appendChild(track); mediaScroll.addEventListener('scroll', () => { const maxScrollLeft = mediaScroll.scrollWidth - mediaScroll.clientWidth; if (maxScrollLeft <= 0) return; const currentImagesCount = mediaScroll.querySelectorAll('img').length; const scrollPercentage = mediaScroll.scrollLeft / maxScrollLeft; indicator.style.transform = `translateX(${scrollPercentage * (currentImagesCount - 1) * 100}%)`; }); } else { indicator = track.querySelector('.custom-slider-indicator'); } let stateStr = selectedColors.join('|') + '||' + selectedMetals.join('|'); if (card.getAttribute('data-current-slider-state') === stateStr) return; card.setAttribute('data-current-slider-state', stateStr); let targetImages = []; if (selectedColors.length === 0 && selectedMetals.length === 0) { targetImages = data.images.slice(0, 5); } else { let cMatch = selectedColors.length > 0 ? norm(selectedColors[0]) : null; let mMatch = selectedMetals.length > 0 ? norm(selectedMetals[0]) : null; let exactMatches = data.media.filter(m => { if (!m.alt) return false; let altNorm = norm(m.alt); let hasColor = cMatch ? altNorm.includes(cMatch) : true; let hasMetal = mMatch ? altNorm.includes(mMatch) : true; return hasColor && hasMetal; }).map(m => m.src); if (exactMatches.length > 0) { targetImages = exactMatches; } else if (cMatch && mMatch) { targetImages = data.media.filter(m => m.alt && norm(m.alt).includes(cMatch)).map(m => m.src); } if (targetImages.length === 0) { const variant = data.variants.find(v => { return v.options.some(opt => { let oNorm = norm(opt); return (cMatch && oNorm === cMatch) || (mMatch && oNorm === mMatch); }); }); if (variant && variant.featured_image) { targetImages.push(variant.featured_image.src); } for (let src of data.images) { if (targetImages.length >= 5) break; if (!targetImages.includes(src)) targetImages.push(src); } } } mediaScroll.innerHTML = ''; const limit = Math.min(targetImages.length, 5); for (let i = 0; i < limit; i++) { const img = document.createElement('img'); img.src = targetImages[i]; img.loading = "lazy"; mediaScroll.appendChild(img); } if (indicator) { if (limit > 1) { track.style.display = 'block'; indicator.style.width = (100 / limit) + '%'; indicator.style.transform = 'translateX(0)'; mediaScroll.scrollLeft = 0; } else { track.style.display = 'none'; } } } function applyFilters() { const selectedColors = Array.from(document.querySelectorAll('.dynamic-filter-checkbox[data-type="color"]:checked')).map(cb => cb.value); const selectedMetals = Array.from(document.querySelectorAll('.dynamic-filter-checkbox[data-type="metal"]:checked')).map(cb => cb.value); const availableToggle = document.getElementById('available-online-toggle'); const availableOnly = availableToggle ? availableToggle.checked : false; const hasActiveFilters = selectedColors.length > 0 || selectedMetals.length > 0 || availableOnly; let visibleCount = 0; document.querySelectorAll('.ecom-collection__product-item').forEach(card => { const handle = card.getAttribute('data-product-handle'); const data = window.customFilterState.productData[handle]; if (!data) return; const colorMatch = selectedColors.length === 0 || selectedColors.some(c => data.colors.includes(c)); const metalMatch = selectedMetals.length === 0 || selectedMetals.some(m => data.metals.includes(m)); const isAvailable = (data.available === true || data.available === "true"); const availableMatch = !availableOnly || isAvailable; if (colorMatch && metalMatch && availableMatch) { card.style.removeProperty('display'); visibleCount++; if(window.innerWidth <= 768) { updateSliderImages(card, handle, selectedColors, selectedMetals); } } else { card.style.setProperty('display', 'none', 'important'); } }); if (hasActiveFilters && visibleCount < 6) { const loadMoreBtn = document.querySelector('.ecom-products-pagination-loadmore-btn'); if (loadMoreBtn && window.getComputedStyle(loadMoreBtn).display !== 'none' && !window.customFilterState.isFetchingMore) { window.customFilterState.isFetchingMore = true; loadMoreBtn.click(); clearTimeout(window.customFilterState.fetchTimeout); window.customFilterState.fetchTimeout = setTimeout(() => { window.customFilterState.isFetchingMore = false; }, 2500); } } } drawer.addEventListener('change', function(e) { if (e.target.classList.contains('dynamic-filter-checkbox') || e.target.id === 'available-online-toggle') { applyFilters(); } }); function extractFilters(cards) { const hasActiveFilters = document.querySelectorAll('.dynamic-filter-checkbox:checked').length > 0 || (document.getElementById('available-online-toggle') && document.getElementById('available-online-toggle').checked); cards.forEach(card => { if (card.classList.contains('master-data-ready')) return; card.classList.add('master-data-ready'); if (hasActiveFilters) { card.style.setProperty('display', 'none', 'important'); } const handle = card.getAttribute('data-product-handle'); if (!handle) return; fetch(`/products/${handle}.js`).then(res => res.json()).then(product => { let colors = []; let metals = []; if(product.options) { product.options.forEach(opt => { const name = opt.name.toLowerCase(); if (name.includes('color') || name.includes('colour')) { opt.values.forEach(v => { let cleanV = v.trim().toLowerCase(); window.customFilterState.extractedColors.add(cleanV); colors.push(cleanV); }); } if (name.includes('metal') || name.includes('hardware')) { opt.values.forEach(v => { let cleanV = v.trim().toLowerCase(); window.customFilterState.extractedMetals.add(cleanV); metals.push(cleanV); }); } }); } window.customFilterState.productData[handle] = { colors: colors, metals: metals, available: product.available, images: product.images || [], media: product.media || [], variants: product.variants || [] }; if(window.innerWidth <= 768 && !hasActiveFilters) { updateSliderImages(card, handle, [], []); } renderFilterUI(); }).catch(err => console.log("Product fetch failed:", err)); }); } (function waitForProducts() { const fetchInterval = setInterval(() => { const cards = document.querySelectorAll('.ecom-collection__product-item'); if (cards.length > 0) { clearInterval(fetchInterval); extractFilters(cards); const observer = new MutationObserver((mutations) => { const newItems = document.querySelectorAll('.ecom-collection__product-item:not(.master-data-ready)'); if (newItems.length > 0) { window.customFilterState.isFetchingMore = false; extractFilters(newItems); } }); observer.observe(document.body, { childList: true, subtree: true }); } }, 200); setTimeout(() => clearInterval(fetchInterval), 8000); })(); } });

Sample Test

Lady's Leather Passport Holder

Lady's Ostrich Passport Holder

Gentleman’s Crocodylus Porosus Zipper Wallet

The KINGSWAY Canaletto Bench

Sample Test