// belladiscount v2->v3 migration: document-inject the v2 custom-card CSS // (cards mounted in the document light DOM; shadow-nested cards are // covered by the body-prefix-stripped copy in general.custom_css) (function(){var s=document.createElement('style');s.id='sledge-custom-code-css';s.textContent="body [data-component=\"wishlist-badge\"] {\n padding-right: 4px;\n}\n\n.sledge__search-input-field-wrapper,\n.sledge__pagination-navigation,\n.sledge__product-grid-card-custom,\n.sledge__select-field-option-content {\n border: var(--product-card-border-width) solid rgba(var(--color-foreground), var(--product-card-border-opacity));\n border-radius: var(--product-card-corner-radius);\n}\n\nbody .sledge__search-input-field-wrapper.sledge-instant-search__icon-widget-search-form-field,\nbody .sledge-instant-search__icon-widget-search-form-result {\n border-radius: var(--product-card-corner-radius);\n}\n\nbody .sledge__select-field,\nbody .sledge__button[data-button-color-type],\nbody .sledge__button[data-button-color-type='success'],\nbody .sledge-instant-search__icon-widget-button-more {\n border-width: var(--product-card-border-width);\n border-style: solid;\n border-color: rgba(var(--color-foreground), var(--product-card-border-opacity));\n border-radius: var(--product-card-corner-radius);\n}\n\nbody .sledge__button[data-button-color-type='success'] {\n color: white;\n}\n\n.sledge__button,\n.sledge__skeleton-item[data-skeleton-rounded] {\n border-radius: var(--product-card-corner-radius);\n}\n\n.sledge__product-grid-card-image img {\n border-radius: calc(var(--product-card-corner-radius) - var(--product-card-border-width) - var(--product-card-image-padding));\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.sledge__product-grid-card-custom-price {\n font-size: 1.6rem;\n letter-spacing: .1rem;\n line-height: calc(1 + .5 / var(--font-body-scale));\n color: rgb(var(--color-foreground));\n display: flex;\n column-gap: 1rem;\n flex-wrap: wrap;\n margin-top: .7rem;\n align-items: baseline;\n justify-content: baseline;\n}\n\n.sledge__product-grid-card-custom-compare-at-price {\n text-decoration-line: line-through;\n font-size: 1.3rem;\n color: rgba(var(--color-foreground), .75);\n}\n\n.sledge__product-grid-card-heading {\n margin-top: 4px;\n margin-bottom: 0;\n}\n\nbody .sledge__product-grid-card-featured-image-wrapper {\n position: relative;\n width: 100%;\n padding-bottom: 100%;\n}\n\nbody .sledge__product-grid-card-featured-image,\nbody .sledge__product-grid-card-second-image {\n position: absolute;\n width: 100%;\n transition: all 0.3s ease-in-out;\n}\n\nbody .sledge__product-grid-card-featured-image {\n opacity: 1;\n}\n\nbody .sledge__product-grid-card-second-image {\n opacity: 0;\n}\n\nbody .sledge__product-grid-card-featured-image-wrapper[has-second-image]:hover .sledge__product-grid-card-featured-image {\n opacity: 0;\n}\n\nbody .sledge__product-grid-card-featured-image-wrapper[has-second-image]:hover .sledge__product-grid-card-second-image {\n opacity: 1;\n}\n\nbody .sledge__product-grid-card-featured-image-wrapper:hover .sledge__product-grid-card-featured-image,\nbody .sledge__product-grid-card-featured-image-wrapper:hover .sledge__product-grid-card-second-image {\n transform: scale(1);\n}\n\nbody .sledge__product-grid-badge-on-sale {\n z-index: 1;\n}\n\nbody .sledge__button[data-button-color-type].sledge__product-grid-button-add-to-cart {\n --border-offset: 0px;\n border: 0;\n position: relative;\n color: rgb(var(--color-button-text));\n}\n\nbody .sledge__button[data-button-color-type].sledge__product-grid-button-add-to-cart:disabled {\n opacity: .5;\n}\n\nbody .sledge__button[data-button-color-type].sledge__product-grid-button-add-to-cart:hover,\nbody .sledge__button[data-button-color-type].sledge__product-grid-button-add-to-cart:disabled {\n filter: unset;\n}\n\nbody .sledge__button[data-button-color-type].sledge__product-grid-button-add-to-cart:hover:not(body .sledge__button[data-button-color-type].sledge__product-grid-button-add-to-cart:disabled)::after {\n --border-offset: 1.3px;\n box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(var(--color-button-text),var(--border-opacity)),0 0 0 calc(var(--buttons-border-width) + 1px) rgba(var(--color-button),var(--alpha-button-background));\n}\n\nbody .sledge__button[data-button-color-type].sledge__product-grid-button-add-to-cart::after {\n content: \"\";\n position: absolute;\n top: var(--buttons-border-width);\n right: var(--buttons-border-width);\n bottom: var(--buttons-border-width);\n left: var(--buttons-border-width);\n z-index: 1;\n border-radius: var(--buttons-radius);\n box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(var(--color-button-text),var(--border-opacity)),0 0 0 var(--buttons-border-width) rgba(var(--color-button),var(--alpha-button-background));\n transition: box-shadow var(--duration-short) ease;\n}\n\nbody .sledge__product-grid[data-grid-type='large'] .sledge__product-grid-card-image img {\n max-height: 243px;\n}\n\nbody .sledge__tooltip-content {\n color: white;\n}\n\nbody .sledge__tooltip-content .sledge__tooltip-arrow-parent svg path {\n fill: rgba(var(--color-link), 1);\n}\n\nbody .sledge__product-grid-card-out-of-stock {\n border: 1px solid transparent;\n border-radius: var(--badge-corner-radius);\n display: inline-block;\n font-size: 1.2rem;\n letter-spacing: .1rem;\n line-height: 1;\n padding: .5rem 1.3rem .6rem;\n text-align: center;\n background-color: rgb(255,255,255);\n border-color: rgba(5,5,5,.1);\n color: rgb(5,5,5);\n word-break: break-word;\n bottom: 30px;\n left: 8px;\n}\n\n:root {\n --sledge-color-primary-green-5: rgba(var(--color-link), 1) !important;\n --sledge-color-primary-red-1: rgba(var(--color-link), 1) !important;\n --sledge-color-grey-11: rgba(var(--color-foreground), var(--product-card-border-opacity));\n}\n\n.sledge__product-grid-badge-on-sale {\n color: rgb(255, 255,255) !important;\n}\n\n.header__icons .shopify-app-block[id*=\"shopify-block-sledge_wishlist_badge\"],\n.header__icons .shopify-app-block[id*=\"shopify-block-sledge_search_icon_popup\"] {\n overflow: unset;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 4.4rem;\n height: 4.4rem;\n}\n\n@media (min-width: 1280px) {\n body .sledge-wishlist__widget-header-share-trigger {\n margin-right: 0px;\n }\n\n body .sledge-wishlist__widget-header {\n display: grid;\n grid-template-columns: auto 320px auto auto 135px 70px; \n }\n \n body .sledge-wishlist__widget-search-form {\n margin-left: 0px;\n }\n}\n\nbody .sledge-wishlist__widget-product-wrapper {\n padding-bottom: 42px;\n}\n\nbody .sledge-wishlist__badge:hover .sledge-icon__heart svg,\nbody .sledge-wishlist__trigger-block[wishlist-active] .sledge-icon__heart svg {\n fill: var(--sledge-color-primary-green-5);\n}\n\nbody .sledge__product-grid-content .sledge-wishlist__trigger {\n border-radius: var(--buttons-radius);\n}\n\nbody .sledge-product-review__widget-summary-trigger >div {\n display: flex;\n align-items: center;\n}\n\nbody .sledge-instant-search__result-tab-total {\n padding: 3px 8.5px;\n}\n\nbody .sledge__product-grid-card-custom .sledge__product-grid-card-price {\n font-size: 1.7rem;\n font-weight: 600;\n letter-spacing: .1rem;\n line-height: calc(1 + .5 / var(--font-body-scale));\n color: rgb(var(--color-foreground));\n}\n\nbody .sledge__product-grid-card-custom .sledge__product-grid-card-compare-at-price {\n text-decoration-line: line-through;\n font-size: 1.3rem;\n color: #f85538;\n}\n\nbody .sledge__product-grid-card-custom .sledge__product-grid-card-sku {\n font-size: calc(var(--font-heading-scale) * 1.3rem);\n line-height: calc(1 + .3/max(1,var(--font-heading-scale)));\n}\n\n.search-modal__content.search-modal__content-bottom {\n background: rgb(var(--color-background));\n}\n/* ── v2 card base — probed from the live v2 storefront (shadow-context reset) ── */\n/* The merchant's rules build the card frame out of the THEME's own\n `--product-card-*` / `--buttons-*` variables. Those are per-theme settings: on\n BellaDiscount's theme they resolve to a 1px 15%-foreground hairline, 4px\n radius and a 1px button ring, but a theme that sets them to 0 (e.g. the\n rehearsal store) renders a frameless card that no longer matches v2. The\n migration pins the values the LIVE v2 card actually paints, so the storefront\n looks the same regardless of which Dawn preset is active. */\n.sledge__product-grid-card-custom {\n border: 1px solid rgba(5, 5, 5, 0.15);\n border-radius: 4px;\n}\n.sledge__product-grid-card-image img {\n border-radius: 3px 3px 0 0;\n}\n/* v2 capped the media at 243px inside its 267.8px square wrapper — but through\n `.sledge__product-grid[data-grid-type='large']`, an attribute the v2 grid set\n and v3's grid does not, so the rule is dead here and a tall image spills over\n the title and the button. Same proportion (243 / 267.8), expressed relative to\n the square so it holds at any column width. */\n.sledge__product-grid-card-featured-image-wrapper { overflow: hidden; }\n.sledge__product-grid-card-featured-image,\n.sledge__product-grid-card-second-image {\n top: 0;\n max-height: 90.75%;\n object-fit: cover;\n}\n.sledge__product-grid-card {\n display: flex;\n flex-direction: column;\n font-family: var(--font-body-family, Assistant, sans-serif);\n}\n.sledge__product-grid-content { flex: 1 1 auto; }\n/* The media column must establish a real width for its children: the v2 card's\n square ratio comes from `padding-bottom: 100%` on the wrapper, which resolves\n against the anchor's width. Left as a bare flex item the anchor shrinks to its\n content, the percentage resolves against 0, and the image vanishes. */\n.sledge__product-grid-card-image { position: relative; display: block; width: 100%; }\n.sledge__product-grid-card-image-link { position: relative; display: block; width: 100%; }\n.sledge__product-grid-card-desc { padding: 16px 16px 0; }\n.sledge__product-grid-card-title {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 7px;\n}\n/* Price sits opposite the vendor chip on one line (v2). Without this it wraps\n between the currency symbol and the amount as soon as the column is narrower\n than the store's own 3-up grid. */\n.sledge__product-grid-card-price {\n white-space: nowrap;\n flex-shrink: 0;\n}\n.sledge__product-grid-card-heading {\n font-size: 13px;\n font-weight: 600;\n line-height: 1.3;\n letter-spacing: 0.6px;\n color: rgb(5, 5, 5);\n}\n.sledge__product-grid-card-desc a { color: rgba(5, 5, 5, 0.75); text-decoration: none; }\n.sledge__product-grid-badge-vendor {\n font-size: 10.8px;\n font-weight: 400;\n line-height: 1.6;\n letter-spacing: -0.216px;\n color: rgb(118, 118, 118);\n border: 0.5px solid rgb(118, 118, 118);\n border-radius: 9999px;\n padding: 3.6px 9px;\n max-width: 94px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n align-self: flex-start;\n flex-shrink: 0;\n}\n.sledge__product-grid-card-text { margin-top: 8px; }\n.sledge__product-grid-card-sku {\n font-weight: 400;\n letter-spacing: -0.28px;\n color: rgb(118, 118, 118);\n}\n\n/* Equal-height cards (v2: every card in a row measured 437.4px). The grid\n stretches its items, but the compat card's host and the card body must claim\n that height for the button row to sit on a common baseline instead of hugging\n its own content. */\nsledge-product-card { height: 100%; }\n.sledge__product-grid-card { height: 100%; }\n\n/* Narrow columns (mobile, and any grid denser than the store's 3-up): the price\n and the vendor chip share one row and must be allowed to break, otherwise they\n collide and spill past the card edge. */\n.sledge__product-grid-card-title { flex-wrap: wrap; }\n.sledge__product-grid-badge-vendor { flex-shrink: 1; min-width: 0; }\n.sledge__product-grid-badge-on-sale {\n position: absolute;\n top: 16px;\n left: 16px;\n background-color: rgb(var(--color-button, 61, 54, 52));\n font-size: 10.8px;\n font-weight: 500;\n line-height: 1.6;\n letter-spacing: -0.216px;\n padding: 2.3px 5.8px;\n border-radius: 9999px;\n}\n.sledge__product-grid-button-wrapper { padding: 8px 16px 16px; }\n.sledge__product-grid-button-add-to-cart {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n width: 100%;\n padding: 12px 16px;\n font-size: 14px;\n font-weight: 400;\n line-height: 1.1;\n letter-spacing: -0.28px;\n background-color: rgb(255, 255, 255);\n cursor: pointer;\n}\n/* The merchant's own rule paints this button with `--color-button-text` (a\n near-white on this theme), which only ever read as dark because Dawn's\n document `.button--secondary` was in the cascade too — and that class does not\n reach the card inside the shadow tree. Same selector, later in the sheet, so\n the label keeps the v2 colour instead of turning white-on-white. The 1px ring\n is v2's ::after (inset 1px, dark-over-white box-shadow pair); pinned for the\n same reason as the card frame above. */\n.sledge__button[data-button-color-type].sledge__product-grid-button-add-to-cart {\n color: rgb(61, 54, 52);\n border-radius: 4px;\n position: relative;\n}\n.sledge__button[data-button-color-type].sledge__product-grid-button-add-to-cart::after {\n content: \"\";\n position: absolute;\n inset: 1px;\n z-index: 1;\n border-radius: 4px;\n box-shadow: 0 0 0 1px rgb(61, 54, 52), 0 0 0 1px rgb(255, 255, 255);\n transition: box-shadow 0.1s ease;\n pointer-events: none;\n}\n/* v2 hover: the ring thickens (dark 2.3px over white 2px) and nothing else moves\n — same colours, same white face, 0.1s box-shadow transition.\n `!important` is load-bearing: the merchant's own hover rule builds its shadow\n from `--border-opacity` / `--alpha-button-background`, theme variables that\n this Dawn preset never defines. An undefined var inside a shadow value is\n invalid AT COMPUTED-VALUE TIME, so the property does not fall back to the\n previous declaration — it resets to `none`, and that rule outranks this one\n (its `:not()` carries the specificity of a 4-class compound). The result was a\n button whose ring vanished on hover. */\n.sledge__button[data-button-color-type].sledge__product-grid-button-add-to-cart:hover:not([disabled])::after {\n box-shadow: 0 0 0 2.3px rgb(61, 54, 52), 0 0 0 2px rgb(255, 255, 255) !important;\n}\n.sledge__product-grid-button-add-to-cart[disabled] { cursor: not-allowed; }\n.sledge-icon__bag svg { width: 15px; height: 15px; }\n\n/* Wishlist heart — v2 drew it as a 40x40 #f6f6f6 tile pinned 16px from the media's\n top-right (.sledge-wishlist__trigger-block). In v3 the library mounts its own\n into the v2 anchor, so the anchor carries the\n position and the trigger's own (shadow-adopted) classes carry the tile. */\n.sledge__product-grid-card-image-link [data-component=\"wishlist-trigger\"] {\n position: absolute;\n top: 16px;\n right: 16px;\n width: 40px;\n height: 40px;\n z-index: 2;\n}\n[data-component=\"wishlist-trigger\"] sledge-wishlist-trigger { display: block; width: 100%; height: 100%; }\n/* The heart's button lives in the trigger's OWN shadow root, which a descendant\n selector cannot reach — but this sheet is adopted INTO that root, so `:host()`\n matches there and nowhere else (no other component is styled by these rules). */\n:host(sledge-wishlist-trigger) { display: block; width: 100%; height: 100%; }\n:host(sledge-wishlist-trigger) .trigger-wrapper { width: 100%; height: 100%; }\n:host(sledge-wishlist-trigger) .trigger {\n width: 100%;\n height: 100%;\n border-radius: 0;\n background: rgb(246, 246, 246);\n}\n:host(sledge-wishlist-trigger) .trigger svg { width: 17px; height: 16px; }\n/* v2 heart: grey #767676 at rest, darkening to the button colour on hover — the\n tile itself never changes and the icon never scales (v3 defaults to a red\n heart with a 1.1 scale). Saved items take the theme's link colour, which is\n what the merchant's own `--sledge-color-primary-green-5` override resolved to. */\n:host(sledge-wishlist-trigger) .trigger { color: rgb(118, 118, 118); }\n:host(sledge-wishlist-trigger) .trigger:hover {\n color: rgb(61, 54, 52);\n transform: none;\n}\n:host(sledge-wishlist-trigger) .trigger.active,\n:host(sledge-wishlist-trigger) .trigger.active:hover {\n color: rgb(var(--color-link, 61, 54, 52));\n}\n\n/* ── Toolbar — v2's search field / sort / limit controls ─────────────────────\n v2 painted all three as the same 44px white box: 1px 15%-foreground hairline,\n 4px radius, 12px/16px padding, 16px text. v3 ships its own lighter chrome, so\n the box is restated here (this sheet is adopted into the toolbar's shadow).\n The \"Trier par:\" / \"Limite:\" prefixes are injected by custom_js — they are\n locale-dependent, and CSS `content` cannot follow the shopper's language. */\n:host(sledge-filter-sort) .search-inline,\n:host(sledge-filter-sort) .dropdown {\n box-sizing: border-box;\n height: 44px;\n padding: 12px 16px;\n border: 1px solid rgba(5, 5, 5, 0.15);\n border-radius: 4px;\n background: rgb(255, 255, 255);\n font-size: 16px;\n color: rgb(57, 61, 78);\n}\n:host(sledge-filter-sort) .search-inline { gap: 12px; }\n:host(sledge-filter-sort) .dropdown { gap: 8px; }\n/* `.right-section` is v3's own toolbar row (filter-sort component) — its default\n gap doubles up with the injected labels' own spacing, so it is zeroed here and\n the rhythm comes from the labels alone (v2's exact spacing). */\n:host(sledge-filter-sort) .right-section { gap: 0; }\n:host(sledge-filter-sort) .search-input { font-size: 16px; }\n:host(sledge-filter-sort) .dropdown-label { font-size: 16px; }\n/* The grid-column switcher has no v2 counterpart. */\n:host(sledge-filter-sort) .layout-icons { display: none !important; }\n/* Injected prefix labels sit OUTSIDE the boxes, like v2's — desktop only: v2's\n mobile bar has no prefixes, and v3 reflows the toolbar there, which would\n strand them on their own row. v2 also orders the pair sort-then-limit, while\n v3 renders limit first, so the row is re-ordered rather than re-templated. */\n:host(sledge-filter-sort) .sledge-v2-toolbar-label {\n display: none;\n align-items: center;\n margin-right: 8px;\n font-size: 16px;\n color: rgb(57, 61, 78);\n white-space: nowrap;\n}\n@media (min-width: 990px) {\n :host(sledge-filter-sort) .sledge-v2-toolbar-label { display: inline-flex; }\n :host(sledge-filter-sort) .sledge-v2-toolbar-label--sort { order: 1; }\n :host(sledge-filter-sort) #sort-toggle { order: 2; }\n :host(sledge-filter-sort) .sledge-v2-toolbar-label--limit { order: 3; margin-left: 16px; }\n :host(sledge-filter-sort) #perpage-toggle { order: 4; }\n}\n\n/* BellaDiscount does not use the v3 Review module (their live reviews are Loox)\n — the library's product-card rating injector has no settings gate, so suppress\n it explicitly rather than let a stray rating appear on the v2 card. */\nsledge-review-rating { display: none !important; }\n";document.head.appendChild(s);})(); // v2->v3 migration shim: the v2 card called window.sledge.shopifyFormatMoney(), // which only exists in the legacy compat bridge. Format from the storefront's // own money_format instead (amount arrives in CENTS). function sledgeFormatMoney(cents) { const amount = parseFloat(String(cents)); if (isNaN(amount)) return ''; const format = window.__sledgeMoneyFormat || window.Shopify?.money_format || '${{amount}}'; const value = amount / 100; const withDelims = (num, thousands, decimal, places) => { const fixed = num.toFixed(places); const [int, dec] = fixed.split('.'); const grouped = int.replace(/\B(?=(\d{3})+(?!\d))/g, thousands); return dec ? grouped + decimal + dec : grouped; }; return format.replace(/\{\{\s*(\w+)\s*\}\}/g, (_, name) => { switch (name) { case 'amount': return withDelims(value, ',', '.', 2); case 'amount_no_decimals': return withDelims(value, ',', '.', 0); case 'amount_with_comma_separator': return withDelims(value, '.', ',', 2); case 'amount_no_decimals_with_comma_separator': return withDelims(value, '.', ',', 0); case 'amount_with_apostrophe_separator': return withDelims(value, "'", '.', 2); case 'amount_with_space_separator': return withDelims(value, ' ', ',', 2); case 'amount_no_decimals_with_space_separator': return withDelims(value, ' ', ',', 0); default: return withDelims(value, ',', '.', 2); } }); } const shopifyAddToCart = async (data) => { var myHeaders = new Headers(); myHeaders.append('Content-Type', 'application/json'); let items = []; data.map((item) => { const { id, quantity } = item; items.push({ id: String(id).split('/').pop(), quantity: quantity }); }); var raw = JSON.stringify({ items: items }); var requestOptions = { method: 'POST', headers: myHeaders, body: raw, redirect: 'follow' }; if (!window?.Shopify?.routes) return; return await fetch(`${window.Shopify.routes.root}cart/add.js`, requestOptions) .then((response) => response.json()) .then((result) => { return result; }) .catch(() => { return; }); }; const handleAddToCart = async (data) => { const { id, quantity, sourceApp } = data; let resShopifyAddToCart = await shopifyAddToCart([ { id: id, quantity: quantity } ]); if (resShopifyAddToCart?.items?.length) { if (typeof window !== 'undefined' && window.sledge) { window.sledge.addToCartTrigger({ sourceApp, productId: id }); } window.location.href = '/cart'; } else { if (typeof window !== 'undefined' && window.sledgeToastNotification) window.sledgeToastNotification({ title: 'Failed', message: resShopifyAddToCart?.description?.length ? resShopifyAddToCart.description : 'failed add to cart, please try again', type: 'failed', icon: `` }); } }; const productClickTrigger = ({ sourceApp, productId, url }) => { if (typeof window !== 'undefined' && window.sledge && window.sledge.productClickTrigger) window.sledge .productClickTrigger({ sourceApp, productId }) .then(() => { window.location.href = url; }); }; //start product card code function setSelectedOption(element, optionName) { const optionsButton = element.target.offsetParent .querySelector( `.options-button-${optionName .toLowerCase() .replace(/[^\w ]+/g, '') .replace(/ +/g, '-')}` ) .querySelectorAll(`button`); const defaultSelectedClassChanger = () => { optionsButton.forEach((button, index) => { button.classList.remove('sledge__product-variant-size-swatch-active'); element.target.className += ' sledge__product-variant-size-swatch-active'; }); }; const colorSelectedClassChanger = () => { optionsButton.forEach((button, index) => { button.classList.remove('sledge__product-variant-color-swatch-active'); element.target.className += ' sledge__product-variant-color-swatch-active'; }); }; switch (optionName) { case 'Color': colorSelectedClassChanger(); break; case 'Size': defaultSelectedClassChanger(); break; default: defaultSelectedClassChanger(); } } function setSelectedVariant(element, value, optionIndex) { const selectedInput = element.target.offsetParent.querySelector('.selected-option'); const parentCard = element.target.offsetParent; const setOptionAttribute = () => { //set option attribute selectedInput.attributes[`data-selected-option${optionIndex}`].value = value; }; setOptionAttribute(); // define option1 and option 2 let option1 = `[data-option-1="${selectedInput.attributes['data-selected-option1'].value}"]`; let option2 = `${selectedInput.attributes['data-selected-option2'] ? `[data-option-2="${selectedInput.attributes['data-selected-option2'].value}"]` : ''}`; // define selected option const selectOption = parentCard.querySelector(`select option${option1}${option2}`); const variantIdLiquid = selectOption.attributes['data-id'].value; const variantId = selectOption.attributes['data-graphql-id'].value; const imageId = selectOption.attributes['data-image-id']?.value; const setOther = () => { //set data-variant-id attribute selectedInput.attributes[`data-variant-id`].value = selectOption.attributes['data-graphql-id'].value; selectedInput.attributes[`data-id`].value = selectOption.attributes['data-id'].value; //change product image by variant if (variantIdLiquid) { let buttonAddToCart = parentCard.querySelector('.sledge__button-add-to-cart'); if (buttonAddToCart) buttonAddToCart.setAttribute('data-variant-id', variantIdLiquid); } if (imageId && imageId !== 'null') parentCard.querySelector(`img.featured-image`).src = parentCard.querySelector(`div.variant-images img[id="${imageId}"]`).src; }; setOther(); const result = { variantIdLiquid, imageId }; return result; } function renderSelectOptions(variants) { return ` ${variants .map((variant) => { const { title, option1, option2, position, id, admin_graphql_api_id, image_id } = variant; let optionAttributes = { 'data-option-1': option1, 'data-option-2': option2, 'data-position': position, 'data-id': id, 'data-graphql-id': admin_graphql_api_id, 'data-image-id': image_id }; return ``; }) .join('')} `; } function renderOptionsButton(options, handle) { return options .map((option, optionParentIndex) => { const optionName = option[0]; const optionValues = option[1]; selectedOption = optionValues[0]; if (optionValues[0] !== 'Default Title') return `

${optionValues .map((item) => { const defaultOptionClass = ` ${selectedOption === item ? 'sledge__product-variant-size-swatch-active' : ''} sledge__product-variant-size-swatch`; const colorOptionClass = `${selectedOption === item ? 'sledge__product-variant-color-swatch-active' : ''} sledge__product-variant-color-swatch`; return ` `; }) .join('')}

`; }) .join(''); } function renderProductCard({ product, sourceApp }) { // Broken-image fallback. v2 served this from its own asset CDN; that // infrastructure is being decommissioned, and a placeholder that 404s // leaves the shopper with the browser's broken-image glyph on every card // without a picture. Same artwork, inlined as a data URI so it cannot go // away and costs no request: the original 1480x1362 PNG resampled to 560 // wide and quantised to 16 colours (9,535 -> 4,196 bytes), which is still // sharper than the box it renders in. const BLANK_IMAGE = 'data:image/png;base64,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'; const { id, admin_graphql_api_id, title, image, handle, url, vendor, currency, variants: productVariants, review } = product || {}; const setVariants = productVariants?.filter((variant) => !variant?.is_out_of_stock && variant?.availability !== 'out of stock'); const variants = setVariants?.length ? setVariants : productVariants; const { id: variant_id = '', admin_graphql_api_id: variant_admin_graphql_api_id = '', title: variant_title = '', price = '', compare_at_price = '', sku = '', is_out_of_stock: variant_is_out_of_stock = false, availability: variant_availability = '' } = variants?.length ? variants[0] : {}; const is_out_of_stock = variant_is_out_of_stock || variant_availability === 'out of stock'; const { total: totalReview, average: averageReview } = review || {}; const ratingTotalAttribute = typeof totalReview !== 'undefined' ? `data-rating-total="${totalReview}"` : ''; const ratingAverageAttribute = typeof averageReview !== 'undefined' ? `data-rating-average="${averageReview}"` : ''; const options = product.options ? Object.entries(product?.options) : []; const images = product?.images ?? []; const sledgeLanguages = (() => { const raw = window?.__sledgeSettings?.languages; const parsed = typeof raw === 'string' ? JSON.parse(raw) : raw; return parsed?.general || {}; })(); const language_add_to_cart = sledgeLanguages.add_to_cart || 'Add To Cart'; const language_sold_out = sledgeLanguages.out_of_stock || 'Sold out'; const language_vendor_label = sledgeLanguages.vendor_label || 'Vendor:'; let isOnSale = parseFloat(String(compare_at_price)) ? parseFloat(String(compare_at_price)) > parseFloat(String(price)) : false; const defaultSelected = {}; function setDefaultFunction() { if (!variants?.length) return; defaultSelected['data-product-handle'] = product.handle; defaultSelected['data-selected-option1'] = variants[0].option1; if (variants[0].option2) { defaultSelected['data-selected-option2'] = variants[0].option2; } defaultSelected['data-id'] = variants[0].id; defaultSelected['data-variant-id'] = variants[0].admin_graphql_api_id; } setDefaultFunction(); const urlProduct = `/products/${handle}`; const productReviewRating = `

`; return `

${isOnSale ? `

Promo

` : ''}

1 ? 'has-second-image' : ''}> sledge-product-card-image

${images?.length > 1 ? ` sledge-product-card-image

` : ''}

${ is_out_of_stock ? `

${language_sold_out}

` : '' }

${sledgeFormatMoney(price)}

${isOnSale ? `

${sledgeFormatMoney(compare_at_price)}

` : ''}

${vendor ? `

${language_vendor_label} ${vendor}

` : ''}

${ title ? `

${title}

` : '' } ${sku ? `

SKU: ${sku}

` : ''}

${ is_out_of_stock ? `` : ` ` }

`; } // belladiscount v2->v3 migration: restore v2's toolbar prefixes // ("Trier par:" / "Limite:") — v3 renders the dropdowns without them. (function(){ var LABELS = {"fr": {"sort": "Trier par:", "limit": "Limite:"}, "en": {"sort": "Sort by:", "limit": "Limit:"}, "es": {"sort": "Ordenar por:", "limit": "Límite:"}}; function copy(){ var lang = (document.documentElement.lang || 'en').slice(0, 2).toLowerCase(); return LABELS[lang] || LABELS.en || LABELS[Object.keys(LABELS)[0]]; } function label(text, kind){ var s = document.createElement('span'); s.className = 'sledge-v2-toolbar-label sledge-v2-toolbar-label--' + kind; s.textContent = text; return s; } function decorate(root){ var text = copy(); [['#sort-toggle', 'sort'], ['#perpage-toggle', 'limit']].forEach(function(pair){ var el = root.querySelector(pair[0]); if (!el || !el.parentNode) return; var prev = el.previousElementSibling; if (prev && prev.classList.contains('sledge-v2-toolbar-label')) return; el.parentNode.insertBefore(label(text[pair[1]], pair[1]), el); }); } // The toolbar sits one shadow level deep on collection pages but deeper on // the search page (search widget -> panel -> toolbar), so walk shadow roots // recursively instead of assuming a depth. function scan(root){ root = root || document; root.querySelectorAll('sledge-filter-sort').forEach(function(el){ if (el.shadowRoot) decorate(el.shadowRoot); }); root.querySelectorAll('*').forEach(function(host){ if (host.shadowRoot) scan(host.shadowRoot); }); } var pending = false; function schedule(){ if (pending) return; pending = true; requestAnimationFrame(function(){ pending = false; scan(); }); } new MutationObserver(schedule).observe(document.documentElement, { childList: true, subtree: true }); document.addEventListener('sledge-settings-ready', schedule); schedule(); })(); // ===== OFF-9575 R2 — v2 parity pass (QC feedback 2026-09-09) BEGIN ===== // Behaviour-level parity items that CSS cannot express. Everything here is // idempotent and re-applies after the components re-render, because the // filter/search/wishlist widgets rebuild their shadow trees on every fetch. (function () { 'use strict'; var LANG = (document.documentElement.lang || 'en').slice(0, 2).toLowerCase(); // Wording copied from the live v2 storefront dictionaries, per locale. var COPY = { fr: { refineTitle: 'Filtre', sortLabel: 'Trier par:', limitLabel: 'Limite:', sorts: [ { value: 'name:asc', label: 'Nom (A-Z)' }, { value: 'name:desc', label: 'Nom (Z-A)' }, { value: 'price:desc', label: 'Prix le plus élevé' }, { value: 'price:asc', label: 'Prix le plus bas' }, { value: 'created_at:desc', label: 'Le plus récent' }, { value: 'created_at:asc', label: 'Le plus ancien' } ] }, es: { refineTitle: 'Filtro', sortLabel: 'Ordenar por:', limitLabel: 'Límite:', sorts: [ { value: 'name:asc', label: 'Nombre (A-Z)' }, { value: 'name:desc', label: 'Nombre (Z-A)' }, { value: 'price:desc', label: 'Precio más alto' }, { value: 'price:asc', label: 'Precio más bajo' }, { value: 'created_at:desc', label: 'Más reciente' }, { value: 'created_at:asc', label: 'Más antiguo' } ] }, en: { refineTitle: 'Filter', sortLabel: 'Sort by:', limitLabel: 'Limit:', sorts: [ { value: 'name:asc', label: 'Name (A-Z)' }, { value: 'name:desc', label: 'Name (Z-A)' }, { value: 'price:desc', label: 'Highest Price' }, { value: 'price:asc', label: 'Lowest Price' }, { value: 'created_at:desc', label: 'Newest' }, { value: 'created_at:asc', label: 'Oldest' } ] } }; function copy() { return COPY[LANG] || COPY.en; } // Visit every shadow root under the document, once per pass, and start // observing each one the first time it is seen. // A MutationObserver on documentElement does NOT see inside shadow roots, so // without this the widgets could re-render (or just fill in their text) and // nothing below would run again — the list heading was being hidden on the // first empty paint and never restored once the count arrived. var observed = []; function eachRoot(fn) { var seen = []; (function walk(root) { fn(root); var all = root.querySelectorAll('*'); for (var i = 0; i < all.length; i++) { var sr = all[i].shadowRoot; if (sr && seen.indexOf(sr) === -1) { seen.push(sr); if (observed.indexOf(sr) === -1) { observed.push(sr); new MutationObserver(schedule).observe(sr, { childList: true, subtree: true, characterData: true }); } walk(sr); } } })(document); } // [1] Wishlist page: v2's sort order. // v2's PAGE SIZES used to be rewritten here as well, and must not be. The // widget re-renders the limit select from ITS OWN list after every fetch, so a // value that list does not contain falls back to the first option and the // shopper's pick snaps back — picking 48 landed on 12 (Nurdin 80a4ba84). That // is the same hazard the sort note below already describes. The sizes now // travel through `wishlist.display.limits`, the settings channel the sort set // already uses, so the widget stays the only thing that renders the control. function wishlistSelects(root) { // The sort SET and its order come from settings (wishlist.display.sorts), // so the component itself knows every value and keeps the right option // selected across re-renders. Only the LABELS are rewritten here, because // that settings field stores plain strings and cannot hold one per locale. // Rewriting the option list from here instead would break selection: the // widget re-renders from its own list after every fetch, and a value it // does not know about silently falls back to the first option. var sort = root.querySelector('select.sort-select'); if (sort) { var labels = {}; copy().sorts.forEach(function (o) { labels[o.value] = o.label; }); for (var i = 0; i < sort.options.length; i++) { var opt = sort.options[i]; var want = labels[opt.value]; if (want && opt.textContent !== want) opt.textContent = want; } } } // [1b] Wishlist search keeps losing the caret. // Typing re-renders the whole widget shadow tree, so the the shopper // is typing into is replaced and focus falls back to — every keystroke // after the first is dropped until they click the field again. // The flag is only cleared on a REAL blur: on a re-render the old input is // already disconnected by the time blur settles, and we restore the caret. var wlFocus = { active: false, pos: null }; function wishlistSearchFocus(root) { if (!root.host || root.host.tagName.toLowerCase() !== 'sledge-wishlist-widget') return; var input = root.querySelector('.search-input'); if (!input) return; // Bind once per element, but attempt the restore on EVERY pass: the widget // does not always swap the input, and when it keeps it the focus is still // dropped, so a bind-time-only restore would never fire. if (input.getAttribute('data-v2-focus') !== '1') { input.setAttribute('data-v2-focus', '1'); input.addEventListener('focus', function () { wlFocus.active = true; }); input.addEventListener('input', function () { wlFocus.active = true; wlFocus.pos = input.selectionStart; }); input.addEventListener('pointerdown', function () { wlFocus.active = true; }); input.addEventListener('blur', function () { // A real blur leaves the field connected AND focus on something else. // A re-render blur lands on with nothing else focused. setTimeout(function () { var a = document.activeElement; if (input.isConnected && a && a !== document.body) wlFocus.active = false; }, 0); }); } if (wlFocus.active && root.activeElement !== input) { input.focus(); var pos = wlFocus.pos == null ? input.value.length : wlFocus.pos; try { input.setSelectionRange(pos, pos); } catch (e) {} } } // [2] Wishlist page: v2 keeps title + search + actions on one row. // Wrap the three stacked rows so the stylesheet can lay them out inline. function wishlistToolbar(root) { var title = root.querySelector('.widget-row-title'); if (!title || !title.parentNode) return; if (title.parentNode.classList && title.parentNode.classList.contains('sledge-v2-wishlist-toolbar')) return; var search = root.querySelector('.widget-row-search'); var actions = root.querySelector('.widget-row-actions'); if (!search || !actions) return; var wrap = document.createElement('div'); wrap.className = 'sledge-v2-wishlist-toolbar'; title.parentNode.insertBefore(wrap, title); wrap.appendChild(title); wrap.appendChild(search); wrap.appendChild(actions); } // [3] Active-filter block: v2 shows a title and the clear link on one row // ABOVE the chips; v3 has no title and puts the button below the box. function refineHeader(root) { var active = root.querySelector('.filter-active'); if (!active) return; var clear = active.querySelector('.clear-all-btn'); if (!clear) return; var head = active.querySelector('.sledge-v2-refine-header'); if (!head) { head = document.createElement('div'); head.className = 'sledge-v2-refine-header'; var title = document.createElement('span'); title.className = 'sledge-v2-refine-title'; title.textContent = copy().refineTitle; head.appendChild(title); active.insertBefore(head, active.firstChild); } if (clear.parentNode !== head) head.appendChild(clear); } // [4] Search page: the per-tab search boxes start empty even though their // results are already scoped to the page keyword. function tabKeyword(root) { var q = new URLSearchParams(location.search).get('q'); if (!q) return; var boxes = root.querySelectorAll('.tab-search input'); for (var i = 0; i < boxes.length; i++) { var input = boxes[i]; if (input.getAttribute('data-v2-seeded') === '1') continue; input.setAttribute('data-v2-seeded', '1'); if (!input.value) input.value = q; } } // [5] No results: v2 drops the list heading entirely, v3 leaves the bare // collection name ("Products") floating above the empty state. // The heading is decided from its OWN text, not from the empty-state element: // those live in sibling shadow roots that settle at different times, and // reading across them made the title flicker off on a populated list. // With results the heading always carries the count; with none, only the bare // collection name is left. Two templates are in play — the PLP uses // "{{name}} - {{count}} Résultats" but the search page uses "{{count}} // Produits", so keying on the " - " separator wrongly hid the search-page // heading. Presence of a digit is the signal that survives both. function titleOnEmpty(root) { var title = root.querySelector('#page-title'); if (!title) return; var hasCount = /\d/.test(title.textContent || ''); if (!hasCount && (title.textContent || '').trim()) { title.setAttribute('data-v2-hidden', '1'); title.style.display = 'none'; } else if (title.getAttribute('data-v2-hidden') === '1') { title.removeAttribute('data-v2-hidden'); title.style.display = ''; } } // [6] Collection / page / blog / article cards carry no media in v3, so the // cards collapse to uneven heights. Give them v2's placeholder box. var PLACEHOLDER_SVG = ''; function cardMedia(root) { var grids = root.querySelectorAll('.tab-content-grid'); for (var g = 0; g < grids.length; g++) { var cards = grids[g].children; for (var i = 0; i < cards.length; i++) { var card = cards[i]; if (card.classList.contains('tab-empty')) continue; if (card.querySelector('.sledge-v2-card-media')) continue; if (card.querySelector('img')) continue; var media = document.createElement('div'); media.className = 'sledge-v2-card-media'; media.innerHTML = PLACEHOLDER_SVG; card.insertBefore(media, card.firstChild); } } } // [7] Availability facet goes missing in v3. // Both versions store hide_when_one_value = true, but v2 still renders // "Disponibilité" even though the group only ever has one value // ("En stock" — out-of-stock products are excluded by show_out_of_stock:false), // while v3 applies the rule and hides the whole group. Measured on // /collections/all, /collections/beard-care and /collections/baskets-enfant: // v2 shows the group, v3 hides it — the merchant loses a filter. // Only THIS group is restored, and only when it actually has an option, so // genuinely empty groups (and the other facets v2 also hides) stay hidden. // The marker attribute is ours: the stylesheet forces the group visible from // it, so re-hiding by the component does not turn into an un-hide/re-hide loop. var AVAILABILITY = /^(Disponibilit|Availability|Disponibilidad)/i; function restoreAvailability(root) { if (!root.host || root.host.tagName.toLowerCase() !== 'sledge-filter-group') return; var label = root.querySelector('.group-label'); if (!label || !AVAILABILITY.test(label.textContent.trim())) return; if (!root.querySelector('sledge-filter-item')) return; if (root.host.getAttribute('data-v2-force-visible') !== '1') { root.host.setAttribute('data-v2-force-visible', '1'); } } // [8b] Toolbar prefixes ("Trier par:" / "Limite:"). // The 2024 migration block already inserts these, but it only runs off a // MutationObserver, so on app-block widgets it can miss the first render — // observed on the Spanish PLP, where neither label existed in the DOM at all. // Re-inserting from here is safe: both guards key on the same class, so // whichever block gets there first wins and the other is a no-op. function toolbarLabels(root) { var c = copy(); [['#sort-toggle', 'sort', c.sortLabel], ['#perpage-toggle', 'limit', c.limitLabel]].forEach(function (pair) { var el = root.querySelector(pair[0]); if (!el || !el.parentNode) return; var prev = el.previousElementSibling; if (prev && prev.classList && prev.classList.contains('sledge-v2-toolbar-label')) return; var span = document.createElement('span'); span.className = 'sledge-v2-toolbar-label sledge-v2-toolbar-label--' + pair[1]; span.textContent = pair[2]; el.parentNode.insertBefore(span, el); }); } // [9] Wishlist header badge: style its shadow root directly. // general.custom_css is adopted into Sledge shadow roots, but NOT into this // one — sledge-wishlist-badge's adoptedStyleSheets only ever hold the // component's own sheet, so every `.badge*` rule written in custom_css is // dead on arrival. Injecting a

Country/region

Language

Collection: Products