(() => { const BAR = '.zrx-sticky-atc-bar'; const REVIEW = '.jdgm-widget, .jdgm-rev-widg, .jdgm-form, #judgeme_product_reviews'; const HIDE_INPUT = 'zrx-hide'; const HIDE_FOOTER = 'zrx--hide-at-end'; const SELECT = '.zrx-sticky-atc-select'; const PRICE_WRAPPER = '.zrx-sticky-atc-product-price-wrapper'; const DISCOUNT_BADGE = 'ns-zrx-discount'; const POPUP_ID = 'ns-cart-confirmation'; const POPUP_ACTIVE = 'ns-cart-popup-active'; const POPUP_DURATION = 5000; let productPromise; let popupRemovalTimer; let popupLifetimeTimer; const getBar = () => document.querySelector(BAR); function updateInputState() { const active = document.activeElement; const editingReview = active?.matches('input, textarea, select, [contenteditable="true"]') && active.closest(REVIEW); const viewport = window.visualViewport; const keyboardOpen = viewport && window.innerHeight - viewport.height > 120; getBar()?.classList.toggle(HIDE_INPUT, Boolean(editingReview || keyboardOpen)); } function getProduct() { if (!productPromise) { productPromise = fetch(`${window.location.pathname}.js`, { credentials: 'same-origin', headers: { Accept: 'application/json' } }).then((response) => { if (!response.ok) { throw new Error(`Product request failed: ${response.status}`); } return response.json(); }); } return productPromise; } function getSelectedVariant(bar, product) { const selectedOptions = [...bar.querySelectorAll(SELECT)] .map((select) => select.value); return product.variants.find((variant) => variant.options.every((option, index) => option === selectedOptions[index]) ); } function renderDiscount(bar, product) { const priceWrapper = bar.querySelector(PRICE_WRAPPER); if (!priceWrapper) return; const existingBadge = priceWrapper.querySelector(`.${DISCOUNT_BADGE}`); const variant = getSelectedVariant(bar, product); const price = Number(variant?.price); const compareAtPrice = Number(variant?.compare_at_price); if (!price || !compareAtPrice || compareAtPrice <= price) { existingBadge?.remove(); return; } const discount = Math.round( ((compareAtPrice - price) / compareAtPrice) * 100 ); if (discount < 1) { existingBadge?.remove(); return; } const badgeText = `${discount}% OFF`; if (existingBadge) { if (existingBadge.textContent !== badgeText) { existingBadge.textContent = badgeText; existingBadge.setAttribute('aria-label', `${discount}% off`); } return; } const badge = document.createElement('span'); badge.className = DISCOUNT_BADGE; badge.textContent = badgeText; badge.setAttribute('aria-label', `${discount}% off`); priceWrapper.append(badge); } function renderMobileTitle(bar, product) { const short = document.querySelector('product-info[data-ns-sticky-title]')?.dataset.nsStickyTitle?.trim(); const title = bar.querySelector('.zrx-sticky-atc-product-title'); if (!short || !title) return; bar.dataset.nsFullProductTitle = product.title; const text = window.matchMedia('(max-width: 720px)').matches ? short : product.title; if (title.textContent !== text) title.textContent = text; } function initializeDiscount(bar) { if (bar.dataset.nsDiscountReady === 'true') return; bar.dataset.nsDiscountReady = 'true'; getProduct() .then((product) => { const titleViewport = window.matchMedia('(max-width: 720px)'); titleViewport.addEventListener('change', () => renderMobileTitle(bar, product)); const update = () => { [0, 100, 300].forEach((delay) => { window.setTimeout(() => { renderDiscount(bar, product); renderRestock(bar, product); renderMobileTitle(bar, product); }, delay); }); }; bar.addEventListener('change', (event) => { if (event.target.matches(SELECT)) update(); }); document.addEventListener('change', (event) => { if ( event.target.matches('input[type="radio"], select') && !event.target.closest(BAR) ) { update(); } }, true); document.addEventListener('click', (event) => { if ( event.target.closest( 'label, [role="radio"], [data-variant-id], [data-option-value]' ) && !event.target.closest(BAR) ) { update(); } }, true); [ 'variant:change', 'variant-change', 'product:variant-change', 'shopify:variant:change' ].forEach((eventName) => { document.addEventListener(eventName, update); }); let observerTimer; const priceObserver = new MutationObserver(() => { window.clearTimeout(observerTimer); observerTimer = window.setTimeout( () => { renderDiscount(bar, product); renderRestock(bar, product); renderMobileTitle(bar, product); }, 0 ); }); priceObserver.observe(bar, { childList: true, subtree: true, characterData: true }); update(); }) .catch(() => { productPromise = null; }); } function getPopupProductText(bar) { const title = (bar.dataset.nsFullProductTitle || bar.querySelector('.zrx-sticky-atc-product-title')?.textContent) ?.replace(/\s+/g, ' ') ?.trim(); const options = [...bar.querySelectorAll(SELECT)] .map((select) => select.value?.trim()) .filter(Boolean); if (title && options.length) return `${title} — ${options.join(' / ')}`; return title || 'Your selection has been added.'; } function removePopup({ immediate = false } = {}) { const popup = document.getElementById(POPUP_ID); if (!popup) return; window.clearTimeout(popupRemovalTimer); if (immediate) { popup.remove(); return; } popup.classList.add('ns-cart-popup--leaving'); popupRemovalTimer = window.setTimeout(() => popup.remove(), 220); } function createPopup(bar) { removePopup({ immediate: true }); const popup = document.createElement('section'); popup.id = POPUP_ID; popup.className = 'ns-cart-popup'; popup.setAttribute('role', 'dialog'); popup.setAttribute('aria-modal', 'false'); popup.setAttribute('aria-labelledby', `${POPUP_ID}-title`); popup.setAttribute('aria-describedby', `${POPUP_ID}-product`); const header = document.createElement('div'); header.className = 'ns-cart-popup__header'; const heading = document.createElement('h2'); heading.id = `${POPUP_ID}-title`; heading.className = 'ns-cart-popup__title'; heading.innerHTML = ' Added to cart'; const close = document.createElement('button'); close.className = 'ns-cart-popup__close'; close.type = 'button'; close.setAttribute('aria-label', 'Close cart confirmation'); close.innerHTML = ''; close.addEventListener('click', () => { removePopup(); }); const product = document.createElement('p'); product.id = `${POPUP_ID}-product`; product.className = 'ns-cart-popup__product'; product.textContent = getPopupProductText(bar); const actions = document.createElement('div'); actions.className = 'ns-cart-popup__actions'; const cart = document.createElement('a'); cart.className = 'ns-cart-popup__button ns-cart-popup__button--cart'; cart.href = '/cart'; cart.textContent = 'View cart'; const checkout = document.createElement('a'); checkout.className = 'ns-cart-popup__button ns-cart-popup__button--checkout'; checkout.href = '/checkout'; checkout.textContent = 'Checkout'; header.append(heading, close); actions.append(cart, checkout); popup.append(header, product, actions); document.body.append(popup); requestAnimationFrame(() => { popup.classList.add('ns-cart-popup--visible'); }); } function initializeConfirmationPopup(bar) { if (bar.dataset.nsCartPopupReady === 'true') return; bar.dataset.nsCartPopupReady = 'true'; document.addEventListener('zrx-satc-item-added', () => { const currentBar = getBar() || bar; window.clearTimeout(popupLifetimeTimer); removePopup({ immediate: true }); currentBar.classList.add(POPUP_ACTIVE); createPopup(currentBar); popupLifetimeTimer = window.setTimeout(() => { currentBar.classList.remove(POPUP_ACTIVE); removePopup(); }, POPUP_DURATION); }); document.addEventListener('keydown', (event) => { if (event.key === 'Escape' && document.getElementById(POPUP_ID)) { removePopup(); } }); } function nsRestockId(value) { if (typeof value === 'number' && !Number.isSafeInteger(value)) throw Error('unsafe_variant_id'); const id = String(value ?? ''); if (!/^[1-9][0-9]{0,19}$/.test(id)) throw Error('invalid_variant_id'); return id; } function nsResolveRestockVariant(product, options, explicitIds = []) { if (!Array.isArray(product?.variants) || !Array.isArray(options)) return null; const variants = product.variants; const matches = options.length ? variants.filter(v => Array.isArray(v.options) && v.options.length === options.length && v.options.every((option, index) => option === options[index])) : variants.length === 1 ? variants : []; if (matches.length !== 1) return null; try { const id = nsRestockId(matches[0].id); if (explicitIds.some(value => nsRestockId(value) !== id)) return null; return { ...matches[0], id }; } catch { return null; } } function nsRestockPayload(selection, current, email, consent, country, locale) { if (!selection || !current || selection.id !== current.id || current.available !== false) throw Error('selection_changed'); if (consent !== true) throw Error('consent_required'); email = String(email).trim().toLowerCase(); if (email.length > 254 || !/^[^\s@<>]+@[^\s@<>]+[.][^\s@<>]+$/.test(email) || /[\x00-\x1f\x7f]/.test(email)) throw Error('invalid_email'); if (!/^[A-Z]{2}$/.test(country || '')) throw Error('market_required'); return { email, variant_id: nsRestockId(selection.id), consent_version: 'variant-restock-single-v1', market_country: country, locale: locale === 'es' ? 'es' : 'en' }; } function nsRestockEndpoint(value) { const url = new URL(value); if (url.protocol !== 'https:' || url.hostname !== 'hook.us2.make.com' || url.port || url.username || url.password || url.search || url.hash || !/^\/[A-Za-z0-9_-]+$/.test(url.pathname)) throw Error('invalid_receiver'); return url.href; } function nsRestockReceipt(body, expectedVariant) { if (!body || typeof body !== 'object' || typeof body.variant_id !== 'string' || body.variant_id !== nsRestockId(expectedVariant) || !['subscribed', 'pending_confirmation'].includes(body.status)) throw Error('subscription_unconfirmed'); return body.status; } function nsRestockQueueReceipt(text) { // Make's documented default HTTP200/Accepted means QUEUED, not subscribed. if (typeof text !== 'string' || text.trim() !== 'Accepted') throw Error('queue_unconfirmed'); return 'queued'; } // Draft integration inside the existing Zoorix closure. No receiver is embedded. // Requires separately approved, validated backend configuration before activation. const NS_RESTOCK_CONFIG = Object.freeze({ ...{"enabled":true,"endpoint":"https://hook.us2.make.com/j3wowt3sghw74meng1m9jdaese1ey558","responseMode":"make-queue","country":"US"}, ...(window.NS_RESTOCK_CONFIG || {}) }); let nsRestockDialog, nsRestockSelection, nsRestockProduct, nsRestockBusy = false; let nsRestockCloseTimer, nsRestockSession = 0; let nsRestockOpenedAt = 0; const nsRestockResizeHandlers = new WeakMap(); const nsRestockOwners = new WeakMap(); const nsRestockSpanish = document.documentElement.lang.toLowerCase().startsWith('es'); const nsRestockText = (en, es) => nsRestockSpanish ? es : en; function nsRestockCurrent(product) { const bar = getBar(); if (!bar || !bar.isConnected) return null; const options = [...bar.querySelectorAll(SELECT)].map(select => select.value); const explicit = [...bar.querySelectorAll('input[name="id"], select[name="id"]')] .map(input => input.value).filter(Boolean); return nsResolveRestockVariant(product, options, explicit); } function nsRestockMessage(message, error = false) { const output = nsRestockDialog?.querySelector('[data-ns-restock-status]'); if (output) { output.textContent = message; output.dataset.error = String(error); } } function nsRestockSyncControls(host, stock, bar) { if (typeof window.getComputedStyle !== 'function') return; const native = window.getComputedStyle(stock); const reference = bar.querySelector(SELECT); const height = reference?.getBoundingClientRect().height || 40; const values = { '--ns-restock-control-height': Math.round(height * 100) / 100 + 'px', '--ns-restock-font-family': native.fontFamily, '--ns-restock-font-size': native.fontSize, '--ns-restock-font-weight': native.fontWeight, '--ns-restock-letter-spacing': native.letterSpacing, '--ns-restock-box-extra': [native.paddingLeft,native.paddingRight,native.borderLeftWidth,native.borderRightWidth] .reduce((sum,value)=>sum+(Number.parseFloat(value)||0),0)+'px' }; for (const [key, value] of Object.entries(values)) { if (host.style.getPropertyValue(key) !== value) host.style.setProperty(key, value); } } function nsRestockSetImage(product, variant) { const image = nsRestockDialog.querySelector('.ns-buy-quantity__image'); const source = variant.featured_image?.src || product.featured_image || product.images?.[0]; image.hidden = true; image.removeAttribute('src'); if (typeof source !== 'string' || !source) return; try { const url = new URL(source, window.location.origin); if (url.protocol !== 'https:' || url.username || url.password || !['cdn.shopify.com', window.location.hostname].includes(url.hostname)) return; image.src = url.href; image.alt = product.title || ''; image.hidden = false; } catch { /* A missing/invalid image must not block the form. */ } } function nsRestockInvalidate(product) { if (!nsRestockDialog?.open || !nsRestockSelection) return; const current = nsRestockCurrent(product); if (current?.id === nsRestockSelection.id && current.available === false) return; nsRestockSelection = null; nsRestockDialog.querySelector('button[type="submit"]').disabled = true; nsRestockMessage(nsRestockText('Your selection changed. Close this window and choose Notify Me again.', 'Tu selección cambió. Cierra esta ventana y vuelve a elegir Avisarme.'), true); } function nsCreateRestockDialog() { if (nsRestockDialog) return; const dialog = document.createElement('dialog'); dialog.className = 'ns-buy-quantity ns-restock-dialog'; dialog.setAttribute('aria-labelledby', 'ns-restock-title'); dialog.setAttribute('aria-describedby', 'ns-restock-selection'); const node = (tag, className, text) => { const el = document.createElement(tag); el.className = className; if (text) el.textContent = text; return el; }; const panel = node('div', 'ns-popup-panel'); const close = node('button', 'ns-buy-quantity__close'); close.innerHTML = ''; close.type = 'button'; close.setAttribute('aria-label', nsRestockText('Close', 'Cerrar')); close.addEventListener('click', () => dialog.close()); const title = node('h2', '', nsRestockText('Notify Me', 'Avisarme')); title.id = 'ns-restock-title'; const image = node('img', 'ns-buy-quantity__image'); image.width = 88; image.height = 88; image.alt = ''; image.hidden = true; image.addEventListener('error', () => { image.hidden = true; }); const selection = node('p', 'ns-buy-quantity__product ns-restock-dialog__selection'); selection.id = 'ns-restock-selection'; const form = node('form', 'ns-restock-dialog__form'); const label = node('label', 'ns-form-label', 'Email'); label.htmlFor = 'ns-restock-email'; const email = node('input', 'ns-form-input'); Object.assign(email, { id: 'ns-restock-email', name: 'email', type: 'email', required: true, maxLength: 254, autocomplete: 'email' }); email.inputMode = 'email'; const trap = node('input', 'ns-restock-dialog__trap'); Object.assign(trap, {name:'website',type:'text',tabIndex:-1,autocomplete:'off'}); trap.hidden = true; trap.setAttribute('aria-hidden', 'true'); const consentLabel = node('label', 'ns-restock-dialog__consent'); const consent = node('input', ''); Object.assign(consent, { type: 'checkbox', name: 'restock_consent', required: true }); consentLabel.append(consent, document.createTextNode(nsRestockText( 'Email me when this product is back in stock.', 'Avísame por email cuando este producto vuelva a estar disponible.'))); const status = node('p', 'ns-restock-dialog__status'); status.dataset.nsRestockStatus = ''; status.setAttribute('role', 'status'); status.setAttribute('aria-live', 'polite'); const submit = node('button', 'ns-buy-quantity__checkout ns-restock-dialog__submit', nsRestockText('NOTIFY ME', 'AVISARME')); submit.type = 'submit'; form.append(label, email, trap, consentLabel, submit); panel.append(close, title, image, selection, form, status); dialog.append(panel); document.body.append(dialog); dialog.addEventListener('click', event => { if (event.target === dialog) { const r = dialog.getBoundingClientRect(); if (event.clientX < r.left || event.clientX > r.right || event.clientY < r.top || event.clientY > r.bottom) dialog.close(); }}); dialog.addEventListener('close', () => { window.nsPopupViewport?.release(dialog); nsRestockSelection = null; nsRestockSession++; window.clearTimeout(nsRestockCloseTimer); }); form.addEventListener('submit', async event => { event.preventDefault(); if (nsRestockBusy || !form.reportValidity()) return; // Enable only with the installed single-opt-in receiver and its origin/quota guards. if (NS_RESTOCK_CONFIG.enabled !== true) { nsRestockMessage(nsRestockText('Stock alerts are not enabled yet.', 'Los avisos aún no están habilitados.'), true); return; } const frozen = nsRestockSelection; const session = nsRestockSession; nsRestockBusy = true; submit.disabled = true; form.setAttribute('aria-busy', 'true'); let committed = false; try { const endpoint = nsRestockEndpoint(NS_RESTOCK_CONFIG.endpoint); // Legacy webhook field name; a random request nonce, NOT a CAPTCHA/auth token. const challenge = window.crypto.randomUUID(); // Re-read immediately before submission; never substitute another variant. if (!frozen || frozen !== nsRestockSelection || !dialog.open) throw Error('selection_changed'); const payload = nsRestockPayload(frozen, nsRestockCurrent(nsRestockProduct), email.value, consent.checked, window.Shopify?.country || NS_RESTOCK_CONFIG.country, nsRestockSpanish ? 'es' : 'en'); payload.challenge = challenge; payload.website = trap.value; payload.form_started_at = String(nsRestockOpenedAt); committed = true; const response = await fetch(endpoint, { method: 'POST', credentials: 'omit', redirect: 'error', body: new URLSearchParams(payload), signal: AbortSignal.timeout(15000) }); if (!response.ok) throw Error('receiver_rejected'); const receipt = NS_RESTOCK_CONFIG.responseMode === 'make-queue' ? nsRestockQueueReceipt(await response.text()) : nsRestockReceipt(await response.json(), frozen.id); if (!dialog.open || nsRestockSelection !== frozen || nsRestockSession !== session) return; nsRestockSelection = null; form.hidden = true; title.textContent = nsRestockText('Thank you!', '¡Gracias!'); nsRestockMessage(receipt === 'queued' ? nsRestockText('Your stock-alert request has been received.', 'Hemos recibido tu solicitud de aviso.') : receipt === 'subscribed' ? nsRestockText("We'll notify you when this product is back in stock.", 'Te avisaremos cuando este producto vuelva a estar disponible.') : nsRestockText('Please confirm your email to activate your stock alert.', 'Confirma tu email para activar tu aviso de disponibilidad.')); window.clearTimeout(nsRestockCloseTimer); nsRestockCloseTimer = window.setTimeout(() => { if (dialog.open && nsRestockSession === session) dialog.close(); }, 3000); } catch (error) { if (error.message === 'selection_changed') nsRestockSelection = null; nsRestockMessage(committed ? nsRestockText('Delivery could not be confirmed. Check your inbox before trying again.', 'No pudimos confirmar la entrega. Revisa tu correo antes de volver a intentarlo.') : nsRestockText('The request was not sent. Check your selection and try again.', 'La solicitud no se envió. Comprueba tu selección e inténtalo de nuevo.'), true); } finally { nsRestockBusy = false; form.removeAttribute('aria-busy'); submit.disabled = !nsRestockSelection; } }); nsRestockDialog = dialog; } function renderRestock(bar, product) { if (!bar.isConnected || getBar() !== bar) return; const variant = nsRestockCurrent(product); const eligible = variant?.available === false; const stock = bar.querySelector('.zrx-sticky-atc-oos-message'); if (!eligible || !stock) { nsRestoreStockLayout(bar); nsRestockInvalidate(product); return; } let button = bar.querySelector('.ns-restock-actions > .ns-restock-trigger'); if (button && nsRestockOwners.get(button.parentElement)?.stock !== stock) { nsRestoreStockLayout(bar); button = null; } if (!button && eligible) { // Never reparent a framework-owned Zoorix node. Its renderer must be able to // remove/recreate Out of Stock in the original parent during variant changes. nsRestoreStockLayout(bar); const host = document.createElement('span'); host.className = 'ns-restock-actions'; stock.before(host); button = document.createElement('button'); button.type = 'button'; button.className = 'ns-btn ns-btn-primary ns-restock-trigger'; button.textContent = nsRestockText('NOTIFY ME', 'AVISARME'); button.addEventListener('click', () => { if (nsRestockBusy || nsRestockDialog?.open) return; const current = nsRestockCurrent(product); if (!current || current.available !== false) return; nsCreateRestockDialog(); nsRestockProduct = product; nsRestockSession++; window.clearTimeout(nsRestockCloseTimer); nsRestockSelection = Object.freeze({ id: current.id }); nsRestockOpenedAt = Date.now(); const form = nsRestockDialog.querySelector('form'); form.hidden = false; form.reset(); nsRestockDialog.querySelector('#ns-restock-title').textContent = nsRestockText('Notify Me', 'Avisarme'); const options = current.options?.filter(option => option !== 'Default Title') || []; nsRestockDialog.querySelector('#ns-restock-selection').textContent = [product.title, ...options].join(' · '); nsRestockSetImage(product, current); const enabled = NS_RESTOCK_CONFIG.enabled === true; nsRestockDialog.querySelector('button[type="submit"]').disabled = nsRestockBusy || !enabled; nsRestockMessage(enabled ? '' : nsRestockText('Preview only. Stock alerts are not enabled yet.', 'Vista previa. Los avisos aún no están habilitados.')); nsRestockDialog.showModal(); window.nsPopupViewport?.lock(nsRestockDialog); }); host.append(button); const parent = stock.parentElement; parent.classList.add('ns-restock-layout'); stock.classList.add('ns-restock-stock'); nsRestockOwners.set(host, {parent,stock}); const resize = () => { if (host.isConnected) nsRestockSyncControls(parent, stock, bar); }; window.addEventListener?.('resize', resize, { passive: true }); nsRestockResizeHandlers.set(host, resize); } if (button) { nsRestockSyncControls(button.parentElement.parentElement, stock, bar); if (button.hidden === eligible) button.hidden = !eligible; const id = eligible ? variant.id : ''; if (button.dataset.variantId !== id) button.dataset.variantId = id; } nsRestockInvalidate(product); } function nsRestoreStockLayout(bar) { bar.querySelectorAll('.ns-restock-actions').forEach(host => { const resize = nsRestockResizeHandlers.get(host); if (resize) window.removeEventListener?.('resize', resize); nsRestockResizeHandlers.delete(host); const owner = nsRestockOwners.get(host); if (owner) { owner.stock.classList.remove('ns-restock-stock'); owner.parent.classList.remove('ns-restock-layout'); for (const key of ['height','font-family','font-size','font-weight','letter-spacing','box-extra']) { owner.parent.style.removeProperty?.('--ns-restock-'+(key==='height'?'control-height':key)); } nsRestockOwners.delete(host); } host.remove(); }); } function initialize() { const bar = getBar(); if (!bar) return false; document.addEventListener('focusin', updateInputState, true); document.addEventListener('focusout', () => setTimeout(updateInputState), true); window.visualViewport?.addEventListener('resize', updateInputState); const footer = document.querySelector( 'footer, .shopify-section-footer, #Footer, .site-footer' ); if (footer && 'IntersectionObserver' in window) { new IntersectionObserver(([entry]) => { getBar()?.classList.toggle(HIDE_FOOTER, entry.isIntersecting); }, { threshold: 0, rootMargin: '0px 0px -10% 0px' }).observe(footer); } initializeDiscount(bar); initializeConfirmationPopup(bar); updateInputState(); return true; } if (/\/products\/[^/]+\/?$/.test(window.location.pathname)) { getProduct().catch(() => { productPromise = null; }); } if (initialize()) return; const waitForBar = new MutationObserver(() => { if (initialize()) waitForBar.disconnect(); }); waitForBar.observe(document.documentElement, { childList: true, subtree: true }); })();

Idioma

País/región

Galería de compra