/* CLARIBag custom code — THEME-ROUTE (Impulse card template renders the card; * this script only patches it on `sledge:product-card:rendered`). Replaces the * old renderProductCard() light-DOM card so every v3 card-level feature (badge * campaigns, pre-order, BIS) keeps its native shadow-DOM injection points. * * v2 behaviors kept 1:1 (from custom-code.js): * - "SKU: " line under the title * - blue "In Stock (N pcs)" line (variants[0].inventoryQuantity) [styling in .css] * - Add-to-Cart ALWAYS labelled "Add to Cart" (never "Quick View"), adds the * FIRST variant directly + redirects to /cart (v2 handleAddToCart, ported). * Layout (price-above-title), hidden variant-picker, and the blue in-stock * colour are handled by general.custom_css (claribag-custom-v3.css). */ (function () { 'use strict'; /* v2 Add-To-Cart bag icon (prepended into the button before the label) */ var BAG_SVG = ''; /* v2 ↕ sort icon (prepended before "Availability" in the Sort dropdown) */ var SORT_SVG = ''; /* ── v2 add-to-cart, ported 1:1 (fetch /cart/add.js → redirect /cart) ───── */ function shopifyAddToCart(items) { if (!window || !window.Shopify || !window.Shopify.routes) return Promise.resolve(null); return fetch(`${window.Shopify.routes.root}cart/add.js`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ items: items }), redirect: 'follow' }) .then(function (r) { return r.json(); }) .catch(function () { return null; }); } function handleAddToCart(variantId) { var id = String(variantId || '').split('/').pop(); // GID → numeric id for /cart/add.js if (!id) return; shopifyAddToCart([{ id: id, quantity: 1 }]).then(function (res) { if (res && res.items && res.items.length) { window.location.href = '/cart'; } else { window.alert((res && res.description) ? res.description : 'failed add to cart, please try again'); } }); } /* deep query across OPEN shadow roots (cards live inside the grid's root) */ function deepQueryAll(selector) { var found = []; (function walk(root) { var els = root.querySelectorAll('*'); for (var i = 0; i < els.length; i++) { var el = els[i]; if (el.matches && el.matches(selector)) found.push(el); if (el.shadowRoot) walk(el.shadowRoot); } })(document); return found; } /* inject "SKU: xxx" + "In Stock (N pcs)" right under the title */ function injectMeta(shadow, product) { var v0 = (product.variants && product.variants[0]) || {}; var sku = v0.sku; var available = product.available; var qty = v0.inventoryQuantity; // v2 used variants[0].inventory_quantity var hasStock = available && (qty || qty === 0); // ── grid card (Impulse theme template) ── var content = shadow.querySelector('.card__content'); if (content && !content.querySelector('.claribag-meta')) { var title = content.querySelector('.grid-product__title'); if (title) { var parts = ''; if (sku) parts += `

SKU: ${sku}

`; if (hasStock) parts += `

In Stock (${qty} pcs)

`; if (parts) { var wrap = document.createElement('div'); wrap.className = 'claribag-meta'; wrap.innerHTML = parts; title.insertAdjacentElement('afterend', wrap); } } } // ── list row (library core card) ── // The core card renders its own `.sku` but has no stock line at all, so the // v2 list row lost "In Stock (N pcs)" entirely. Append it to .product-details; // the CSS below places it via grid-area, so DOM position doesn't matter. var details = shadow.querySelector('.product-details'); if (details && hasStock && !details.querySelector('.claribag-instock')) { var stock = document.createElement('div'); stock.className = 'claribag-instock'; stock.textContent = 'In Stock (' + qty + ' pcs)'; details.appendChild(stock); } } /* force ATC to v2 behaviour: label "Add to Cart", direct-add variants[0], /cart */ function patchAtc(shadow, product) { var v0 = (product.variants && product.variants[0]) || {}; if (!product.available || !v0.id) return; // OOS: leave the theme's disabled "Sold Out" var btns = shadow.querySelectorAll('.atc-image-btn, .atc-mobile-btn'); for (var i = 0; i < btns.length; i++) { var btn = btns[i]; if (btn.getAttribute('data-claribag-atc')) continue; var label = btn.querySelector('.atc-label'); if (label) { label.textContent = 'Add To Cart'; // v2 capitalisation } else { // The core card used for list rows has no .atc-label — its label is a // bare text node next to the icon, so rewrite that in place instead of // clobbering the span we just prepended (OFF-9703 #9). for (var n = 0; n < btn.childNodes.length; n++) { var node = btn.childNodes[n]; if (node.nodeType === 3 && node.textContent.trim()) node.textContent = 'Add To Cart'; } } // prepend the v2 bag icon (once) if (!btn.querySelector('.claribag-atc-icon')) { var icon = document.createElement('span'); icon.className = 'claribag-atc-icon'; icon.innerHTML = BAG_SVG; btn.insertBefore(icon, btn.firstChild); } // clone strips the core Quick-View / _addToCart binding; keep the class so // a future BIS/pre-order card-slot override can still replace it by class var fresh = btn.cloneNode(true); fresh.setAttribute('data-claribag-atc', '1'); btn.replaceWith(fresh); (function (variantId) { fresh.addEventListener('click', function (e) { e.preventDefault(); e.stopPropagation(); handleAddToCart(variantId); }, true); })(v0.id); } } /* hardcode the "£" price (v2 parity: custom-code.js used `£${price}`, ignoring * the Markets currency — CLARIBag prices in GBP regardless of visitor locale) */ function overridePrice(shadow, product) { // Grid cards render the Impulse template (.grid-product__price). List rows // (1 per row) skip the theme template entirely and use the library's core // card, whose price node is .price — without this fallback those rows kept // the Markets currency and showed "Rp 235.000,00" (OFF-9703 #10). var priceEl = shadow.querySelector('.grid-product__price') || shadow.querySelector('.price-row .price') || shadow.querySelector('.price'); if (!priceEl) return; var v0 = (product.variants && product.variants[0]) || {}; var price = (v0.price != null) ? v0.price : product.price; if (price == null || isNaN(Number(price))) return; var want = '£' + Number(price).toFixed(2); // £ hardcoded, 2 decimals // Compare the text rather than trusting an "already patched" flag: on a cold load // the library writes the Markets price into this very node a moment AFTER // our first pass, so a one-shot guard would lock in "Rp 188.000,00" forever // (measured on list rows, OFF-9703). A value check lets the later sweeps // heal it, and costs nothing once the text is already correct. if (priceEl.textContent.trim() === want) return; priceEl.textContent = want; priceEl.setAttribute('data-claribag-price', '1'); } function patch(card) { if (!card || !card.shadowRoot) return; var product = card._product || {}; injectMeta(card.shadowRoot, product); overridePrice(card.shadowRoot, product); patchAtc(card.shadowRoot, product); watchCard(card); } /* Self-healing watcher, one per card. * * The library resolves the Markets price and writes it into the card's own * shadow root, and on a slow load that write can land AFTER every timed sweep * has already run — leaving "Rp 21.860.000,00" on screen until something * forces a re-render (switching grid density and back was the manual * workaround). Nothing else catches it: a card's shadow root is a separate * tree, so the panel-level observer never sees writes inside it. * * Watching the card itself closes that hole for good. Re-entry is safe because * every patch step is guarded — overridePrice compares the text, patchAtc * skips buttons it already bound, injectMeta skips rows it already added — so * our own writes settle instead of looping. OFF-9703. */ function watchCard(card) { if (card.__claribagCardObs || !card.shadowRoot) return; card.__claribagCardObs = true; var t = null; try { new MutationObserver(function () { if (t) return; t = setTimeout(function () { t = null; patch(card); }, 120); }).observe(card.shadowRoot, { childList: true, subtree: true, characterData: true }); } catch (e) {} } /* primary hook: the grid fires this per card render/re-render (re-render * wipes the shadow, so the event doubles as our re-inject trigger) */ document.addEventListener('sledge:product-card:rendered', function (e) { var card = e.detail && e.detail.card; requestAnimationFrame(function () { patch(card); setTimeout(function () { patch(card); }, 300); }); }); /* sweep for cards rendered before this script attached (first-paint race) */ function sweep() { deepQueryAll('sledge-product-card').forEach(function (c) { patch(c); }); } setTimeout(sweep, 600); setTimeout(sweep, 2000); // Late safety pass: the Markets price lands after our first two passes on a // cold load, so one more run guarantees the £ override wins (OFF-9703). setTimeout(sweep, 3500); /* ── Toolbar: rewrite "All - N Results" → "Products - N Results" (v2) + add * "Sort by:" / "Limit:" labels. Runs under a MutationObserver so it survives * filter/pagination re-renders (the count changes). ── */ function deepQueryPanels() { var out = []; var seen = new Set(); (function w(root) { if (!root || seen.has(root)) return; seen.add(root); root.querySelectorAll('*').forEach(function (el) { if (el.tagName.toLowerCase() === 'sledge-filter-panel') out.push(el); if (el.shadowRoot) w(el.shadowRoot); }); })(document); return out; } // collection → "Products - N Results"; search page → "N Results" (v2 formats differ) function resultsText(n, isSearch) { return isSearch ? (n + ' Results') : ('Products - ' + n + ' Results'); } /* Pull the RESULT COUNT out of a toolbar title. Anchoring on the word * "Results" matters: the library renders "Size 1 filter bags - 19 Results", * and a bare first-number match returns the 1 from the collection NAME, which * is how the toolbar ended up reading "Products - 1 Results" on a collection * holding 19 products (OFF-9703). Falls back to the first number for titles * that carry no "Results" suffix. */ function resultCount(text) { var s = text || ''; var m = s.match(/(\d[\d,]*)\s*Results?\b/i) || s.match(/(\d[\d,]*)/); return m ? m[1] : null; } function patchOnePanel(fp) { if (!fp || !fp.shadowRoot) return; var host = fp.getRootNode && fp.getRootNode().host; var isSearch = !!(host && host.tagName && host.tagName.toLowerCase() === 'sledge-search-result-panel'); var title = fp.shadowRoot.querySelector('.page-title'); if (title) { var m0 = resultCount(title.textContent); if (m0) { var w0 = resultsText(m0, isSearch); if (title.textContent.trim() !== w0) title.textContent = w0; } } /* The active-filter row is always in the DOM but collapses to zero height * until a filter is applied, and nothing in its markup says which state it * is in — the pills live inside sledge-filter-active's shadow root. Without * a marker, CSS can only choose between "always spaced" (a 24px hole when * empty) or "never spaced" (pills flush against the pill bar, which is what * QC saw). Tag it from here instead. */ var fa = fp.shadowRoot.querySelector('sledge-filter-active'); if (fa) { var filled = fa.getBoundingClientRect().height > 0; // Desktop wraps it in .horizontal-active-row; mobile puts the element // straight into the panel. Tag whichever one is the panel's own child. var activeRow = fa.closest('.horizontal-active-row') || fa; activeRow.classList.toggle('claribag-active-filled', filled); } var fs = fp.shadowRoot.querySelector('sledge-filter-sort'); if (fs && fs.shadowRoot) { var fsr = fs.shadowRoot; // "Limit:" before the per-page dropdown, "Sort by:" before the sort dropdown var addLabel = function (el, text) { if (!el || el.previousElementSibling && el.previousElementSibling.classList && el.previousElementSibling.classList.contains('claribag-tb-label')) return; var lbl = document.createElement('span'); lbl.className = 'claribag-tb-label'; lbl.textContent = text; el.parentNode.insertBefore(lbl, el); }; var perpage = fsr.querySelector('#perpage-toggle'); var sort = fsr.querySelector('#sort-toggle'); addLabel(perpage, 'Limit:'); addLabel(sort, 'Sort by:'); // v2 order: "Sort by: | Limit:" (v3 default is Limit | Sort) — move the sort // group (label + toggle) ahead of the limit group. if (perpage && sort) { var rs = perpage.parentNode; if (!rs.getAttribute('data-claribag-order')) { var limitLabel = perpage.previousElementSibling; var sortLabel = sort.previousElementSibling; var ref = (limitLabel && limitLabel.classList && limitLabel.classList.contains('claribag-tb-label')) ? limitLabel : perpage; if (sortLabel && sortLabel.classList && sortLabel.classList.contains('claribag-tb-label')) rs.insertBefore(sortLabel, ref); rs.insertBefore(sort, ref); rs.setAttribute('data-claribag-order', '1'); } } // ↕ sort icon before the "Availability" label inside the Sort dropdown if (sort && !sort.querySelector('.claribag-sort-icon')) { var sicon = document.createElement('span'); sicon.className = 'claribag-sort-icon'; sicon.innerHTML = SORT_SVG; sort.insertBefore(sicon, sort.firstChild); } // One-row layout: results title → front of .filter-sort, grid → end var filterSortRow = fsr.querySelector('.filter-sort'); var grid = fsr.querySelector('.layout-icons'); var secTitle = fsr.querySelector('.filter-sort-secondary .page-title') || fsr.querySelector('.page-title'); if (filterSortRow) { if (secTitle) { var m1 = resultCount(secTitle.textContent); if (m1) { var w1 = resultsText(m1, isSearch); if (secTitle.textContent.trim() !== w1) secTitle.textContent = w1; } secTitle.classList.add('claribag-inline-title'); if (filterSortRow.firstChild !== secTitle) filterSortRow.insertBefore(secTitle, filterSortRow.firstChild); } if (grid && filterSortRow.lastChild !== grid) filterSortRow.appendChild(grid); } } } function patchToolbar() { deepQueryPanels().forEach(patchOnePanel); } /* Cards can also appear long after boot: the zero-result state renders its * "Popular products" row straight from the library's no-result renderer via * createElement, so it fires no 'sledge:product-card:rendered' AND lands well * after the two sweeps above — those cards kept the Markets currency * ("Rp 178.745,39") and the theme's own Add To Cart. Re-sweep, debounced, * whenever the panel's shadow DOM changes (OFF-9703). patch() is guarded by * data-claribag-* attributes, so repeat calls are cheap. Card shadow roots are * separate trees, so patch()'s own edits never re-trigger this observer. */ var sweepTimer = null; function sweepSoon() { if (sweepTimer) return; sweepTimer = setTimeout(function () { sweepTimer = null; sweep(); }, 150); } /* patchToolbar() writes into the very shadow roots we observe below, so run it * debounced: each pass is idempotent (it only writes when a value differs), so * the observer settles after a tick instead of ping-ponging. */ var toolbarTimer = null; function patchToolbarSoon() { if (toolbarTimer) return; toolbarTimer = setTimeout(function () { toolbarTimer = null; patchToolbar(); }, 120); } function observeToolbar() { var panels = deepQueryPanels(); patchToolbar(); panels.forEach(function (fp) { if (fp.shadowRoot && !fp.__claribagObs) { fp.__claribagObs = true; try { new MutationObserver(function () { patchToolbarSoon(); sweepSoon(); }).observe(fp.shadowRoot, { childList: true, subtree: true, characterData: true }); } catch (e) {} } /* The toolbar's title and controls live inside sledge-filter-sort's OWN * shadow root — a separate tree the panel observer never sees. Without * this, any late toolbar re-render (changing grid density, for instance) * silently drops the "Products - N Results" rewrite (OFF-9703). */ var fs = fp.shadowRoot && fp.shadowRoot.querySelector('sledge-filter-sort'); if (fs && fs.shadowRoot && !fs.__claribagObs) { fs.__claribagObs = true; try { new MutationObserver(function () { patchToolbarSoon(); }).observe(fs.shadowRoot, { childList: true, subtree: true, characterData: true }); } catch (e) {} } /* Same reason for the active-filter component: its pills render inside its * own shadow root, so the panel observer never sees them appear and the * spacing marker above would go stale. */ var fa2 = fp.shadowRoot && fp.shadowRoot.querySelector('sledge-filter-active'); if (fa2 && fa2.shadowRoot && !fa2.__claribagObs) { fa2.__claribagObs = true; try { new MutationObserver(function () { patchToolbarSoon(); }).observe(fa2.shadowRoot, { childList: true, subtree: true, characterData: true }); } catch (e) {} } }); } observeToolbar(); setTimeout(observeToolbar, 800); setTimeout(observeToolbar, 2000); setTimeout(observeToolbar, 4000); /* ── Header search box on /search (OFF-9703 #8) ─────────────────────────── * The Impulse theme config hides `predictive-search` and `.search__input-wrap` * on the search template, so Sledge's own results can replace the native form. * Those selectors also match the instance inside the site header, so clicking * the header search icon on /search opened the theme's drawer with nothing in * it — a ~200px band of empty white. v2 left the header search working, so * restore just that instance. The library sets `display: none` inline, which a * stylesheet rule beats with !important. Both values are the ones measured on * v2. This has to live in custom_js: the elements are in the light DOM, and * custom_css only reaches Sledge's shadow roots. */ function restoreHeaderSearch() { if (document.getElementById('claribag-header-search-fix')) return; var style = document.createElement('style'); style.id = 'claribag-header-search-fix'; style.textContent = '.template-search .site-header__search predictive-search{display:flex !important}' + '.template-search .site-header__search .search__input-wrap{display:block !important}'; (document.head || document.documentElement).appendChild(style); } restoreHeaderSearch(); /* ── Default grid density (OFF-9703, v2 parity) ─────────────────────────── * v2 opened the PLP at 3 columns; v3's Impulse default is 4 (themes/configs/ * impulse.ts, gridColumns). The library reads a stored preference first, so * seed it once — a shopper who later picks another density keeps their choice. * custom_js runs after the library has booted, so on a first visit the toolbar * has already painted 4 columns; nudge it once, and only in that case. */ var COLS_KEY = 'sledge-product-grid-desktop-columns'; function seedThreeColumns() { var seeded = false; try { if (!localStorage.getItem(COLS_KEY)) { localStorage.setItem(COLS_KEY, 'column-3'); seeded = true; } } catch (e) { return; } if (!seeded || window.innerWidth <= 767) return; var tries = 0; var timer = setInterval(function () { if (++tries > 20) { clearInterval(timer); return; } var panels = deepQueryPanels(); for (var i = 0; i < panels.length; i++) { var fs = panels[i].shadowRoot && panels[i].shadowRoot.querySelector('sledge-filter-sort'); var btn = fs && fs.shadowRoot && fs.shadowRoot.querySelector('.layout-btn[data-columns="3"]'); if (!btn) continue; if (!btn.classList.contains('active')) btn.click(); clearInterval(timer); return; } }, 250); } seedThreeColumns(); })();

Currency