/* ============================================================ OCARYA — Contador del cajón de carrito (Moon Bundles) · v3 Pegar en: Moon Bundles > Cesta > JavaScript personalizado Pestaña: "All carts" ------------------------------------------------------------ v3: paleta de marca (blanco, negro y #A4B8AD). El estado urgente ya no usa rojo: escala por contraste, fondo verde macizo y cifras en negativo. ============================================================ */ (function () { 'use strict'; /* ---------- 1. CONFIGURACIÓN ---------- */ var CFG = { label: 'Guardamos tu carrito', unitM: 'min', unitS: 'seg', totalSeconds: 0, // 0 = detecta sola la duración urgentAt: 120, // segundos para estado urgente /* --- paleta de marca --- */ ink: '#000000', // texto sage: '#A4B8AD', // acento: icono, chip de cifras, barra bg: 'rgba(164,184,173,.16)', // fondo del bloque border: 'rgba(0,0,0,.10)', // hairline track: 'rgba(0,0,0,.10)', // canal de la barra /* --- estado urgente: mismo verde, más superficie --- */ urgentInk: '#000000', urgentSage: '#000000', // icono, chip y barra pasan a negro urgentBg: '#A4B8AD', // el fondo se satura urgentBorder: 'rgba(0,0,0,.28)', urgentTrack: 'rgba(0,0,0,.20)' }; var DEBUG = !!window.OC_TIMER_DEBUG; function log() { if (!DEBUG) return; var a = ['[oc-timer]'].concat([].slice.call(arguments)); console.log.apply(console, a); } /* ---------- 2. ESTILOS ---------- */ var CSS = [ /* host: el elemento original, reseteado para que quepa */ '.oc-timer-host{', ' display:block!important;box-sizing:border-box!important;', ' width:auto!important;max-width:100%!important;min-width:0!important;', ' flex:1 1 auto!important;height:auto!important;', ' overflow:visible!important;text-align:left!important;', ' line-height:normal!important;white-space:normal!important;', '}', /* texto original: sigue vivo en el DOM, invisible */ '.oc-timer-src{', ' position:absolute!important;left:0!important;top:0!important;', ' width:1px!important;height:1px!important;padding:0!important;', ' margin:0!important;overflow:hidden!important;opacity:0!important;', ' pointer-events:none!important;clip-path:inset(50%)!important;', '}', '#oc-timer,#oc-timer *{box-sizing:border-box;}', '#oc-timer{', ' display:block;width:auto;max-width:100%;', ' margin:8px 0 10px;padding:10px 12px 8px;', ' background:' + CFG.bg + ';border:1px solid ' + CFG.border + ';', ' border-radius:14px;overflow:hidden;', ' font-family:inherit;text-align:left;', ' animation:oc-in .35s ease both;', '}', '#oc-timer .oc-row{display:flex;align-items:center;gap:9px;', ' flex-wrap:nowrap;min-width:0;width:100%;}', '#oc-timer .oc-ico{flex:0 0 auto;width:16px;height:16px;color:' + CFG.ink + ';}', '#oc-timer .oc-ico svg{display:block;width:100%;height:100%;}', '#oc-timer .oc-hand{transform-origin:12px 12px;animation:oc-tick 60s steps(60) infinite;}', '#oc-timer .oc-lbl{', ' flex:1 1 auto;min-width:0;font-size:11px;font-weight:600;', ' letter-spacing:.06em;text-transform:uppercase;color:' + CFG.ink + ';', ' opacity:.55;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;', '}', '#oc-timer .oc-clock{flex:0 0 auto;display:flex;align-items:flex-end;gap:4px;}', '#oc-timer .oc-grp{display:flex;flex-direction:column;align-items:center;gap:2px;}', '#oc-timer .oc-num{', ' display:block;padding:4px 6px;border-radius:7px;', ' background:' + CFG.sage + ';color:' + CFG.ink + ';', ' font-size:15px;line-height:1.15;font-weight:700;', ' font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;', '}', '#oc-timer .oc-unit{font-size:8px;font-weight:600;letter-spacing:.07em;', ' text-transform:uppercase;color:' + CFG.ink + ';opacity:.5;}', '#oc-timer .oc-sep{font-size:15px;font-weight:700;color:' + CFG.ink + ';', ' opacity:.3;padding-bottom:13px;}', '#oc-timer .oc-bar{position:relative;height:3px;margin-top:8px;', ' border-radius:99px;background:' + CFG.track + ';overflow:hidden;}', '#oc-timer .oc-fill{position:absolute;inset:0 auto 0 0;width:100%;', ' border-radius:99px;background:' + CFG.ink + ';', ' transition:width .95s linear,background-color .3s ease;}', /* adaptación por ancho de CONTENEDOR (no de pantalla) */ '#oc-timer.is-narrow .oc-unit{display:none;}', '#oc-timer.is-narrow .oc-sep{padding-bottom:0;}', '#oc-timer.is-narrow .oc-num{font-size:14px;padding:3px 5px;}', '#oc-timer.is-tiny .oc-lbl{display:none;}', '#oc-timer.is-tiny .oc-row{justify-content:space-between;}', /* estado urgente: mismo verde, mucha más superficie */ '#oc-timer.is-urgent{background:' + CFG.urgentBg + ';border-color:' + CFG.urgentBorder + ';}', '#oc-timer.is-urgent .oc-ico{color:' + CFG.urgentSage + ';}', '#oc-timer.is-urgent .oc-lbl{color:' + CFG.urgentInk + ';opacity:.7;}', '#oc-timer.is-urgent .oc-unit{color:' + CFG.urgentInk + ';opacity:.65;}', '#oc-timer.is-urgent .oc-sep{color:' + CFG.urgentInk + ';opacity:.45;}', '#oc-timer.is-urgent .oc-num{background:' + CFG.urgentSage + ';color:#ffffff;', ' animation:oc-beat 1s ease-in-out infinite;}', '#oc-timer.is-urgent .oc-fill{background:' + CFG.urgentSage + ';}', '#oc-timer.is-urgent .oc-bar{background:' + CFG.urgentTrack + ';}', '@keyframes oc-in{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}', '@keyframes oc-tick{to{transform:rotate(360deg);}}', '@keyframes oc-beat{0%,100%{transform:none;}50%{transform:translateY(-1px);}}', '@media (prefers-reduced-motion:reduce){', ' #oc-timer,#oc-timer .oc-num,#oc-timer .oc-hand{animation:none!important;}', ' #oc-timer .oc-fill{transition:none!important;}', '}' ].join('\n'); /* ---------- 3. ESTADO ---------- */ var RE_TIME = /\b(\d{1,2}):([0-5]\d)\b/; var maxSeen = 0; var srcNode = null; var hostNode = null; var srcObserver = null; var sizeObserver = null; /* ---------- 4. UTILIDADES ---------- */ function injectCSS(root) { var target = (root && root.nodeType === 11) ? root : (document.head || document.documentElement); if (target.querySelector && target.querySelector('#oc-timer-css')) return; var s = document.createElement('style'); s.id = 'oc-timer-css'; s.appendChild(document.createTextNode(CSS)); target.appendChild(s); } // Recorre el DOM entrando también en shadow roots function walk(node, fn) { var kids = node.querySelectorAll ? node.querySelectorAll('*') : []; for (var i = 0; i < kids.length; i++) { var el = kids[i]; if (fn(el) === true) return true; if (el.shadowRoot) { if (walk(el.shadowRoot, fn) === true) return true; } } return false; } function findSrc() { var found = null; walk(document.body, function (el) { if (found) return true; if (el.id === 'oc-timer' || el.closest && el.closest('#oc-timer')) return; if (el.tagName === 'SCRIPT' || el.tagName === 'STYLE' || el.tagName === 'INPUT') return; var txt = (el.textContent || '').trim(); if (!txt || txt.length > 90 || !RE_TIME.test(txt)) return; for (var j = 0; j < el.children.length; j++) { if (RE_TIME.test(el.children[j].textContent || '')) return; // hay uno más profundo } found = el; return true; }); return found; } // Sube hasta la "línea" completa (la que también lleva la etiqueta de texto) function findHost(node) { var el = node, hops = 0; while (el.parentElement && hops < 3) { var p = el.parentElement; if (p === document.body) break; if ((p.textContent || '').trim().length > 90) break; if (p.children.length > 3) break; // ya no es solo la línea del temporizador el = p; hops++; } return el; } function parseSeconds(txt) { var m = RE_TIME.exec(txt || ''); return m ? parseInt(m[1], 10) * 60 + parseInt(m[2], 10) : null; } function pad(n) { return n < 10 ? '0' + n : '' + n; } /* ---------- 5. RENDER ---------- */ function buildWidget() { var w = document.createElement('div'); w.id = 'oc-timer'; w.setAttribute('role', 'timer'); w.innerHTML = '

' + '' + '' + '' + '00' + ':' + '00' + '' + '

' + '

'; w.querySelector('.oc-lbl').textContent = CFG.label; var u = w.querySelectorAll('.oc-unit'); u[0].textContent = CFG.unitM; u[1].textContent = CFG.unitS; return w; } function fit(w) { var px = w.getBoundingClientRect().width; if (!px) return; w.classList.toggle('is-narrow', px < 260); w.classList.toggle('is-tiny', px < 195); log('ancho del contador:', Math.round(px)); } function paint(secs) { var w = document.getElementById('oc-timer'); if (!w || secs == null) return; if (secs > maxSeen) maxSeen = secs; var total = CFG.totalSeconds > 0 ? CFG.totalSeconds : Math.max(maxSeen, 60); w.querySelector('[data-m]').textContent = pad(Math.floor(secs / 60)); w.querySelector('[data-s]').textContent = pad(secs % 60); w.querySelector('.oc-fill').style.width = Math.max(0, Math.min(100, (secs / total) * 100)).toFixed(2) + '%'; w.classList.toggle('is-urgent', secs <= CFG.urgentAt); if (hostNode) hostNode.style.display = secs > 0 ? '' : 'none'; } /* ---------- 6. MONTAJE ---------- */ function boot() { var src = findSrc(); if (!src) { log('temporizador original no encontrado todavía'); return false; } injectCSS(src.getRootNode()); injectCSS(document); var existing = document.getElementById('oc-timer'); if (existing && existing.isConnected && srcNode === src) return true; if (existing) existing.remove(); var host = findHost(src); log('host:', host.tagName, host.className || '(sin clase)'); // Mueve el contenido original a un span oculto DENTRO del mismo host var keep = host.querySelector(':scope > .oc-timer-src'); if (!keep) { keep = document.createElement('span'); keep.className = 'oc-timer-src'; keep.setAttribute('aria-hidden', 'true'); while (host.firstChild) keep.appendChild(host.firstChild); host.appendChild(keep); } host.classList.add('oc-timer-host'); var widget = buildWidget(); host.appendChild(widget); srcNode = src; hostNode = host; paint(parseSeconds(src.textContent)); fit(widget); if (srcObserver) srcObserver.disconnect(); srcObserver = new MutationObserver(function () { paint(parseSeconds(srcNode.textContent)); }); srcObserver.observe(src, { childList: true, characterData: true, subtree: true }); if (sizeObserver) sizeObserver.disconnect(); if (window.ResizeObserver) { sizeObserver = new ResizeObserver(function () { fit(widget); }); sizeObserver.observe(widget); } else { window.addEventListener('resize', function () { fit(widget); }); } // Aviso si algo sigue desbordando if (DEBUG) { setTimeout(function () { var r = widget.getBoundingClientRect(); var pr = host.parentElement.getBoundingClientRect(); log('widget', Math.round(r.left) + '→' + Math.round(r.right), '| contenedor', Math.round(pr.left) + '→' + Math.round(pr.right), r.right > pr.right + 2 ? '⚠️ DESBORDA' : 'ok'); }, 300); } return true; } /* ---------- 7. ARRANQUE Y VIGILANCIA ---------- */ var tries = 0; var poll = setInterval(function () { tries++; if (boot() || tries > 60) clearInterval(poll); }, 250); if (!window.__ocTimerWatcher) { window.__ocTimerWatcher = true; var pending = null; new MutationObserver(function () { var w = document.getElementById('oc-timer'); if (w && w.isConnected && srcNode && srcNode.isConnected) return; clearTimeout(pending); pending = setTimeout(boot, 120); }).observe(document.body, { childList: true, subtree: true }); } // Utilidad manual: window.__ocTimerReset() devuelve el temporizador original window.__ocTimerReset = function () { if (srcObserver) srcObserver.disconnect(); if (sizeObserver) sizeObserver.disconnect(); var w = document.getElementById('oc-timer'); if (w) w.remove(); if (hostNode) { var keep = hostNode.querySelector('.oc-timer-src'); if (keep) { while (keep.firstChild) hostNode.appendChild(keep.firstChild); keep.remove(); } hostNode.classList.remove('oc-timer-host'); } window.__ocTimerWatcher = false; }; })(); /* ============================================================ OCARYA · Verificación de disponibilidad · JS Destino: Moon Bundles → JavaScript personalizado Sin cambios: este script no pinta colores, solo alterna las clases is-checking / is-ok / is-issue / is-hidden. Qué hace, de verdad: 1. lee /cart.js -> artículos del carrito 2. lee /products/{handle}.js -> variants[].available, dato real de Shopify 3. pinta is-ok o is-issue según el resultado Si algo falla, el carrito está vacío o la API tarda más de 6 s, OCULTA el bloque. Nunca afirma disponibilidad sin comprobarla. Para probar el estado de incidencia, en la consola: document.querySelector('[data-gp-stockcheck]').className = 'gp-stockcheck is-issue'; ============================================================ */ (function () { 'use strict'; if (window.__ocStockCheck) return; window.__ocStockCheck = true; var CFG = { minMs: 900, // tiempo mínimo visible el estado "comprobando" timeoutMs: 6000 // si tarda más, se oculta }; var DRAWER_ID = 'moonbundle-cart-drawer'; var busy = false; var debounce = null; function node() { return document.querySelector('[data-gp-stockcheck]'); } function drawer() { return document.getElementById(DRAWER_ID); } function isOpen() { var d = drawer(); return !!d && d.getAttribute('data-open') === 'true'; } function setState(el, s) { el.className = 'gp-stockcheck' + (s ? ' ' + s : ''); } function getJSON(url, signal) { return fetch(url, { headers: { Accept: 'application/json' }, signal: signal }) .then(function (r) { if (!r.ok) { throw new Error(String(r.status)); } return r.json(); }); } function run() { var el = node(); if (!el || busy || !isOpen()) return; busy = true; setState(el, 'is-checking'); var t0 = Date.now(); var ctrl = ('AbortController' in window) ? new AbortController() : null; var sig = ctrl ? ctrl.signal : undefined; var killed = false; var timer = setTimeout(function () { killed = true; if (ctrl) { ctrl.abort(); } }, CFG.timeoutMs); getJSON('/cart.js', sig) .then(function (cart) { var items = (cart && cart.items) || []; if (!items.length) { throw new Error('empty'); } var seen = {}; items.forEach(function (it) { if (it.handle) { seen[it.handle] = true; } }); var handles = Object.keys(seen); if (!handles.length) { throw new Error('nohandles'); } return Promise.all(handles.map(function (h) { return getJSON('/products/' + h + '.js', sig); })).then(function (prods) { var avail = {}; prods.forEach(function (p) { (p.variants || []).forEach(function (v) { avail[v.id] = v.available; }); }); return items.some(function (it) { return avail[it.variant_id] === false; }); }); }) .then(function (issue) { var wait = Math.max(0, CFG.minMs - (Date.now() - t0)); setTimeout(function () { clearTimeout(timer); if (killed) { setState(el, 'is-hidden'); busy = false; return; } setState(el, issue ? 'is-issue' : 'is-ok'); busy = false; }, wait); }) .catch(function () { clearTimeout(timer); setState(el, 'is-hidden'); busy = false; }); } function schedule() { clearTimeout(debounce); debounce = setTimeout(run, 120); } var mo = new MutationObserver(function () { if (isOpen()) { schedule(); } }); mo.observe(document.documentElement, { attributes: true, subtree: true, attributeFilter: ['data-open'] }); window.addEventListener('moonbundle-cart-updated', schedule); if (isOpen()) { schedule(); } })();

Colección: Productos

Filtrar y ordenar

Filtrar

Ocarya

Ocarya

Protección De Envío

Protección De Envío