/* GiggleGlass custom JS — THEME-ROUTE patcher (Envy card template renders the * card; this script only patches it). Replaces the old renderProductCard() * light-DOM card so every v3 card-level feature (wishlist, badges, preorder, * BIS, review) keeps its native shadow-DOM injection points. * * v2 behaviors kept 1:1 (verified live 2026-07-21): * - SAME-PRODUCT variant swatches on the card (color chips colored by the * option value + text pills, 11-char labels), cross-option resolution * - featured image swaps to the selected variant's image * - ATC adds the SELECTED variant straight to cart then redirects to /cart * (v2 handleAddToCart) — no choose-options modal * - "$ N" price format (integer prices drop decimals) * - "Sold out" pill on the image for unavailable products * - secondary product-link button for BRIX-tagged products * Colors/typography/card chrome ride the merchant CSS (adopted into the * card's shadow root) — see giggleglass-custom-v3.css. */ (function () { 'use strict'; /* v2's theme cards carry a `data-component="wishlist-trigger"` anchor. These * used to be neutralised here so the v3 adapter would skip them, but the * library's theme-card scan then mounted the same triggers through its own * path anyway — same component count, harder to reason about. They are left * alone now: the adapter claims each anchor and reuses v2's product ids, and * the document rule below pins the heart over the image like the Sledge * card. PDP keeps its own anchor (`wishlist-button-detail`), untouched. * * The theme also ships the same anchor inside card markup it never shows * (958 anchors on /collections/blue-color-products, only 16 in a card with a * box). Those are dropped, so only cards a shopper can see get a heart. */ function anchorCard(el) { return (el.closest && el.closest('article.indiv-product')) || el.parentElement; } /* The adapter drops the heart inside v2's anchor, which sits above the image * and pushes the card down. Card padding differs per carousel, so the heart * is moved into the theme's image wrapper (already position:relative) and * pinned there by the document rule below — 8px from the top-right corner, * same as the Sledge card. Any extra copy in the card is dropped. */ function placeTrigger(anchor) { var card = anchorCard(anchor); /* one card variant has no `.reveal` wrapper — there the heart stays in the * anchor and is pinned against the card instead (same 8px corner). */ var slot = card && (card.querySelector('.reveal') || anchor); if (!slot) return; var trigger = card.querySelector('sledge-wishlist-trigger'); if (!trigger) { var pid = anchor.getAttribute('data-product-id'); if (!pid) return; trigger = document.createElement('sledge-wishlist-trigger'); trigger.setAttribute('product-id', pid); var vid = anchor.getAttribute('data-product-variant-id'); if (vid) trigger.setAttribute('product-variant-id', vid); } if (trigger.parentElement !== slot) slot.appendChild(trigger); var all = card.querySelectorAll('sledge-wishlist-trigger'); for (var i = 0; i < all.length; i++) if (all[i] !== trigger) all[i].remove(); } /* Cards arrive late: the theme builds each carousel when its tab opens, and * the adapter only claims anchors once at boot. */ function syncTriggers() { var anchors = document.querySelectorAll('[data-component="wishlist-trigger"]'); for (var i = 0; i < anchors.length; i++) placeTrigger(anchors[i]); } var syncTimer = null; function scheduleSync() { if (syncTimer) clearTimeout(syncTimer); syncTimer = setTimeout(syncTriggers, 250); setTimeout(syncTriggers, 1200); } syncTriggers(); document.addEventListener('DOMContentLoaded', syncTriggers); setTimeout(syncTriggers, 1500); document.addEventListener('click', scheduleSync, true); window.addEventListener('resize', scheduleSync); try { new MutationObserver(function (muts) { for (var i = 0; i < muts.length; i++) { var added = muts[i].addedNodes; for (var j = 0; j < added.length; j++) { var n = added[j]; if (n.nodeType !== 1) continue; if ((n.matches && n.matches('[data-component="wishlist-trigger"]')) || (n.querySelector && n.querySelector('[data-component="wishlist-trigger"]'))) { scheduleSync(); return; } } } }).observe(document.documentElement, { childList: true, subtree: true }); } catch (e) { /* observer unsupported — the timed sweeps still run */ } /* v2 hides the Product Type group on /collections/accessories only (theme * CSS keyed to that page); the same group's scope also covers * carta-glass-addons and puffco-glass-add-ons, where v2 does render it. */ function hideAccessoriesProductType() { if (location.pathname !== '/collections/accessories') return; var panel = document.querySelector('sledge-filter-panel'); if (!panel || !panel.shadowRoot) return; var groups = panel.shadowRoot.querySelectorAll('sledge-filter-group'); for (var i = 0; i < groups.length; i++) { var sr = groups[i].shadowRoot; if (!sr) continue; var label = sr.querySelector('.group-label'); if (label && label.textContent.trim() === 'Product Type') groups[i].style.display = 'none'; } } if (location.pathname === '/collections/accessories') { setInterval(hideAccessoriesProductType, 500); } var BAG_ICON = ''; 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'); } /* "$ 220" — v2 shows a spaced dollar and drops ".00" on whole prices */ function ggMoney(n) { if (typeof n !== 'number' || isNaN(n)) return ''; var whole = Math.round(n) === n; return '$ ' + (whole ? String(n) : n.toFixed(2)); } function isColorOption(name) { return /colou?r/i.test(name || ''); } /* option names in display order from the first variant's selectedOptions */ function optionNames(variants) { var first = variants[0]; var opts = (first && first.selectedOptions) || []; return opts.map(function (o) { return o.name; }).filter(Boolean); } function valuesForOption(variants, name) { var seen = [], has = {}; variants.forEach(function (v) { var val = v.options && v.options[name]; if (val && !has[val]) { has[val] = true; seen.push(val); } }); return seen; } function findVariant(variants, selected) { for (var i = 0; i < variants.length; i++) { var v = variants[i]; var ok = true; for (var name in selected) { if ((v.options || {})[name] !== selected[name]) { ok = false; break; } } if (ok) return v; } return null; } function swapImage(card, variant) { if (!variant || !variant.image) return; var img = card.shadowRoot && card.shadowRoot.querySelector('.card-gallery__slide img'); if (img) { img.src = variant.image; img.removeAttribute('srcset'); } } function renderPicker(card, product) { var shadow = card.shadowRoot; var variants = product.variants || []; if (variants.length < 2) return; var titleBlock = shadow.querySelector('.product-card__title-block'); if (!titleBlock || shadow.querySelector('.gg-variant-picker')) return; /* hide the template's static (non-interactive) pills — ours replace them */ var staticPicker = shadow.querySelector('.variant-picker'); if (staticPicker) staticPicker.style.display = 'none'; var selected = {}; (variants[0].selectedOptions || []).forEach(function (o) { selected[o.name] = o.value; }); card.__ggSelected = selected; card.__ggVariant = variants[0]; var picker = document.createElement('div'); picker.className = 'gg-variant-picker'; optionNames(variants).forEach(function (name) { var values = valuesForOption(variants, name); if (values.length < 2 && values[0] === 'Default Title') return; var row = document.createElement('div'); row.className = 'gg-option-row'; row.setAttribute('data-option', name); values.forEach(function (val) { var isColor = isColorOption(name); var b = document.createElement('button'); b.type = 'button'; b.className = 'gg-swatch' + (isColor ? ' gg-swatch--color' : '') + (selected[name] === val ? ' gg-swatch--active' : ''); b.setAttribute('data-value', val); b.title = val; if (isColor) { b.style.backgroundColor = val; } else { b.textContent = String(val).substring(0, 11); } b.addEventListener('click', function (e) { /* the picker sits inside the card's wrapper — keep the click * from navigating / bubbling into the tracked card link */ e.preventDefault(); e.stopPropagation(); selected[name] = val; row.querySelectorAll('.gg-swatch').forEach(function (x) { x.classList.remove('gg-swatch--active'); }); b.classList.add('gg-swatch--active'); var match = findVariant(variants, selected); if (match) { card.__ggVariant = match; swapImage(card, match); } }); row.appendChild(b); }); if (row.children.length) picker.appendChild(row); }); if (picker.children.length) { var priceEl = shadow.querySelector('.price'); if (priceEl && priceEl.parentElement === titleBlock) titleBlock.insertBefore(picker, priceEl); else titleBlock.appendChild(picker); } } /* v2 handleAddToCart: POST the selected variant, then hard-redirect /cart */ function bindAtc(card, product) { var shadow = card.shadowRoot; var btn = shadow.querySelector('.quick-add-btn'); if (!btn || btn.__ggBound) return; var variants = product.variants || []; if (variants.length < 2) return; /* single-variant: native ATC + redirect_to_cart covers it */ btn.__ggBound = true; btn.addEventListener('click', function (e) { /* capture-phase suppress of the native choose-options modal */ e.preventDefault(); e.stopImmediatePropagation(); var v = card.__ggVariant || variants[0]; var id = String(v.id || '').replace(/\D/g, ''); if (!id) return; btn.disabled = true; fetch((window.Shopify && window.Shopify.routes ? window.Shopify.routes.root : '/') + 'cart/add.js', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ items: [{ id: Number(id), quantity: 1 }] }) }) .then(function (r) { if (!r.ok) throw new Error('HTTP ' + r.status); return r.json(); }) .then(function () { window.location.href = '/cart'; }) .catch(function () { btn.disabled = false; alert('failed add to cart, please try again'); }); }, true); } function patchPrice(card, product) { var shadow = card.shadowRoot; var price = shadow.querySelector('.price'); if (!price || price.__ggDone) return; var sale = price.querySelector('.price-item--sale'); var regular = price.querySelector('.price-item--regular'); if (sale && typeof product.price === 'number') sale.textContent = ggMoney(product.price); if (regular) { var compareAt = product.compareAtPrice; if (sale && typeof compareAt === 'number') regular.textContent = ggMoney(compareAt); else if (typeof product.price === 'number') regular.textContent = ggMoney(product.price); } price.__ggDone = true; } function patchSoldOut(card, product) { var shadow = card.shadowRoot; if (product.available !== false) return; var gallery = shadow.querySelector('.card-gallery'); if (gallery && !gallery.querySelector('.gg-soldout')) { var el = document.createElement('div'); el.className = 'gg-soldout'; el.textContent = 'Sold out'; gallery.appendChild(el); } } function patchBrixLink(card, product) { var shadow = card.shadowRoot; var tags = product.tags || []; var isBrix = tags.some ? tags.some(function (t) { return /brix/i.test(String(t)); }) : false; if (!isBrix || shadow.querySelector('.gg-brix-link')) return; var wrapper = shadow.querySelector('.product-card-wrapper'); if (!wrapper) return; var a = document.createElement('a'); a.className = 'gg-brix-link'; a.href = '/products/' + (product.handle || ''); a.setAttribute('aria-label', 'View product'); a.innerHTML = BAG_ICON; a.addEventListener('click', function (e) { e.stopPropagation(); }); wrapper.appendChild(a); } function patch(card) { if (!card || !card.shadowRoot) return; var product = card._product || card.product || {}; if (!product || !product.handle) return; patchPrice(card, product); patchSoldOut(card, product); patchBrixLink(card, product); renderPicker(card, product); bindAtc(card, product); } /* v2 toolbar shows "N Results" only — v3 renders " - N Results" * into #page-title. Strip the title prefix; keep watching (the count * re-renders on every filter/sort/page change). */ function fixToolbarCount() { deepQueryAll('#page-title').forEach(function (el) { var m = (el.textContent || '').match(/(\d[\d.,]*\s+Results?)\s*$/i); if (m && el.textContent.trim() !== m[1]) { el.textContent = m[1]; if (!el.__ggObserved) { el.__ggObserved = true; new MutationObserver(function () { var mm = (el.textContent || '').match(/(\d[\d.,]*\s+Results?)\s*$/i); if (mm && el.textContent.trim() !== mm[1]) el.textContent = mm[1]; }).observe(el, { childList: true, characterData: true, subtree: true }); } } /* v2 row layout: [Sort by: ] [N Results] — relocate the count * next to the sort dropdown (right-section), matching measured v2 * geometry (count sits to the RIGHT of the sort control) */ var root = el.getRootNode(); var right = root.querySelector && root.querySelector('.filter-sort .right-section'); if (right && el.parentElement !== right) right.appendChild(el); }); } setInterval(fixToolbarCount, 1500); /* 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() { allCards().forEach(function (c) { patch(c); }); } setTimeout(sweep, 600); setTimeout(sweep, 2000); })(); /* GiggleGlass custom JS — QC round 2 (September 2026): wishlist parity with v2. * Appended as its own IIFE so the card patcher above stays untouched. */ (function () { 'use strict'; /* v2 shows ONE wishlist badge: the theme anchor inside * , painted as the fixed bottom-left disc, and * the theme's handler opens .modalwishlist around the widget. v3 mounts that * anchor without the `floating` attribute and its injector then claims the * tag, so the floating instance is never injected. Add it inside the same * — the theme's open handler keeps working and the nav badge stands * down on its own. */ function floatWishlistBadge() { var anchor = document.getElementById('openModalBtnwishlist'); if (!anchor || anchor.querySelector('sledge-wishlist-badge[floating]')) return false; var nav = anchor.querySelector('sledge-wishlist-badge'); if (!nav) return false; var badge = document.createElement('sledge-wishlist-badge'); badge.setAttribute('floating', ''); var theme = nav.getAttribute('theme'); if (theme) badge.setAttribute('theme', theme); anchor.appendChild(badge); return true; } /* the adapter mounts the anchor badge after this file runs */ [0, 200, 600, 1200, 2500, 5000].forEach(function (ms) { setTimeout(function () { if (!document.querySelector('#openModalBtnwishlist sledge-wishlist-badge[floating]')) floatWishlistBadge(); }, ms); }); /* v2 has no wishlist drawer — the badge opens the theme modal. Swallow v3's * flyout event before the flyout component hears it (this file runs from * initStyling, so the listener lands first). The delayed check is a fallback * for entry points that never reach the theme's own handler. */ document.addEventListener('sledge:wishlist:flyout:open', function (e) { e.stopImmediatePropagation(); setTimeout(function () { var modal = document.querySelector('.modalwishlist'); if (modal && getComputedStyle(modal).display === 'none') modal.style.display = 'block'; }, 60); }, true); /* The widget ignores `added` events and keeps the list it fetched at mount, * which is fine on the wishlist page but not here, where it lives inside the * modal on every page. Any other action falls through to a refetch, so send * a neutral one whenever the modal opens. */ function refreshWishlistData() { document.dispatchEvent(new CustomEvent('sledge:wishlist:changed', { detail: { action: 'refresh' }, bubbles: true, })); } (function watchWishlistModal() { var attach = function () { var modal = document.querySelector('.modalwishlist'); if (!modal || modal.__ggWatched) return !!modal; modal.__ggWatched = true; var wasOpen = getComputedStyle(modal).display !== 'none'; new MutationObserver(function () { var open = getComputedStyle(modal).display !== 'none'; if (open && !wasOpen) refreshWishlistData(); wasOpen = open; }).observe(modal, { attributes: true, attributeFilter: ['style', 'class'] }); return true; }; if (!attach()) [200, 800, 2000].forEach(function (ms) { setTimeout(attach, ms); }); })(); /* A guest tapping a heart gets a confirmation dialog in v2 and a toast in * v3. Swallow that one toast and open instead — the same * component the library's own confirm dialog uses. Strings match v2's * wishlist language rows. */ var LOGIN_POPUP = { title: 'Login Here', submit: 'Login', cancel: 'Cancel', message: 'Please login to save your wishlist across devices.', href: '/account/login', }; /* slotted content is light DOM, which merchant CSS cannot reach, so the body * styles ride inside the popup. v2: message 16/25.6 #677487; buttons radius * 360, 600 14/15.4, cancel #eeedef/#77757e, submit #efefef/#000. */ var LOGIN_POPUP_CSS = [ '.gg-login-message{margin:0;font-size:16px;line-height:25.6px;letter-spacing:-0.32px;color:rgb(103,116,135)}', '.gg-login-actions{display:flex;justify-content:flex-end;gap:8px}', '.gg-login-btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border:0;border-radius:360px;font-family:inherit;font-size:14px;font-weight:600;line-height:15.4px;letter-spacing:-0.28px;cursor:pointer}', '.gg-login-cancel{background:rgb(238,237,239);color:rgb(119,117,126)}', '.gg-login-submit{background:rgb(239,239,239);color:#000}', ].join(''); function openLoginPopup(message) { if (document.querySelector('sledge-popup.gg-login-popup')) return; var popup = document.createElement('sledge-popup'); popup.className = 'gg-login-popup'; popup.setAttribute('popup-title', LOGIN_POPUP.title); popup.setAttribute('max-width', '520px'); document.body.appendChild(popup); popup.innerHTML = '' + '' + ''; popup.querySelector('.gg-login-message').textContent = message || LOGIN_POPUP.message; popup.querySelector('.gg-login-cancel').textContent = LOGIN_POPUP.cancel; popup.querySelector('.gg-login-submit').textContent = LOGIN_POPUP.submit; popup.querySelector('.gg-login-cancel').addEventListener('click', function () { popup.close(); }); popup.querySelector('.gg-login-submit').addEventListener('click', function () { window.location.href = LOGIN_POPUP.href; }); popup.addEventListener('sledge-popup-close', function () { setTimeout(function () { popup.remove(); }, 350); }, { once: true }); /* the element may still be un-upgraded on the very first click */ if (typeof popup.open === 'function') popup.open(); else if (window.customElements) { customElements.whenDefined('sledge-popup').then(function () { if (popup.isConnected && typeof popup.open === 'function') popup.open(); }); } } document.addEventListener('sledge:toast:show', function (e) { var detail = e.detail || {}; var text = (detail.title || '') + ' ' + (detail.message || ''); if (!/login/i.test(text)) return; e.stopImmediatePropagation(); openLoginPopup(detail.message); }, true); })(); /* GiggleGlass custom JS — QC round 5: price slider bounds print without the * trailing .00, the way v2's locale number format does. */ (function () { 'use strict'; function stripZeroCents(root) { var labels = root.querySelectorAll('.range-value'); for (var i = 0; i < labels.length; i++) { var text = labels[i].textContent; if (text.indexOf('.00') > -1) labels[i].textContent = text.replace(/(\d)\.00\b/g, '$1'); } } function sweep(root) { var nodes = root.querySelectorAll('*'); for (var i = 0; i < nodes.length; i++) { var el = nodes[i]; if (!el.shadowRoot) continue; if (el.tagName.toLowerCase() === 'sledge-filter-range') stripZeroCents(el.shadowRoot); sweep(el.shadowRoot); } } /* the labels re-render while dragging, so keep sweeping */ setInterval(function () { sweep(document); }, 600); })(); /* GiggleGlass custom JS — QC round 5: on the PDP v2 parks the wishlist button * beside "Buy it now". The theme rule that does it targets v2 markup * (div[data-component="wishlist-button-detail"]), so v3 needs its own copy — * in document scope, which custom_css never reaches. */ (function () { 'use strict'; var SLOT = '.product-description-main-wrapper .quantity-color-section .app-section sledge-wishlist-button'; var CSS = [ SLOT + ' {', ' position: absolute;', ' right: 0;', ' bottom: 10px;', ' width: 100%;', ' max-width: 48%;', ' display: flex;', ' align-items: center;', ' justify-content: center;', '}', '@media only screen and (max-width: 1350px) {', ' ' + SLOT + ' { bottom: 20px; }', '}', '@media only screen and (max-width: 767px) {', ' ' + SLOT + ' { bottom: -60px; max-width: 100%; }', '}', /* theme cards keep v2's wishlist anchor in the flow, which pushes the * image down; pin it over the image top-right like the Sledge card */ 'article.indiv-product .reveal > sledge-wishlist-trigger {', ' position: absolute;', ' top: 8px;', ' right: 8px;', ' z-index: 3;', '}', 'article.indiv-product > [data-component="wishlist-trigger"] > sledge-wishlist-trigger {', ' position: absolute;', ' top: 23px;', ' right: 23px;', ' z-index: 3;', '}', 'article.indiv-product [data-component="wishlist-trigger"]:empty,', 'article.indiv-product [data-component-v2-inert="wishlist-trigger"]:empty {', ' display: none;', '}' ].join('\n'); if (!document.getElementById('gg-wishlist-pdp-slot')) { var style = document.createElement('style'); style.id = 'gg-wishlist-pdp-slot'; style.textContent = CSS; (document.head || document.documentElement).appendChild(style); } })();

Are you over 21?

Collection

Shop Collection by Category

LED

BRIX

Fruit

Food

Animal

Stealth

Redline

Fume

Frit Glass

Rake

Character

Linework

Fab Klein

Wig Wag

Focus V/Carta Accessories

Puffco Accessories