(function () { var slabxVariantSyncInitialized = false; var slabxStickyAtcInitialized = false; function createSlabxImageModal() { if (document.querySelector('.slabx-image-modal')) return; var modal = document.createElement('div'); modal.className = 'slabx-image-modal'; modal.innerHTML = '

' + '' + ' Expanded product image

' + '

'; document.body.appendChild(modal); } function getLargeShopifyImage(src) { if (!src) return src; var cleanSrc = src; if (cleanSrc.indexOf('//') === 0) { cleanSrc = window.location.protocol + cleanSrc; } cleanSrc = cleanSrc.replace(/_(\d+)x(\d+)?(?=\.)/, ''); cleanSrc = cleanSrc.replace(/_(\d+)x(?=\.)/, ''); return cleanSrc; } function openSlabxImageModal(src, alt) { createSlabxImageModal(); var modal = document.querySelector('.slabx-image-modal'); if (!modal) return; var modalImg = modal.querySelector('img'); if (!modalImg) return; modalImg.src = getLargeShopifyImage(src); modalImg.alt = alt || 'Expanded product image'; modal.classList.add('is-active'); document.documentElement.classList.add('slabx-modal-open'); document.body.classList.add('slabx-modal-open'); } function closeSlabxImageModal() { var modal = document.querySelector('.slabx-image-modal'); if (!modal) return; var modalImg = modal.querySelector('img'); modal.classList.remove('is-active'); if (modalImg) { modalImg.src = ''; } document.documentElement.classList.remove('slabx-modal-open'); document.body.classList.remove('slabx-modal-open'); } function handleZoomWrapperClick(event) { var wrapper = event.currentTarget; if (!wrapper) return; var targetImage = wrapper.querySelector('img.moonbundle-variant-image'); if (!targetImage) return; event.preventDefault(); event.stopPropagation(); if (event.stopImmediatePropagation) { event.stopImmediatePropagation(); } openSlabxImageModal(targetImage.src, targetImage.alt); } function addZoomIcons() { var images = document.querySelectorAll('img.moonbundle-variant-image'); images.forEach(function (img) { if (img.closest('.slabx-thumb-zoom-wrap')) return; if (!img.parentNode) return; var wrapper = document.createElement('span'); wrapper.className = 'slabx-thumb-zoom-wrap'; wrapper.setAttribute('role', 'button'); wrapper.setAttribute('tabindex', '0'); wrapper.setAttribute('aria-label', 'View larger image'); var icon = document.createElement('span'); icon.className = 'slabx-thumb-zoom-icon'; icon.setAttribute('aria-hidden', 'true'); img.parentNode.insertBefore(wrapper, img); wrapper.appendChild(img); wrapper.appendChild(icon); wrapper.addEventListener('click', handleZoomWrapperClick, true); wrapper.addEventListener('keydown', function (event) { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); handleZoomWrapperClick({ currentTarget: wrapper, preventDefault: function () {}, stopPropagation: function () {}, stopImmediatePropagation: function () {} }); } }); }); } function normalizeText(value) { return String(value || '') .toLowerCase() .replace(/\s+/g, '') .replace(/[^a-z0-9]/g, ''); } function isInsideMoonBundle(element) { if (!element || !element.closest) return false; return !!element.closest( '[class*="moonbundle"], [id*="moonbundle"], [class*="MoonBundle"], [id*="MoonBundle"]' ); } function getMainProductForms() { return Array.prototype.slice.call( document.querySelectorAll('form[action*="/cart/add"]') ).filter(function (form) { return !isInsideMoonBundle(form); }); } function triggerNativeChange(element) { if (!element) return; element.dispatchEvent(new Event('input', { bubbles: true })); element.dispatchEvent(new Event('change', { bubbles: true })); } function updateMainProductOption(colorValue) { if (!colorValue) return false; var normalizedColor = normalizeText(colorValue); var updated = false; var forms = getMainProductForms(); forms.forEach(function (form) { var selects = form.querySelectorAll('select'); selects.forEach(function (select) { var matchingOption = Array.prototype.slice.call(select.options).find(function (option) { return normalizeText(option.value) === normalizedColor || normalizeText(option.textContent) === normalizedColor; }); if (matchingOption) { select.value = matchingOption.value; triggerNativeChange(select); updated = true; } }); var radios = form.querySelectorAll('input[type="radio"]'); radios.forEach(function (radio) { var radioLabel = null; if (radio.id && window.CSS && CSS.escape) { radioLabel = document.querySelector('label[for="' + CSS.escape(radio.id) + '"]'); } else if (radio.id) { radioLabel = document.querySelector('label[for="' + radio.id + '"]'); } var radioText = radioLabel ? radioLabel.textContent : radio.value; if ( normalizeText(radio.value) === normalizedColor || normalizeText(radioText) === normalizedColor ) { radio.checked = true; radio.click(); triggerNativeChange(radio); updated = true; } }); }); return updated; } function findVariantFromProductJson(colorValue) { var normalizedColor = normalizeText(colorValue); var jsonScripts = document.querySelectorAll( 'script[type="application/json"], script[data-product-json], script[id*="ProductJson"], script[id*="product-json"]' ); for (var i = 0; i < jsonScripts.length; i++) { var script = jsonScripts[i]; var text = script.textContent || ''; if (!text || text.indexOf('variants') === -1) continue; try { var data = JSON.parse(text); var product = data.product || data; if (!product || !Array.isArray(product.variants)) continue; var matchedVariant = product.variants.find(function (variant) { var values = [ variant.title, variant.public_title, variant.option1, variant.option2, variant.option3 ]; return values.some(function (value) { var normalizedValue = normalizeText(value); if (!normalizedValue) return false; return normalizedValue.indexOf(normalizedColor) !== -1 || normalizedColor.indexOf(normalizedValue) !== -1; }); }); if (matchedVariant) return matchedVariant; } catch (error) {} } return null; } function updateMainVariantIdInput(variant) { if (!variant || !variant.id) return; var forms = getMainProductForms(); forms.forEach(function (form) { var idInput = form.querySelector('input[name="id"], select[name="id"]'); if (idInput) { idInput.value = variant.id; triggerNativeChange(idInput); } }); if (window.history && window.history.replaceState) { var url = new URL(window.location.href); url.searchParams.set('variant', variant.id); window.history.replaceState({}, '', url.toString()); } } function getVariantImageSrc(variant) { if (!variant) return null; if (variant.featured_image && variant.featured_image.src) { return variant.featured_image.src; } if ( variant.featured_media && variant.featured_media.preview_image && variant.featured_media.preview_image.src ) { return variant.featured_media.preview_image.src; } if (variant.image) { if (typeof variant.image === 'string') return variant.image; if (variant.image.src) return variant.image.src; } return null; } function updateMainProductImageBySrc(src, alt) { if (!src) return false; var largeSrc = getLargeShopifyImage(src); var selectors = [ 'media-gallery .product__media-item.is-active img', 'media-gallery .product__media-item:first-child img', '.product__media-item.is-active img', '.product__media-item:first-child img', '.product__media img' ]; var mainImage = null; for (var i = 0; i < selectors.length; i++) { mainImage = document.querySelector(selectors[i]); if (mainImage) break; } if (!mainImage) return false; mainImage.src = largeSrc; mainImage.removeAttribute('srcset'); mainImage.removeAttribute('sizes'); if (alt) { mainImage.alt = alt; } var links = document.querySelectorAll( 'media-gallery .product__media-item.is-active a, ' + 'media-gallery .product__media-item:first-child a, ' + '.product__media-item.is-active a, ' + '.product__media-item:first-child a, ' + '.product__media a' ); links.forEach(function (link) { link.href = largeSrc; }); return true; } function clickMatchingProductThumbnail(colorValue) { var normalizedColor = normalizeText(colorValue); var thumbnailButtons = document.querySelectorAll( 'media-gallery button, media-gallery a, .product__media-wrapper button, .product__media-wrapper a, .thumbnail-list button, .thumbnail-list a' ); for (var i = 0; i < thumbnailButtons.length; i++) { var item = thumbnailButtons[i]; var img = item.querySelector('img'); if (!img) continue; var textToMatch = [ img.alt, img.src, item.getAttribute('aria-label'), item.getAttribute('data-media-id'), item.textContent ].join(' '); if (normalizeText(textToMatch).indexOf(normalizedColor) !== -1) { item.click(); return true; } } return false; } function syncProductImageFromMoonBundleSelect(select) { if (!select || !isInsideMoonBundle(select)) return; var colorValue = select.value; if (!colorValue) return; updateMainProductOption(colorValue); var variant = findVariantFromProductJson(colorValue); if (variant) { updateMainVariantIdInput(variant); var imageSrc = getVariantImageSrc(variant); if (imageSrc) { updateMainProductImageBySrc(imageSrc, variant.title || colorValue); return; } } clickMatchingProductThumbnail(colorValue); } function initMoonBundleVariantSync() { if (slabxVariantSyncInitialized) return; slabxVariantSyncInitialized = true; document.addEventListener('change', function (event) { var select = event.target.closest('select'); if (!select || !isInsideMoonBundle(select)) return; setTimeout(function () { syncProductImageFromMoonBundleSelect(select); }, 80); }); } /* Sticky Add to Cart - isolated from Moon Bundle functionality */ function addSlabxStickyAtcStyles() { if (document.getElementById('slabx-sticky-atc-styles')) return; var style = document.createElement('style'); style.id = 'slabx-sticky-atc-styles'; style.textContent = '.slabx-sticky-atc {' + 'position: fixed;' + 'left: 0;' + 'right: 0;' + 'bottom: 0;' + 'z-index: 40;' + 'padding: 10px 12px calc(10px + env(safe-area-inset-bottom));' + 'background: rgba(255,255,255,0.97);' + 'box-shadow: 0 -8px 24px rgba(0,0,0,0.12);' + 'transform: translateY(120%);' + 'transition: transform 180ms ease;' + 'pointer-events: none;' + '}' + '.slabx-sticky-atc.is-visible {' + 'transform: translateY(0);' + 'pointer-events: auto;' + '}' + '.slabx-sticky-atc.is-hidden {' + 'display: none !important;' + '}' + '.slabx-sticky-atc__inner {' + 'display: flex;' + 'align-items: center;' + 'gap: 10px;' + 'max-width: 720px;' + 'margin: 0 auto;' + '}' + '.slabx-sticky-atc__text {' + 'flex: 1;' + 'min-width: 0;' + 'line-height: 1.15;' + '}' + '.slabx-sticky-atc__title {' + 'font-size: 13px;' + 'font-weight: 800;' + 'letter-spacing: 0.02em;' + 'color: #111;' + 'white-space: nowrap;' + 'overflow: hidden;' + 'text-overflow: ellipsis;' + '}' + '.slabx-sticky-atc__sub {' + 'font-size: 11px;' + 'font-weight: 600;' + 'color: #555;' + 'margin-top: 2px;' + 'white-space: nowrap;' + 'overflow: hidden;' + 'text-overflow: ellipsis;' + '}' + '.slabx-sticky-atc__button {' + 'appearance: none;' + '-webkit-appearance: none;' + 'border: 0;' + 'border-radius: 4px;' + 'background: #000;' + 'color: #fff;' + 'font-size: 13px;' + 'font-weight: 800;' + 'letter-spacing: 0.04em;' + 'text-transform: uppercase;' + 'padding: 14px 18px;' + 'min-width: 145px;' + 'cursor: pointer;' + '}' + '.slabx-sticky-atc__button:disabled {' + 'opacity: 0.55;' + 'cursor: not-allowed;' + '}' + '@media (min-width: 769px) {' + '.slabx-sticky-atc {' + 'display: none !important;' + '}' + '}'; document.head.appendChild(style); } function getVisibleMainAtcButton() { var selectors = [ 'form[action*="/cart/add"] button[type="submit"]', 'form[action*="/cart/add"] input[type="submit"]', 'button[name="add"]', 'button[type="submit"][name="add"]', '.product-form__submit', '.product-form button[type="submit"]' ]; for (var i = 0; i < selectors.length; i++) { var buttons = document.querySelectorAll(selectors[i]); for (var j = 0; j < buttons.length; j++) { var button = buttons[j]; if (isInsideMoonBundle(button)) continue; if (button.closest('.slabx-sticky-atc')) continue; var rect = button.getBoundingClientRect(); var styles = window.getComputedStyle(button); if ( rect.width > 0 && rect.height > 0 && styles.display !== 'none' && styles.visibility !== 'hidden' ) { return button; } } } return null; } function isCartDrawerOpen() { var drawerSelectors = [ 'cart-drawer.active', 'cart-drawer.is-active', 'cart-drawer[open]', '#CartDrawer.active', '#CartDrawer.is-active', '.cart-drawer.active', '.cart-drawer.is-active', '.drawer.active', '.drawer.is-active', '[aria-modal="true"]' ]; return drawerSelectors.some(function (selector) { var element = document.querySelector(selector); if (!element) return false; var rect = element.getBoundingClientRect(); var styles = window.getComputedStyle(element); return ( rect.width > 0 && rect.height > 0 && styles.display !== 'none' && styles.visibility !== 'hidden' ); }); } function isProductPageWithAtc() { if (window.location.pathname.indexOf('/cart') !== -1) return false; if (window.location.pathname.indexOf('/checkout') !== -1) return false; return !!getVisibleMainAtcButton(); } function getProductTitleText() { var title = document.querySelector('h1') || document.querySelector('.product__title') || document.querySelector('[class*="product-title"]'); var text = title ? title.textContent.trim() : ''; return text || 'PSA Slab Guard'; } function updateStickyAtcState(sticky, stickyButton, forceVisible) { var mainButton = getVisibleMainAtcButton(); if (!mainButton || isCartDrawerOpen()) { sticky.classList.add('is-hidden'); sticky.classList.remove('is-visible'); return; } sticky.classList.remove('is-hidden'); var disabled = mainButton.disabled || mainButton.getAttribute('aria-disabled') === 'true'; stickyButton.disabled = disabled; stickyButton.textContent = disabled ? 'Sold Out' : 'Add To Cart'; if (forceVisible) { sticky.classList.add('is-visible'); } else { sticky.classList.remove('is-visible'); } } function initSlabxStickyAtc() { if (slabxStickyAtcInitialized) return; if (!isProductPageWithAtc()) return; slabxStickyAtcInitialized = true; addSlabxStickyAtcStyles(); var sticky = document.createElement('div'); sticky.className = 'slabx-sticky-atc'; sticky.innerHTML = '

' + '

PSA-ready fit • Ships from California

' + '

' + '' + '

'; document.body.appendChild(sticky); var stickyTitle = sticky.querySelector('.slabx-sticky-atc__title'); var stickyButton = sticky.querySelector('.slabx-sticky-atc__button'); if (stickyTitle) { stickyTitle.textContent = getProductTitleText(); } stickyButton.addEventListener('click', function () { var mainButton = getVisibleMainAtcButton(); if (!mainButton || stickyButton.disabled) return; mainButton.click(); }); function isMainAtcFullyOutOfView() { var currentMainButton = getVisibleMainAtcButton(); if (!currentMainButton) return false; var rect = currentMainButton.getBoundingClientRect(); /* Only show sticky ATC when the real ATC button is fully out of view. This prevents both buttons from appearing in the same viewport. */ return rect.bottom < 0 || rect.top > window.innerHeight; } function refreshStickyAtcVisibility() { updateStickyAtcState(sticky, stickyButton, isMainAtcFullyOutOfView()); } window.addEventListener('scroll', refreshStickyAtcVisibility, { passive: true }); window.addEventListener('resize', refreshStickyAtcVisibility); document.addEventListener('change', function () { setTimeout(refreshStickyAtcVisibility, 100); }); document.addEventListener('click', function () { setTimeout(refreshStickyAtcVisibility, 150); }); setTimeout(refreshStickyAtcVisibility, 250); } function initSlabxZoom() { createSlabxImageModal(); addZoomIcons(); initMoonBundleVariantSync(); initSlabxStickyAtc(); } document.addEventListener('click', function (event) { if ( event.target.classList.contains('slabx-image-modal') || event.target.classList.contains('slabx-image-modal__close') ) { event.preventDefault(); closeSlabxImageModal(); } }); document.addEventListener('keydown', function (event) { if (event.key === 'Escape') { closeSlabxImageModal(); } }); initSlabxZoom(); var observer = new MutationObserver(function () { addZoomIcons(); if (!slabxStickyAtcInitialized) { initSlabxStickyAtc(); } }); observer.observe(document.body, { childList: true, subtree: true }); })();

Contact information