/* === TC-PARITY START === */ /* ============================================================ Terry Costa — Sledge v3 ⇄ Boost AI parity (Custom JS) Rules copied from the theme itself: snippets/product-card.liquid (badge flag_/promo_, presedensi sale) ============================================================ */ (function () { 'use strict'; // Colours taken from the theme (the Tailwind tokens used in product-card.liquid) var FLAG_BG = { 'best seller': '#FF00D6', 'in stock': '#53C7E0', 'top pick': '#FF5F00', }; var FLAG_BG_DEFAULT = '#FF00D6'; // the {% else %} branch in the theme var PROMO_BG = '#53C7E0'; // bg-oceanBlue-300 var SALE_BG = '#DD3300'; // the Boost sale label as seen live var SOLD_OUT_BG = '#303030'; // Boost: .boost-sd__product-label sold out function esc(s) { return String(s).replace(/[&<>"']/g, function (c) { return { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c]; }); } /* ── 1. Product card badges from tags ───────────────────────── Two different contexts, following the merchant's Boost settings (Product label: Sale ✅, Sold out ✅, Custom by tag ❌): · grid/SRP → theme badge from the flag_/promo_ tags, and only when there is none, the "N% OFF" discount badge · instant search → ONLY the Sale label, written "SALE" (not a percentage) */ function badgesFor(p, isModal) { var tags = (p && p.tags) || []; var out = []; if (isModal) { if (p && p.compareAtPrice && p.price && p.compareAtPrice > p.price) { out.push({ text: 'SALE', bg: SALE_BG }); } return out; } if (p && p.available === false) { out.push({ text: 'Sold out', bg: SOLD_OUT_BG }); return out; } tags.forEach(function (t) { if (/^promo/i.test(t)) { out.push({ text: t.replace(/^promo_?/i, '').trim(), bg: PROMO_BG }); } }); var flags = tags .filter(function (t) { return /^flag_/i.test(t); }) .map(function (t) { return t.replace(/^flag_/i, '').trim(); }) .filter(Boolean); if (flags.length) { flags.forEach(function (f) { out.push({ text: f, bg: FLAG_BG[f.toLowerCase()] || FLAG_BG_DEFAULT }); }); } else if (p && p.compareAtPrice && p.price && p.compareAtPrice > p.price) { // Theme: the sale badge appears ONLY when there is no flag_ // Boost ROUNDS DOWN: $698 → $559 = 19.91% is written "19% OFF", // not 20%. Math.round would be 1% off on many products. var pct = Math.floor(((p.compareAtPrice - p.price) / p.compareAtPrice) * 100); if (pct > 0) out.push({ text: pct + '% OFF', bg: SALE_BG }); } return out; } /* Second-image hover — the Sledge card grid only renders .hover-secondary in the list variant, so we supply the element ourselves (theme: images[1]). */ function paintHover(root, p) { var wrap = root.querySelector('.product-image'); if (!wrap) return; var src = ''; var media = p.media || p.images || []; for (var i = 0; i < media.length; i++) { var mi = media[i]; var u = typeof mi === 'string' ? mi : (mi && (mi.url || mi.src)); if (u && u !== p.image) { src = u; break; } } var el = wrap.querySelector('.tc-hover'); if (!src) { if (el) el.remove(); return; } if (!el) { el = document.createElement('img'); el.className = 'tc-hover'; el.setAttribute('loading', 'lazy'); el.setAttribute('aria-hidden', 'true'); el.alt = ''; wrap.appendChild(el); } if (el.getAttribute('src') !== src) el.setAttribute('src', src); } /* ── 12. Video on card hover (theme parity) ─────────────────── The theme stores a Vimeo ID in the product image ALT, shaped like {"video_link":"https://vimeo.com/123"} — see snippets/product-card.liquid lines 168-175 and assets/boost-pfs-filter.js:225. Its selection rule is copied exactly: use the SECOND video_link when present, otherwise the first. The iframe is only created on first hover so that 30 cards do not load 30 iframes at once. */ function videoIdFor(p) { var media = (p && p.media) || []; var id = null, counter = 1; for (var i = 0; i < media.length; i++) { var alt = (media[i] && media[i].alt) || ''; if (alt.indexOf('video_link') === -1) continue; if (id === null || counter === 2) { var raw = alt.split('/').pop().replace(/"/g, '').replace(/}/g, ''); var digits = raw.match(/\d+/); if (digits) id = digits[0]; } counter++; } return id || ''; } function paintVideoHover(card, root, p) { var wrap = root.querySelector('.product-image'); if (!wrap) return false; var vid = videoIdFor(p); if (!vid) { var stale = wrap.querySelector('.tc-video'); if (stale) stale.remove(); card.__tcVideoId = ''; return false; } card.__tcVideoId = vid; if (!card.__tcVideoBound) { card.__tcVideoBound = true; wrap.addEventListener('mouseenter', function () { var id = card.__tcVideoId; if (!id) return; var frame = wrap.querySelector('.tc-video'); if (!frame) { frame = document.createElement('iframe'); frame.className = 'tc-video'; frame.setAttribute('loading', 'lazy'); frame.setAttribute('frameborder', '0'); frame.setAttribute('allow', 'autoplay; fullscreen'); frame.setAttribute('aria-hidden', 'true'); wrap.appendChild(frame); } var src = 'https://player.vimeo.com/video/' + id + '?background=1&autoplay=1&loop=1&muted=1'; if (frame.getAttribute('src') !== src) frame.setAttribute('src', src); wrap.classList.add('tc-video-on'); }); wrap.addEventListener('mouseleave', function () { wrap.classList.remove('tc-video-on'); }); } return true; } function paintCard(card) { var root = card.shadowRoot; if (!root) return; var p = card.product; if (!p) return; // Theme rule (snippets/product-card.liquid): Bridal Salon / // Bridesmaids Dresses products show no price at all. var noPrice = (p.tags || []).some(function (t) { return t === 'category_Bridal Salon' || t === 'category_Bridesmaids Dresses'; }); if (noPrice) card.setAttribute('data-tc-noprice', ''); else card.removeAttribute('data-tc-noprice'); // Price turns red when discounted (Boost) if (p.compareAtPrice && p.price && p.compareAtPrice > p.price) card.setAttribute('data-tc-sale', ''); else card.removeAttribute('data-tc-sale'); // Runs before the badge guard below: this function has its own guard // (once per card per colour-filter combination). try { preselectFilterColor(card, p); } catch (e) {} var isModal = card.hasAttribute('data-tc-modal'); var items = badgesFor(p, isModal); var key = (isModal ? 'modal|' : 'grid|') + items.map(function (i) { return i.text + i.bg; }).join('|'); if (card.__tcBadgeKey === key) return; card.__tcBadgeKey = key; paintHover(root, p); try { paintVideoHover(card, root, p); } catch (e) {} var topBar = root.querySelector('.top-bar'); if (!topBar) return; var box = topBar.querySelector('.badges'); if (!items.length) { if (box && box.dataset.tc === '1') box.remove(); return; } if (!box) { box = document.createElement('div'); box.className = 'badges'; box.dataset.tc = '1'; topBar.insertBefore(box, topBar.firstChild); } else { box.dataset.tc = '1'; } box.innerHTML = items .map(function (i) { return '' + esc(i.text) + ''; }) .join(''); } /* ── 2. Result title: "Prom Dresses - 2746 Results" → "2746 products" ── */ function paintTitle(root) { var el = root.querySelector('.page-title'); if (!el) return; var host = root.host; var raw = (el.textContent || '').trim(); var mtc = raw.match(/([\d,]+)\s*Results?$/i); if (mtc) { var next = mtc[1] + ' products'; if (el.textContent.trim() !== next) el.textContent = next; if (host && !host.hasAttribute('data-tc-title-ready')) host.setAttribute('data-tc-title-ready', ''); return; } // Already in its final form (a re-render after we wrote it) — leave it visible. if (/^[\d,]+\s+products$/i.test(raw)) { if (host && !host.hasAttribute('data-tc-title-ready')) host.setAttribute('data-tc-title-ready', ''); return; } // No result count yet: CSS hides the title so the collection name is never // read and then swapped (flicker). Fallback: if after 6 seconds the count // never arrives, show it as-is rather than nothing. if (host) { if (!host.__tcTitleSince) host.__tcTitleSince = Date.now(); if (Date.now() - host.__tcTitleSince > 6000) host.setAttribute('data-tc-title-ready', ''); } } /* ── 3. Active filter ───────────────────────────────────────── a. A "Filter By … Clear All" header above the list (Boost) b. The value after "Label: " is bolded */ function paintActive(root) { // The "Filter By" header and the "Clear All" position are handled in CSS (survives re-renders). // The JS only bolds the value after "Label: " — CSS cannot do that. var clear = root.querySelector('.clear-all-btn'); if (clear && clear.textContent.trim() !== 'Clear All') clear.textContent = 'Clear All'; root.querySelectorAll('.pill-text').forEach(function (el) { if (el.querySelector('strong')) return; // already bolded var raw = (el.textContent || '').trim(); // Multi-value card: the pill holds only the VALUE ("alternate_product"), // its group name lives in the card header (which we hide). Take the full // label from data-tooltip ("Designer: alternate_product") so the row stays // as consistent as a single-value card. var pill = el.closest('.filter-pill'); var tip = pill ? (pill.getAttribute('data-tooltip') || '') : ''; if (tip.indexOf(': ') > -1 && raw.indexOf(': ') < 0) raw = tip.trim(); var idx = raw.indexOf(': '); if (idx < 0) return; el.innerHTML = esc(raw.slice(0, idx + 2)) + '' + esc(raw.slice(idx + 2)) + ''; }); } /* ── 4. Mark cards that sit inside the instant search modal ─── A card does not know it is inside the modal, while its CSS lives in the card shadow root — so we stamp the host to make it targetable from CSS. */ function markModalCards(root) { // cards & grid are nested in other shadow roots (products-area → // sledge-product-grid → sledge-product-card), so walk across shadow roots. var stack = [root]; while (stack.length) { var node = stack.pop(); var els = node.querySelectorAll('*'); for (var i = 0; i < els.length; i++) { var el = els[i]; var tag = (el.tagName || '').toLowerCase(); if (tag === 'sledge-product-card' || tag === 'sledge-product-grid') { if (!el.hasAttribute('data-tc-modal')) el.setAttribute('data-tc-modal', ''); } if (el.shadowRoot) stack.push(el.shadowRoot); } } } /* ── 5. Price format: Boost writes "$898", not "$898.00" ───── Why: the shop money_format is "${{amount}}" (2 decimals), but the Boost widget drops the decimals when they are zero. Non-zero decimals stay. */ function stripPriceDecimals(root) { root.querySelectorAll('.price, .compare-price').forEach(function (el) { var t = (el.textContent || ''); if (!/[.,]00(\D|$)/.test(t)) return; var next = t.replace(/([.,])00(?=\D|$)/g, ''); if (next !== t) el.textContent = next; }); } /* ── 6. Move "View all N results" to the very bottom ──────── */ function moveViewAll(root) { var btn = null; // button/a ONLY — this once hit a container (.modal-backdrop) because during // the render transition its combined text briefly started with "View all". var nodes = root.querySelectorAll('button, a'); for (var i = 0; i < nodes.length; i++) { var el = nodes[i]; if (el.querySelector('button, a')) continue; var txt = (el.textContent || '').trim(); if (/^view all\b/i.test(txt) && txt.length < 40) { btn = el; break; } } // clean up any marker that landed on the wrong element root.querySelectorAll('.tc-viewall-last').forEach(function (el) { if (el !== btn) el.classList.remove('tc-viewall-last'); }); if (!btn) return; if (!btn.classList.contains('tc-viewall-last')) btn.classList.add('tc-viewall-last'); var area = root.querySelector('.products-area'); if (area && btn.parentElement !== area) area.appendChild(btn); } /* ── 7. Mobile: force the filter closed on first render ───── */ function collapseGroupsOnMobile(root) { if (window.innerWidth >= 768) return; root.querySelectorAll('sledge-filter-group').forEach(function (g) { if (g.__tcCollapsed) return; var sr = g.shadowRoot; if (!sr) return; var open = sr.querySelector('.group-content.open'); var header = sr.querySelector('.group-header'); if (open && header) { g.__tcCollapsed = true; header.click(); } else if (!open) { g.__tcCollapsed = true; } }); } /* ── 8. Boost-style search results header on the search page ── */ function injectSearchForm(root) { var panel = root.querySelector('.search-result'); if (!panel) return; if (root.querySelector('.tc-search-form')) return; var q = ''; try { q = new URLSearchParams(location.search).get('q') || ''; } catch (e) {} var box = document.createElement('div'); box.className = 'tc-search-form'; var h = document.createElement('div'); h.className = 'tc-search-form-title'; h.textContent = q ? 'Search results for "' + q + '"' : 'Search results'; var input = document.createElement('input'); input.className = 'tc-search-form-input'; input.type = 'search'; input.value = q; input.setAttribute('aria-label', 'Search'); input.addEventListener('keydown', function (e) { if (e.key !== 'Enter') return; var v = (input.value || '').trim(); if (!v) return; var url = new URL(location.href); url.searchParams.set('q', v); location.href = url.toString(); }); box.appendChild(h); box.appendChild(input); panel.insertBefore(box, panel.firstChild); } /* ── 9. Mark the toolbar as belonging to the search page ───── The toolbar does not know it is on the SRP, while its CSS lives in the toolbar shadow root — so we stamp the host to make it targetable from CSS. */ function markSrpToolbar(root) { var stack = [root]; while (stack.length) { var node = stack.pop(); var els = node.querySelectorAll('*'); for (var i = 0; i < els.length; i++) { var el = els[i]; if ((el.tagName || '').toLowerCase() === 'sledge-filter-sort' && !el.hasAttribute('data-tc-srp')) { el.setAttribute('data-tc-srp', ''); } if (el.shadowRoot) stack.push(el.shadowRoot); } } } /* ── 10. Theme header height → --tc-header-h ───────────────── The mobile filter flyout must start right below the header. Its height differs between mobile & desktop, so it is measured at runtime and published as a custom property (inherited all the way into the shadow roots). */ function publishHeaderHeight() { var el = document.querySelector('#sticky-header') || document.querySelector('header'); var h = 0; if (el) { var cs = getComputedStyle(el); var r = el.getBoundingClientRect(); // only a header that truly sticks to the viewport can cover the flyout if ((cs.position === 'fixed' || cs.position === 'sticky') && r.top <= 1) h = Math.round(r.height); } var next = h + 'px'; if (document.documentElement.style.getPropertyValue('--tc-header-h') !== next) { document.documentElement.style.setProperty('--tc-header-h', next); } } /* ── 11. Preselect the variant matching the active colour filter ─ Ported from the v2 custom JS (applyColorFilterImages there). The difference: v2 had to scrape

Enchanting by Mon Cheri

You may also like

Be the first to learn about new arrivals, special events, sales and more!