/* ============================================================================ VizionHub Order Shield — MoonBundles toggle + tiered variant Paste into the MoonBundles Custom JavaScript field. ============================================================================ This is your original force-on script, kept intact, with variant tiering layered on top. MoonBundles still owns adding and removing the protection line. This script only corrects WHICH variant is in the cart. THE ONE CHANGE TO YOUR ORIGINAL forceOn() used to always call label.click(). A click makes MoonBundles add ITS configured variant, which is always tier 1 — so after we swap to a higher tier, the next click would undo it and the two halves fight. Now: no protection in cart -> click, exactly as before. protection already in cart -> set input.checked = true silently. Same appearance, no re-add. SETUP - Toggle upsell = ON in MoonBundles, pointed at the Order Shield product. - Every Order Shield variant: "Continue selling when out of stock" = ON, or /cart/update.js rejects the swap. - Every variant: uncheck "This is a physical product". Opt-out is sessionStorage only, as in your original — a new session re-offers protection. DEBUG: append ?vhos=1 to any URL for full logging. ========================================================================= */ (function () { 'use strict'; /* ======================= CONFIG ======================= */ var HANDLE = 'order-shield'; var SESSION_KEY = 'ordershield_optout_store2'; var TOGGLE_SEL = '.moonbundle-toggle-upsell-switch'; // Variant title | tier floor (cents) | tier ceiling (cents) // Order matters — it doubles as the positional fallback order. var TIERS = [ { title: 'Up to 49.99', min: 0, max: 4999 }, { title: '50-99.99', min: 5000, max: 9999 }, { title: '100-149.99', min: 10000, max: 14999 }, { title: '150-199.99', min: 15000, max: 19999 }, { title: '200+', min: 20000, max: Infinity } ]; /* ====================================================== */ if (window.__vhOrderShield) return; window.__vhOrderShield = true; console.log('[order-shield] boot'); var DEBUG = /[?&]vhos=1/.test(location.search); var product = null; var ids = []; var hasProtection = false; // synchronous flag forceOn() reads var lastTier = null; var internal = false; var busy = false; var timer = null; var CART_RE = /\/cart\/(add|change|update|clear)/; // Loop guard — if something keeps fighting the swap, stop rather than // hammering the cart API. var writes = []; var HALTED = false; function log() { if (DEBUG) console.log.apply(console, ['[order-shield]'].concat([].slice.call(arguments))); } function root() { return (window.Shopify && window.Shopify.routes && window.Shopify.routes.root) || '/'; } function norm(s) { return String(s).toLowerCase().replace(/[\u2013\u2014]/g, '-').replace(/\s+/g, ''); } function money(cents) { if (window.Shopify && typeof window.Shopify.formatMoney === 'function' && window.Shopify.money_format) { try { return window.Shopify.formatMoney(cents, window.Shopify.money_format); } catch (e) {} } return '$' + (cents / 100).toFixed(2); } /* ========================================================== PART 1 — your original force-on, with the one branch added ========================================================== */ function forceOn() { if (sessionStorage.getItem(SESSION_KEY) === '1') return; var label = document.querySelector(TOGGLE_SEL); if (!label) return; // drawer/toggle not in DOM yet — observer will retry var input = label.querySelector('input[type="checkbox"]'); if (!input) return; if (!input.checked) { if (hasProtection) { // Protection is already in the cart at the correct tier. Clicking here // would make MoonBundles add tier 1 on top and undo the swap, so just // reflect the true state without firing their handler. input.checked = true; log('toggle re-checked silently (protection already in cart)'); } else { label.click(); // proven to work in this store } } // Bind opt-out once per node. Fast Bundle/Rebuy may swap the node, // so we tag the node itself; a fresh node re-binds cleanly. if (!input.dataset.optoutBound) { input.dataset.optoutBound = '1'; input.addEventListener('change', function () { if (!this.checked) sessionStorage.setItem(SESSION_KEY, '1'); }); } overridePrice(); } // Watch the whole cart region — these apps re-render the drawer, // so scoping too tightly misses the re-render. Body is safest here. new MutationObserver(forceOn).observe(document.body, { childList: true, subtree: true }); // Also poll briefly after load to cover late app renders that don't // trigger a mutation on an element we're watching. var tries = 0; var poll = setInterval(function () { forceOn(); if (++tries >= 20) clearInterval(poll); // ~10s of retries then stop }, 500); document.addEventListener('DOMContentLoaded', forceOn); forceOn(); /* ========================================================== PART 2 — tiering ========================================================== */ function loadProduct() { return fetch(root() + 'products/' + HANDLE + '.js', { headers: { Accept: 'application/json' } }) .then(function (r) { if (!r.ok) { throw new Error('product "' + HANDLE + '" not found (' + r.status + ') — check the handle, and that it is published to the Online Store sales channel'); } return r.json(); }) .then(function (p) { product = p; var matched = 0; TIERS.forEach(function (t) { for (var i = 0; i < p.variants.length; i++) { if (norm(p.variants[i].title) === norm(t.title)) { t.variant = p.variants[i]; matched++; return; } } }); if (!matched) { console.log('[order-shield] no tier titles matched — falling back to variant order'); TIERS.forEach(function (t, i) { t.variant = p.variants[i]; }); } TIERS = TIERS.filter(function (t) { return t.variant; }); ids = TIERS.map(function (t) { return t.variant.id; }); if (!ids.length) throw new Error('no variants could be mapped to tiers'); console.log('[order-shield] resolved', product.title, TIERS.map(function (t) { return t.title + ' -> ' + t.variant.id + ' @ ' + money(t.variant.price); })); return p; }); } function tierFor(cents) { for (var i = 0; i < TIERS.length; i++) { if (cents >= TIERS[i].min && cents <= TIERS[i].max) return TIERS[i]; } return TIERS[TIERS.length - 1]; } function post(path, body) { var now = Date.now(); writes = writes.filter(function (t) { return now - t < 10000; }); writes.push(now); if (writes.length > 8) { HALTED = true; console.warn('[order-shield] HALTED — more than 8 cart writes in 10s. MoonBundles is re-adding its variant faster than the swap. Reload to reset.'); return Promise.reject(new Error('halted')); } internal = true; log('POST', path, body); return fetch(root() + path, { method: 'POST', headers: { 'Content-Type': 'application/json', Accept: 'application/json' }, body: JSON.stringify(body) }) .then(function (r) { return r.json().then(function (json) { if (!r.ok) console.warn('[order-shield] cart API rejected the swap', r.status, json); return json; }); }) .then(function (json) { internal = false; return json; }) .catch(function (err) { internal = false; throw err; }); } function notifyDrawer() { ['cart:refresh', 'cart:updated', 'cart:build', 'cart:change', 'moonbundle:refresh'].forEach(function (name) { document.dispatchEvent(new CustomEvent(name, { bubbles: true, detail: { source: 'order-shield' } })); }); } /* MoonBundles renders its configured price, which is fixed — wrong on every tier above the first. Rewrite it, walking up at most 4 levels from the toggle so this can never reach the subtotal. */ function overridePrice() { if (!lastTier) return; var want = money(lastTier.variant.price); var CURRENCY = /[^\s]*\d+[.,]\d{2}/; document.querySelectorAll(TOGGLE_SEL).forEach(function (label) { var node = label.parentElement; var hops = 0; while (node && hops < 4 && !CURRENCY.test(node.textContent)) { node = node.parentElement; hops++; } if (!node || !CURRENCY.test(node.textContent)) return; var walker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT, null); var t; while ((t = walker.nextNode())) { if (CURRENCY.test(t.nodeValue) && t.nodeValue.indexOf(want) === -1) { t.nodeValue = t.nodeValue.replace(CURRENCY, want); } } }); } /* Only ever CORRECTS the variant. Never adds protection, never removes it — MoonBundles owns that, driven by the toggle. */ function reconcile() { if (busy || HALTED || !ids.length) return Promise.resolve(); busy = true; return fetch(root() + 'cart.js', { headers: { Accept: 'application/json' }, cache: 'no-store' }) .then(function (r) { return r.json(); }) .then(function (cart) { var merch = 0; var lines = []; (cart.items || []).forEach(function (li) { if (ids.indexOf(li.variant_id) > -1) lines.push(li); else merch += li.final_line_price; }); hasProtection = lines.length > 0; lastTier = tierFor(merch); overridePrice(); log('merch', merch, '| tier', lastTier.title, money(lastTier.variant.price), '| protection lines', lines.length); if (!hasProtection) return null; var correct = lines.length === 1 && lines[0].variant_id === lastTier.variant.id && lines[0].quantity === 1; if (correct) return null; var updates = {}; ids.forEach(function (id) { updates[id] = 0; }); updates[lastTier.variant.id] = 1; log('swapping to', lastTier.title); return post('cart/update.js', { updates: updates }) .then(notifyDrawer) .catch(function () {}); }) .catch(function (e) { console.warn('[order-shield] reconcile failed', e); }) .then(function () { busy = false; forceOn(); }); } function schedule() { clearTimeout(timer); timer = setTimeout(reconcile, 300); } // Catch cart mutations from MoonBundles, the theme, or any other app. // BOGOS also observes /cart/update.js on this store, so expect its logs too. var nativeFetch = window.fetch; if (nativeFetch) { window.fetch = function (input) { var url = typeof input === 'string' ? input : (input && input.url) || ''; var p = nativeFetch.apply(this, arguments); if (!internal && CART_RE.test(url)) p.then(schedule).catch(function () {}); return p; }; } var nativeOpen = XMLHttpRequest.prototype.open; XMLHttpRequest.prototype.open = function (method, url) { this.__vhUrl = url; return nativeOpen.apply(this, arguments); }; var nativeSend = XMLHttpRequest.prototype.send; XMLHttpRequest.prototype.send = function () { var xhr = this; xhr.addEventListener('load', function () { if (!internal && CART_RE.test(String(xhr.__vhUrl || ''))) schedule(); }); return nativeSend.apply(this, arguments); }; loadProduct() .then(reconcile) .catch(function (e) { console.warn('[order-shield]', e.message); }); })(); /* ============================================================================ Order Shield — tiered pricing by cart total (MoonBundles cart drawer) ---------------------------------------------------------------------------- Paste into MoonBundles' Custom JavaScript field (or a theme snippet that loads on all pages). Runs in the storefront/main document. WHAT IT DOES - Reads the cart subtotal of NON-protection items. - Picks the correct Order Shield tier variant for that subtotal. - If the protection line is present but on the wrong variant, swaps it to the right one via /cart/update.js. - Updates the price shown in the MoonBundles toggle widget so it always reflects the tier that applies (even before the shopper toggles it on). - Fails safe: if it can't find the widget or a variant, it does nothing and the toggle behaves exactly as MoonBundles ships it. REQUIRED SETUP (read the notes that came with this file) - Order Shield must be ONE product with a variant per price tier. - MoonBundles toggle points at the $1.99 variant. - Fill in the variant IDs in CONFIG.tiers below. ========================================================================== */ (function () { 'use strict'; /* =============================== CONFIG ================================= */ var CONFIG = { // Tiers are evaluated top-down; the FIRST tier whose minCents <= subtotal // wins. Keep them ordered high -> low. subtotal is in CENTS and excludes // the Order Shield line itself. Add more tiers here if you want more steps. tiers: [ { minCents: 10000, variantId: 'PUT_2_49_VARIANT_ID_HERE', label: '$2.49' }, // >= $100.00 { minCents: 0, variantId: 'PUT_1_99_VARIANT_ID_HERE', label: '$1.99' } // < $100.00 (default) ], // Widget hooks (from your DOM screenshot). containerSelector: '.moonbundle-toggle-upsell-container', // Where the price text lives. First selector that matches wins; if none // match, we fall back to replacing the first "$0.00"-looking text in the // container. Add the real price class here once you inspect it. priceSelectors: [ '.moonbundle-toggle-upsell-price', '.moonbundle-toggle-upsell-content [class*="price"]', '[class*="moonbundle-toggle-upsell"] [class*="price"]' ], currencyRegex: /\$\s?\d[\d.,]*/, swapVariant: true, // false = only relabel (NOT recommended: label would lie about the charge) debounceMs: 250, cooldownMs: 1500, // min gap between swaps thrashLimit: 6, // if we swap more than this in thrashWindowMs, stop and warn thrashWindowMs: 10000, debug: false }; /* ======================================================================= */ var TIER_VARIANT_IDS = CONFIG.tiers .map(function (t) { return String(t.variantId); }) .filter(function (id) { return id && id.indexOf('PUT_') !== 0; }); if (TIER_VARIANT_IDS.length < 2) { console.warn('[OrderShield] Fill in CONFIG.tiers variant IDs — script idle until then.'); return; } var scheduled = false; var inFlight = false; var lastSwapAt = 0; var swapTimes = []; var disabled = false; var cachedRoot = null; function log() { if (CONFIG.debug) console.log.apply(console, ['[OrderShield]'].concat([].slice.call(arguments))); } function tierFor(subtotalCents) { for (var i = 0; i < CONFIG.tiers.length; i++) { if (subtotalCents >= CONFIG.tiers[i].minCents) return CONFIG.tiers[i]; } return CONFIG.tiers[CONFIG.tiers.length - 1]; } /* ---- widget location (light DOM first, then open shadow roots) --------- */ function findContainers() { var found = document.querySelectorAll(CONFIG.containerSelector); if (found.length) { cachedRoot = document; return found; } if (cachedRoot && cachedRoot !== document && cachedRoot.querySelectorAll) { var c = cachedRoot.querySelectorAll(CONFIG.containerSelector); if (c.length) return c; } var all = document.querySelectorAll('*'); for (var i = 0; i < all.length; i++) { var sr = all[i].shadowRoot; if (sr) { var hit = sr.querySelectorAll(CONFIG.containerSelector); if (hit.length) { cachedRoot = sr; return hit; } } } return []; } function setPriceText(container, text) { for (var i = 0; i < CONFIG.priceSelectors.length; i++) { var el = container.querySelector(CONFIG.priceSelectors[i]); if (el) { if (el.textContent.trim() !== text) el.textContent = text; return true; } } // Fallback: find the first text node that looks like a price and rewrite it. var walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT, null); var node; while ((node = walker.nextNode())) { if (CONFIG.currencyRegex.test(node.nodeValue)) { var next = node.nodeValue.replace(CONFIG.currencyRegex, text); if (node.nodeValue !== next) node.nodeValue = next; return true; } } return false; } function updateLabel(tier) { var containers = findContainers(); for (var i = 0; i < containers.length; i++) setPriceText(containers[i], tier.label); } /* ---- cart helpers ----------------------------------------------------- */ function getCart() { return fetch('/cart.js', { headers: { 'Accept': 'application/json' } }).then(function (r) { return r.json(); }); } function subtotalExcludingProtection(cart) { var sum = 0; (cart.items || []).forEach(function (item) { if (TIER_VARIANT_IDS.indexOf(String(item.variant_id)) === -1) sum += item.final_line_price; }); return sum; } function protectionLine(cart) { return (cart.items || []).filter(function (item) { return TIER_VARIANT_IDS.indexOf(String(item.variant_id)) !== -1; })[0] || null; } function swap(fromVariantId, toVariantId) { var updates = {}; updates[String(fromVariantId)] = 0; updates[String(toVariantId)] = 1; return fetch('/cart/update.js', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' }, body: JSON.stringify({ updates: updates }) }); } function thrashing() { var now = Date.now(); swapTimes = swapTimes.filter(function (t) { return now - t < CONFIG.thrashWindowMs; }); if (swapTimes.length >= CONFIG.thrashLimit) { disabled = true; console.warn('[OrderShield] Detected repeated swaps — MoonBundles is likely reverting the variant. ' + 'Confirm both prices are variants of the SAME product and the toggle points at it. Script paused.'); return true; } return false; } /* ---- main reconcile --------------------------------------------------- */ function reconcile() { scheduled = false; if (disabled || inFlight) return; inFlight = true; getCart().then(function (cart) { var subtotal = subtotalExcludingProtection(cart); var tier = tierFor(subtotal); // Always reflect the applicable tier in the widget UI. updateLabel(tier); var line = protectionLine(cart); if (!line || !CONFIG.swapVariant) { inFlight = false; return; } if (String(line.variant_id) === String(tier.variantId)) { inFlight = false; return; } var now = Date.now(); if (now - lastSwapAt < CONFIG.cooldownMs) { inFlight = false; schedule(); // re-check after cooldown return; } if (thrashing()) { inFlight = false; return; } lastSwapAt = now; swapTimes.push(now); log('swapping', line.variant_id, '->', tier.variantId, 'subtotal', subtotal); swap(line.variant_id, tier.variantId).then(function () { inFlight = false; updateLabel(tier); // re-apply after our own change }).catch(function () { inFlight = false; }); }).catch(function () { inFlight = false; }); } function schedule() { if (scheduled || disabled) return; scheduled = true; setTimeout(reconcile, CONFIG.debounceMs); } /* ---- triggers --------------------------------------------------------- */ // Re-run whenever the cart changes via AJAX. var origFetch = window.fetch; if (origFetch) { window.fetch = function (input, init) { var url = (typeof input === 'string') ? input : (input && input.url) || ''; return origFetch.apply(this, arguments).then(function (res) { if (/\/cart\/(add|change|update|clear)(\.js)?(\?|$)/.test(url)) schedule(); return res; }); }; } // Re-run when MoonBundles re-renders the drawer. new MutationObserver(schedule).observe(document.documentElement, { childList: true, subtree: true }); window.addEventListener('pageshow', schedule); document.addEventListener('DOMContentLoaded', schedule); schedule(); })();

Cart0 items

Find your new wardrobe