/* A1two3 custom code — THEME-ROUTE (Horizon card template renders the card; * this script only patches it). Replaces the old renderProductCard() light-DOM * card so every v3 card-level feature (badge campaigns, preorder, BIS, * wishlist, review) keeps its native shadow-DOM injection points. * * v2 behaviors kept 1:1 (verified live 2026-07-13): * - cross-product color swatches from metafield custom.farve_varianter * (each colorway is a SEPARATE product; swatches link to sibling PDPs) * - featured image swapped per grid index (card i shows sibling colorway i) * - sale badge copy "N% off" (theme renders "-N%") * The view-only card (no ATC), "Fra" price prefix, hover crossfade, and all * colors/typography are handled by the merchant CSS (adopted into the card's * shadow root) — see a1two3-custom-v3.css section 1. */ (function () { 'use strict'; /* ── v3 API shim for the v2 sledge.instantSearch.getProductByIds ──── */ function apiBase() { if (window.__sledgeApiBase) return window.__sledgeApiBase; var gen = window.__sledgeSettings && window.__sledgeSettings.general; if (typeof gen === 'string') { try { gen = JSON.parse(gen); } catch (e) { gen = null; } } return (gen && gen.storefront_url) || 'https://apac-1.storefront.sledge-app.com'; } function storeToken() { if (window.__sledgeStoreToken) return window.__sledgeStoreToken; var gen = window.__sledgeSettings && window.__sledgeSettings.general; if (typeof gen === 'string') { try { gen = JSON.parse(gen); } catch (e) { gen = null; } } return (gen && gen.store_token) || ''; } function getProductByIds(ids, limit) { var numeric = ids.map(function (v) { return String(v).replace(/\D/g, ''); }).filter(Boolean); if (!numeric.length) return Promise.resolve({ hits: [] }); return fetch(`${apiBase()}/api/v1/search`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-Sledge-Store': storeToken() }, body: JSON.stringify({ q: '*', filter_by: `shopifyId:=[${numeric.join(',')}]`, per_page: limit || 25, surface: 'plp', force_products_index: true }) }) .then(function (r) { return r.json(); }) .then(function (j) { var hits = (j && j.data && j.data.hits) || []; return { hits: hits.map(function (h) { var d = h.document || h; var img = (d.featuredMedia && d.featuredMedia.url) || (d.media && d.media[0] && d.media[0].url) || ''; return { id: String(d.shopifyId || d.id || ''), handle: d.handle, image: { src: img } }; }) }; }) .catch(function () { return { hits: [] }; }); } var sessionStorageSet = function (data, key) { try { sessionStorage.setItem(key, JSON.stringify(data)); } catch (e) { /* quota — skip cache */ } }; /* image url helper (v2 behavior: force width param, blank-image fallback) */ function imgUrl(src, width, fallbackSrc) { if (!src) return fallbackSrc || 'https://sledgeassets.nyc3.cdn.digitaloceanspaces.com/images/blank-image.png'; try { var u = new URL(src); u.searchParams.set('width', width || 500); return u.toString(); } catch (e) { return src; } } /* 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); } } walk(document); return found; } function allCards() { return deepQueryAll('sledge-product-card'); } function renderVariantPicker(variants, ownHandle) { var swatches = variants.slice(0, 5).map(function (v) { return `

`; }).join(''); return `${swatches}More`; } /* v2 badge copy: "22% off" — Horizon renders "-22%" */ function rewriteSaleBadge(card) { var badge = card.shadowRoot && card.shadowRoot.querySelector('.product-card__badge .badge'); if (!badge) return; var m = (badge.textContent || '').match(/(\d+)\s*%/); if (m) badge.textContent = `${m[1]}% off`; } function injectSwatches(card, siblings, handle) { var shadow = card.shadowRoot; if (!shadow) return; var titleBlock = shadow.querySelector('.product-card__title-block'); if (!titleBlock) return; if (!shadow.querySelector('.sledge__custom-variant-picker')) { var picker = document.createElement('div'); picker.className = 'sledge__custom-variant-picker'; picker.innerHTML = renderVariantPicker(siblings, handle); /* swatch anchors sit inside the card's own wrapper — keep their * navigation from bubbling into the card link. stopPropagation also * silences the grid's tracked click listener on the card host, so on a * real anchor click re-emit a non-bubbling click there — the colorway * open still records a v3 `click` signal (audit 2026-07-21). */ picker.addEventListener('click', function (e) { e.stopPropagation(); if (e.target && e.target.closest && e.target.closest('a')) { try { card.dispatchEvent(new MouseEvent('click', { bubbles: false })); } catch (err) {} } }); titleBlock.insertBefore(picker, titleBlock.firstChild); } /* v2 quirk kept 1:1: grid card i shows sibling colorway i's image */ var idx = allCards().indexOf(card); var img = shadow.querySelector('.card-gallery__slide img'); if (idx > -1 && siblings[idx] && siblings[idx].image && siblings[idx].image.src && img) { img.src = imgUrl(siblings[idx].image.src, 500); img.removeAttribute('srcset'); } } function patch(card) { if (!card || !card.shadowRoot) return; var product = card._product || {}; rewriteSaleBadge(card); var mf = product.metafields && product.metafields['custom.farve_varianter']; if (typeof mf === 'string') { try { mf = JSON.parse(mf); } catch (e) { mf = null; } } if (!Array.isArray(mf) || !mf.length) return; var id = String(product.shopifyId || product.id || ''); /* v3-scoped key: v2 caches the same colorway list under `product-` on * this very origin, so a shared key would let one version serve the other * a list built by different code (and would keep serving the pre-fix, * scrambled order to anyone who already has it cached). */ var cacheKey = `sledge-v3-colorways-${id}`; var cached = null; try { cached = JSON.parse(sessionStorage.getItem(cacheKey)); } catch (e) { cached = null; } if (cached) { injectSwatches(card, cached, product.handle); return; } getProductByIds(mf, 25).then(function (res) { if (!res.hits || !res.hits.length) return; /* Colorway order must match v2 1:1 — it drives BOTH the swatch strip and * the per-index featured-image swap below. v2 rendered the metafield's * authored order (verified against the theme-rendered colorway list on * the PDP: graphic-charcoal → … → battleship-gray). We cannot sort by * mf here: Typesense stores custom.farve_varianter in a scrambled order * (raw API payload checked — neither authored, ascending nor descending), * and its entries are GIDs while hit.id is numeric, so an indexOf sort is * a silent no-op that leaves Typesense's own order (exact reverse of v2). * Product id ascending reproduces the authored order — the colorways are * created in that sequence — matching v2 exactly in 11 of 12 families * sampled on /collections/plakater-til-familie-fest. */ var sorted = res.hits.sort(function (a, b) { return Number(String(a.id).replace(/\D/g, '')) - Number(String(b.id).replace(/\D/g, '')); }); sessionStorageSet(sorted, cacheKey); injectSwatches(card, sorted, product.handle); }); } /* 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); }); }); /* ── ONE column keeps the poster card (v2 parity) ──────────────────────── * product-grid.ts flips to list mode whenever the effective column count is * <= 1: `variant="list"` on every card, `list-layout` on the grid. * The list template is a DIFFERENT DOM — `.product-image > img` instead of * `.card-gallery`, and no `.product-card__title-block` — so the poster gets * cropped to a 120px square AND both the swatch strip and the colorway image * swap above silently disappear (measured on mobile: card 358x120, image * 120x120, 0 swatches; v2 gives 390x692, image 390x551, 5 swatches). * v2 has no list layout at all: its column icons only change the count, and * one column shows the same card full width. Strip both markers — changing * `variant` re-runs the card's own _init() via attributeChangedCallback, so * the theme card comes back and its rendered event re-runs patch(). */ function unlist() { var grids = deepQueryAll('sledge-product-grid'); for (var i = 0; i < grids.length; i++) { var root = grids[i].shadowRoot; var grid = root && root.getElementById && root.getElementById('grid'); if (grid && grid.classList.contains('list-layout')) grid.classList.remove('list-layout'); } /* cards, bundle cards — anything the grid tagged for the list template */ var listed = deepQueryAll('[variant="list"]'); for (var j = 0; j < listed.length; j++) listed[j].removeAttribute('variant'); } /* The grid re-applies list mode on every column toggle and re-render, so the * strip has to be standing, not one-shot. Coalesce to one pass per frame — * a re-render fires hundreds of records, and unlist() walks every shadow * root. Removing an absent class/attribute produces no record, so the * observer settles instead of looping. */ var unlistQueued = false; function queueUnlist() { if (unlistQueued) return; unlistQueued = true; requestAnimationFrame(function () { unlistQueued = false; unlist(); }); } var watched = []; function watchListMode() { deepQueryAll('sledge-product-grid').forEach(function (g) { if (!g.shadowRoot || watched.indexOf(g) > -1) return; watched.push(g); new MutationObserver(queueUnlist).observe(g.shadowRoot, { subtree: true, childList: true, attributes: true, attributeFilter: ['class', 'variant'], }); }); unlist(); } document.addEventListener('sledge:product-card:rendered', queueUnlist); /* sweep for cards rendered before this script attached (first-paint race) */ function sweep() { watchListMode(); allCards().forEach(function (c) { patch(c); }); } setTimeout(sweep, 600); setTimeout(sweep, 2000); })();

Din indkøbskurv er tom

plakat: chili - red pepper

Inspiration til andre plakater

Copyright og rettigheder

Cookies

Formater

Kontakt

Leveringsbetingelser

Om os

Sitemap

Privatlivspolitik

Refundering