/* === V3 Crave card refinements (maddogsports) — additive; prepended BEFORE the inert V2 custom JS (which is an escaped string literal, so renderProductCard stays undefined and the crave template keeps rendering). === */ (function () { var TAG_SVG = ''; function refine(card) { try { var sr = card.shadowRoot; if (!sr) return; var p = card._product || card.product; if (!p) return; // 1. Sale badge -> "N.NN% off" + tag icon (exact % from compare-at) var badge = sr.querySelector('.card__badge .badge:not(.badge--sold-out)'); if (badge && badge.dataset.mdRefined !== '1' && p.compareAtPrice && p.compareAtPrice > p.price) { var pct = (1 - p.price / p.compareAtPrice) * 100; badge.innerHTML = TAG_SVG + '' + pct.toFixed(2) + '% off'; badge.dataset.mdRefined = '1'; } // 2. Stock status line "In Stock (N units)" after the price (in-stock only; OOS uses the badge) var priceEl = sr.querySelector('.price'); if (priceEl && p.available && !sr.querySelector('.crave-stock')) { var sel = (p.variants || []).filter(function (v) { return v.available; })[0] || (p.variants || [])[0]; var qty = (sel && sel.inventoryQuantity != null) ? sel.inventoryQuantity : (p.inventoryTotal || 0); var el = document.createElement('div'); el.className = 'crave-stock'; el.setAttribute('data-inventory-level', (qty > 0 && qty <= 5) ? 'low' : 'high'); el.textContent = qty > 0 ? ('In Stock (' + qty + ' unit' + (qty === 1 ? '' : 's') + ')') : 'In Stock'; // crave grid card: .price is the container; default list card: .price sits in a .price-row var anchor = sr.querySelector('.price-row') || priceEl; anchor.insertAdjacentElement('afterend', el); } // 3. Non-colour (size) options -> a \ \ \ \ \ `;\ \ const inventoryStatusComponent = () => {\ if (isOutOfStock) return '';\ \ const inventoryLevel = () => {\ if (isLowInStock) return 'low';\ if (isVeryLowInStock) return 'very-low';\ \ return 'in-stock';\ };\ \ return `

${language_in_stock} (${inventory_quantity} units)

`;\ };\ \ const variantSelectorComponent = () => {\ return `\

\ ${images?.map?.((image) => `

`)?.join?.('')}\

\ \ acc + `${item}=\"${defaultSelected[item]}\"`, '')} class=\"sledge__product-grid-card-selected-option\" />\ \ \

\ \ ${options?.filter(option => option?.[0] == 'Color')?.map?.((option) => {\ const optionName = option?.[0];\ const optionValues = option?.[1];\ const optionIndex = options.findIndex(item => item[0] === optionName) + 1;\ \ let selectedOption = optionValues?.[0];\ const initialVisibleCount = 2;\ const hiddenOptionsCount = `${optionValues.length - initialVisibleCount}`;\ const showMoreText = `${hiddenOptionsCount}+`;\ \ const showMoreButton = `\ \ ${showMoreText}\ \ `;\ \ return optionValues[0] !== 'Default Title' ? `\

\ ${optionValues?.slice(0, initialVisibleCount)?.map?.((item, index) => {\ 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`;\ const colorDataSettings = instantSearchSettings?.colors || [];\ const getColorSwatch = colorDataSettings?.filter?.(({ name }) => name === item)[0] || {};\ const colorSwatch = getColorSwatch?.image ? `url(${getColorSwatch?.image})` : getColorSwatch?.rgb || item;\ \ return `\ \ ${optionName === 'Color' ? '' : item}\ `;\ })?.join?.('')}\ ${hiddenOptionsCount > 0 ? showMoreButton : \"\"}\

` : '';\ \ })}\ \

\ ${options?.filter(option => option?.[0] != 'Color')?.map?.((option, optionParentIndex) => {\ const optionName = option?.[0];\ const optionValues = option?.[1];\ const optionIndex = options.findIndex(item => item[0] === optionName) + 1;\ \ return optionValues[0] !== 'Default Title' ? `` : '';\ })?.join?.('')}\

\ ${buttonComponent()}\

`; \ }\ \ function setDefaultFunction() {\ if (!variants?.length) return;\ \ defaultSelected['data-product-id'] = id;\ defaultSelected['data-product-handle'] = handle;\ defaultSelected['data-selected-option1'] = variants[0].option1;\ if (variants[0].option2) {\ defaultSelected['data-selected-option2'] = variants[0].option2;\ }\ defaultSelected['data-variant-id'] = variants[0].admin_graphql_api_id;\ defaultSelected['data-inventory-quantity'] = variants[0].inventory_quantity;\ defaultSelected['data-inventory-management'] = variants[0].inventory_management;\ defaultSelected['data-inventory-policy'] = variants[0].inventory_policy;\ }\ \ setDefaultFunction();\ \ return `\ \

\ \ $\"${image?.alt$ \ ${secondaryImage ? ` $\"${secondaryImage?.alt$ ` : ''}\ \

\ ${\ isOnSale\ ? `\ \ \ ${sale_percent}% off\ `\ : ''\ }\ \ ${isOutOfStock ? `${language_sold_out}` : ''}\

\ ${vendor && show_vendor ? `

${vendor}

` : ''}\ ${sku && show_sku ? `

SKU : ${sku}

` : ''}\

\ ${title}\

\ ${show_price ? `

\ ${window?.sledge?.shopifyFormatMoney?.(price)}\ ${isOnSale ? `~~${window?.sledge?.shopifyFormatMoney?.(compare_at_price)}~~` : ''}\

` : ''}\ ${inventoryStatusComponent()}\ ${variantSelectorComponent()}\

\ ${buttonComponent()}\

\ `;\ }"

Collection: Mercian Hockey