// Keeps the variant in the URL (() => { if (!window.location.pathname.includes('/products/')) return; let lastVariantId = null; const getVariantInput = () => document.querySelector('form[action*="/cart/add"] input[name="id"]'); const updateUrl = (variantId) => { if (!variantId || variantId === lastVariantId) return; lastVariantId = variantId; const url = new URL(window.location.href); if (url.searchParams.get('variant') === String(variantId)) return; url.searchParams.set('variant', variantId); history.replaceState({}, '', url.toString()); }; const observeForm = () => { const form = document.querySelector('form[action*="/cart/add"]'); if (!form) return; updateUrl(getVariantInput()?.value); new MutationObserver(() => updateUrl(getVariantInput()?.value)) .observe(form, { attributes: true, childList: true, subtree: true }); }; document.addEventListener('change', (e) => { if (e.target.name === 'id') updateUrl(e.target.value); }); document.addEventListener('variant:changed', (e) => updateUrl(String(e?.detail?.variant?.id))); document.addEventListener('variantChange', (e) => updateUrl(String(e?.detail?.variant?.id || e?.detail?.id))); document.readyState === 'loading' ? document.addEventListener('DOMContentLoaded', observeForm) : observeForm(); })(); // Helper for Hub bundle builder working with Abra (() => { const ABRA_ACTIVE_CLASS = 'abra--activated'; const isActive = () => document.body.classList.contains(ABRA_ACTIVE_CLASS); let isEnabled = isActive; const STRUCK_SEL = 's, del, strike, [class*="compare"], [class*="strike"], [class*="original"], [class*="was"]'; function parseNumber(text) { const m = String(text).match(/\d[\d.,\s ]*\d|\d/); if (!m) return null; const raw = m[0].replace(/[\s ]/g, ''); const dec = raw.match(/([.,])(\d{1,2})$/); let intPart, fracPart = '', decSep = '.', thouSep = ''; if (dec && raw.split(/[.,]/).length > 1) { decSep = dec[1]; thouSep = decSep === '.' ? ',' : '.'; intPart = raw.slice(0, dec.index).replace(/[.,]/g, ''); fracPart = dec[2].padEnd(2, '0'); } else { intPart = raw.replace(/[.,]/g, ''); thouSep = (raw.match(/[.,]/) || [''])[0]; decSep = thouSep === ',' ? '.' : ','; } const cents = parseInt(intPart, 10) * 100 + (fracPart ? parseInt(fracPart, 10) : 0); return isNaN(cents) ? null : { raw: m[0], cents, decSep, thouSep, decimals: fracPart.length > 0 }; } const parseCents = text => { const n = parseNumber(text); return n ? n.cents : null; }; function formatterFrom(sample) { const n = parseNumber(sample); if (!n) return null; return cents => { const abs = Math.abs(cents); let int = Math.floor(abs / 100).toString(); if (n.thouSep) int = int.replace(/\B(?=(\d{3})+(?!\d))/g, n.thouSep); const frac = n.decimals ? n.decSep + String(abs % 100).padStart(2, '0') : ''; return String(sample).replace(n.raw, int + frac); }; } function abraRatio(priceEl) { const clone = priceEl.cloneNode(true); const struck = clone.querySelectorAll(STRUCK_SEL); if (!struck.length) return 1; const original = parseCents(Array.from(struck).map(el => el.textContent).join(' ')); struck.forEach(el => el.remove()); const promo = parseCents(clone.textContent); if (!original || promo == null || promo >= original) return 1; return promo / original; } const gidNum = g => String(g || '').split('/').pop(); function bundleRules() { const A = window.Abra; let promo = A && A.publicPromotion; if (!(promo && promo.discounts) && A && typeof A.currentPromotionDetails === 'function') { try { promo = A.currentPromotionDetails(); } catch (e) { promo = null; } } const discounts = promo && promo.discounts ? Object.values(promo.discounts) : []; const now = Date.now(); return discounts.filter(d => { const v = d && d.discountValue; if (!v || v.type !== 'BxgyDiscount' || v.requirementType !== 'QUANTITY') return false; if (d.status && d.status !== 'ACTIVE') return false; if (d.startsAt && Date.parse(d.startsAt) > now) return false; if (d.endsAt && Date.parse(d.endsAt) < now) return false; const gets = v.customerGets; return !!(gets && gets.applyToProductCardItems && gets.value && gets.value.type === 'DiscountPercentage' && gets.value.percentage > 0); }).map(d => ({ pct: d.discountValue.customerGets.value.percentage, cards: d.discountValue.productCards.map(c => ({ quantity: c.quantity || 1, handles: new Set((c.items.products || []).map(p => p.handle)), variants: new Set((c.items.products || []).flatMap(p => (p.variants || []).map(x => gidNum(x.id)))) })) })); } const itemInCard = (item, card) => card.variants.has(String(item.variantId)) || card.handles.has(item.handle); function satisfies(rule, items) { const used = rule.cards.map(() => 0); const assign = (i) => { if (i === items.length) return true; for (let c = 0; c < rule.cards.length; c++) { if (used[c] < rule.cards[c].quantity && itemInCard(items[i], rule.cards[c])) { used[c]++; if (assign(i + 1)) return true; used[c]--; } } return false; }; if (items.length < rule.cards.reduce((a, c) => a + c.quantity, 0)) return false; return assign(0); } const cardItem = card => card ? { handle: card.dataset.handle, variantId: card.dataset.firstVariant } : null; function bundlePctFor(items) { let best = 0; bundleRules().forEach(r => { if (satisfies(r, items)) best = Math.max(best, r.pct); }); return best; } isEnabled = () => isActive() || bundleRules().length > 0; function bundlePctForCard(card) { if (!selectedCard('mounts') || !selectedCard('mods')) return 0; const step = card.closest('.bundle-step'); const type = step && step.dataset.type; const other = type === 'mounts' ? selectedCard('mods') : selectedCard('mounts'); const items = [cardItem(card), cardItem(other)].filter(Boolean); return items.length === 2 ? bundlePctFor(items) : 0; } function getCardPrices(card) { const priceEl = card && card.querySelector('.bundle-card__price'); if (!priceEl) return { html: card ? card.dataset.price : '', promo: null, original: null }; const sample = String(card.dataset.price).replace(/<[^>]*>/g, '').trim(); const base = parseCents(sample); if (base == null) return { html: priceEl.innerHTML.trim(), promo: null, original: null }; const fmt = formatterFrom(sample); const ratio = priceEl.dataset.hubRatio ? parseFloat(priceEl.dataset.hubRatio) : abraRatio(priceEl); const itemPromo = Math.round(base * ratio); const bundlePct = ratio < 1 ? 0 : bundlePctForCard(card); const promo = bundlePct ? Math.round(itemPromo * (1 - bundlePct / 100)) : itemPromo; const html = promo < base ? `${fmt(promo)} ~~${fmt(base)}~~` : `${fmt(base)}`; return { html, promo, original: base, ratio, sample, bundlePct }; } const observers = []; const drain = () => observers.forEach(o => o.takeRecords()); function fixCard(card) { const priceEl = card.querySelector('.bundle-card__price'); if (!priceEl) return; if (!isEnabled()) { delete priceEl.dataset.hubRatio; const base = String(card.dataset.price || '').trim(); if (base && priceEl.innerHTML.trim() !== base) { priceEl.innerHTML = base; drain(); } return; } const ratio = abraRatio(priceEl); if (ratio < 1) priceEl.dataset.hubRatio = ratio; const p = getCardPrices(card); if (p.promo == null || priceEl.innerHTML === p.html) return; priceEl.innerHTML = p.html; drain(); } const fixAllCards = () => document.querySelectorAll('.bundle-card').forEach(fixCard); const selectedCard = type => document.querySelector(`#${type}-grid .bundle-card.is-selected`); let currentFormat = null; const money = cents => currentFormat ? currentFormat(cents) : (typeof formatMoney === 'function' ? formatMoney(cents) : (cents / 100).toFixed(2)); const setHTML = (id, html) => { const el = document.getElementById(id); if (!el || el.innerHTML === html) return; el.innerHTML = html; drain(); }; const show = (id, on) => { const el = document.getElementById(id); if (el) el.style.display = on ? 'flex' : 'none'; }; const pctLabel = (original, promo) => { if (!original || promo == null || promo >= original) return null; const pct = (1 - promo / original) * 100; return (Math.round(pct * 10) / 10).toString().replace(/\.0$/, '') + '%'; }; function install() { if (typeof selections === 'undefined' || typeof updatePriceDisplay !== 'function') { return; } const origStepHeader = window.updateStepHeader; const origPriceDisplay = window.updatePriceDisplay; window.updateStepHeader = function (type, title, price, imageUrl) { if (!isEnabled()) return origStepHeader.apply(this, arguments); const p = getCardPrices(selectedCard(type)); origStepHeader.call(this, type, title, p.html || price, imageUrl); setHTML(`${type}-step-price`, `+${p.html || price}`); }; window.updatePriceDisplay = function () { if (!isEnabled()) return origPriceDisplay.apply(this, arguments); const hasMounts = !!selections.mounts.variantId; const hasMods = !!selections.mods.variantId; fixAllCards(); ['mounts', 'mods'].forEach(t => { const c = selectedCard(t); if (c) setHTML(`${t}-step-price`, `+${getCardPrices(c).html || c.dataset.price}`); }); if (!hasMounts && !hasMods) { setHTML('hub-sticky-price', '0.00'); setHTML('hub-sticky-note', 'Select mounts & mods'); setHTML('inline-total-price', '0.00'); setHTML('inline-total-note', 'Select mounts & mods to see total'); show('bundle-subtotal-row', false); show('bundle-discount-row', false); return; } const parts = []; if (hasMounts) parts.push(getCardPrices(selectedCard('mounts'))); if (hasMods) parts.push(getCardPrices(selectedCard('mods'))); if (parts.some(p => p.promo == null)) { return; } currentFormat = formatterFrom(parts[0].sample) || currentFormat; const subtotal = parts.reduce((a, p) => a + p.original, 0); const total = parts.reduce((a, p) => a + p.promo, 0); const discount = subtotal - total; const pct = pctLabel(subtotal, total); const bundlePct = parts.length === 2 ? Math.max(...parts.map(p => p.bundlePct || 0)) : 0; const note = parts.length === 2 ? (bundlePct ? `Bundle total (${bundlePct}% bundle discount applied)` : (pct ? `Bundle total (${pct} OFF applied)` : 'Bundle total')) : 'Total for current selection'; if (discount > 0) { show('bundle-subtotal-row', true); setHTML('inline-subtotal-price', money(subtotal)); show('bundle-discount-row', true); setHTML('inline-discount-label', pct ? `Discount (${pct} OFF)` : 'Discount'); setHTML('inline-discount-amount', `-${money(discount)}`); } else { show('bundle-subtotal-row', false); show('bundle-discount-row', false); } setHTML('inline-total-price', money(total)); setHTML('inline-total-note', note); setHTML('hub-sticky-price', money(total)); setHTML('hub-sticky-note', note); }; const refresh = () => { fixAllCards(); ['mounts', 'mods'].forEach(t => { const c = selectedCard(t); if (c) window.updateStepHeader(t, c.dataset.title, c.dataset.price, c.dataset.image); }); window.updatePriceDisplay(); }; window.addEventListener('abra:render', () => setTimeout(refresh, 50)); ['abra:initialized', 'abra:activated', 'abra:applied', 'abra:unapplied'].forEach(ev => window.addEventListener(ev, () => setTimeout(refresh, 50))); document.addEventListener('abra:render', () => setTimeout(refresh, 50)); let lastActive = isActive(); new MutationObserver(() => { const active = isActive(); if (active === lastActive) return; lastActive = active; refresh(); }).observe(document.body, { attributes: true, attributeFilter: ['class'] }); let writes = []; let pausedUntil = 0; const onCardMutation = (muts) => { if (!isEnabled()) return; if (!muts.some(m => (m.target.nodeType === 1 ? m.target : m.target.parentElement)?.closest('.bundle-card__price'))) return; const now = Date.now(); if (now < pausedUntil) return; writes = writes.filter(t => now - t < 2000); if (writes.length >= 10) { pausedUntil = now + 30000; writes = []; return; } writes.push(now); setTimeout(refresh, 0); }; document.querySelectorAll('.bundle-step__grid').forEach(grid => { const o = new MutationObserver(onCardMutation); o.observe(grid, { childList: true, subtree: true, characterData: true }); observers.push(o); }); window.hubAbra = { refresh, getCardPrices, fixAllCards, parseNumber, formatterFrom, isActive, isEnabled: () => isEnabled(), bundleRules, bundlePctFor }; refresh(); [1000, 3000].forEach(ms => setTimeout(refresh, ms)); } if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', install); else install(); })();

Behind the Design

Find Our Store