/* Zero Sirup Mix & Match box: flavour gate + progress + store-style cards. Paste into Easy Bundles > Settings > Mix & Match > System > Custom JS. Skin: sections/main-mix-box.liquid puts the nine store cards (card-product.liquid) and the hero into window.__MIXBOX; this script shows them in place of the app's own cards and forwards (+) / (-) to the app's hidden buttons. Rule: 6-9 bottles need 2 different products, 10-15 need 3, 16 needs 4; max 16; no repricing, a bad box is refused. Hooks: gbbSdk.override('sdk'), cart.f.validateBeforeAdd, gbbSdkHelpers.utility.executeAddToCart, cart.f.getItems. Fail safe: add-to-cart stays blocked until the self test passes (window.__mixboxGate = pending|ready|failed); the theme section main-mix-box.liquid has a watchdog for the case that this script never runs. Storefront gate only, not a security boundary (needs a Shopify Function, i.e. Plus, for that). */ (function () { 'use strict'; var LOG = '[mixbox]'; var BLOCK_SELECTOR = '.gbbFooterNextButton, .gbbFooterNextButton *'; var state = { gate: 'pending', inst: null }; window.__mixboxGate = 'pending'; /* ---------- text (DE primary, EN translation) ---------- */ var T = { de: { flavour1: 'Sorte', flavourN: 'Sorten', q0: 'Wähle 6 bis 16 Produkte. Ab 6 Stück sparst du 10%.', qLt6: 'Noch {n} Stück für 10% Rabatt!', q6: '10% Rabatt aktiv! Noch {n} weitere bis 15%.', q10: '15% Rabatt aktiv! Noch {n} weitere bis 20%.', q16: 'Volle Box: 20% Rabatt!', f0: 'Mische mindestens 2 Sorten.', fOk: '{f} gewählt.', fNeed: 'Für {p}% Rabatt brauchst du mindestens {need} Sorten. Dir fehlt noch {m}.', toastMin: 'Bitte wähle mindestens 6 Stück.', toastMax: 'Eine Box enthält höchstens 16 Stück.', toastFlav: 'Für {p}% Rabatt brauchst du mindestens {need} verschiedene Sorten. Dir fehlt noch {m}.', blocked: 'Die Box kann gerade nicht bestellt werden. Bitte versuche es später noch einmal.', na: 'Diese Sorte ist gerade nicht verfügbar.', total: 'Gesamt' }, en: { flavour1: 'flavour', flavourN: 'flavours', q0: 'Pick 6 to 16 products. From 6 items you save 10%.', qLt6: '{n} more for 10% off!', q6: '10% off is on! {n} more for 15%.', q10: '15% off is on! {n} more for 20%.', q16: 'Full box: 20% off!', f0: 'Mix at least 2 flavours.', fOk: '{f} selected.', fNeed: 'For {p}% off you need at least {need} flavours. {m} more to go.', toastMin: 'Please pick at least 6 items.', toastMax: 'A box holds 16 items at most.', toastFlav: 'For {p}% off you need at least {need} different flavours. {m} more to go.', blocked: 'The box cannot be ordered right now. Please try again later.', na: 'This flavour is not available right now.', total: 'Total' } }; function lang() { var l = (document.documentElement.getAttribute('lang') || (window.Shopify && window.Shopify.locale) || 'de').toLowerCase(); return l.indexOf('en') === 0 ? 'en' : 'de'; } function txt() { return T[lang()]; } function fill(s, map) { return s.replace(/\{(\w+)\}/g, function (_, k) { return map[k] != null ? map[k] : ''; }); } function setText(el, value) { if (el && el.textContent !== value) el.textContent = value; } // Same money format as the store's cards on the same page: the theme renders "€4,49" on / AND on /en (checked on the /en collection and PDP). // The app's own total uses a dot ("€4.49"), so it is hidden and rebuilt here. function money(cents) { return '\u20AC' + (cents / 100).toFixed(2).replace('.', ','); } function flavours(n) { var t = txt(); return n + ' ' + (n === 1 ? t.flavour1 : t.flavourN); } /* ---------- rule ---------- */ var MIN_QTY = 6, MAX_QTY = 16; // tier = lowest bottle count at which the row starts to apply; need = minimum DIFFERENT products; // pct = the discount the app's tier gives (display only: the app prices the box, not this script) var TIERS = [ { from: 6, need: 2, pct: 10 }, { from: 10, need: 3, pct: 15 }, { from: 16, need: 4, pct: 20 } ]; function tierFor(qty) { var hit = null; for (var i = 0; i < TIERS.length; i++) if (qty >= TIERS[i].from) hit = TIERS[i]; return hit; } function evaluate(items) { var qty = 0, seen = {}, i, it, q; for (i = 0; i < items.length; i++) { it = items[i]; q = Number(it && it.quantity) || 0; if (q <= 0) continue; if (it.product_id == null) throw new Error('item without product_id'); qty += q; seen[String(it.product_id)] = true; } var f = Object.keys(seen).length; var tier = tierFor(qty); var need = tier ? tier.need : TIERS[0].need; var res = { qty: qty, f: f, tier: tier, need: need, ok: false, code: '' }; if (qty < MIN_QTY) res.code = 'min'; else if (qty > MAX_QTY) res.code = 'max'; else if (f < need) res.code = 'flavours'; else res.ok = true; return res; } // The discount the shopper is going for: the tier of the current bottle count (a flavour refusal only happens at 6+). function pctFor(r) { return (r.tier || TIERS[0]).pct; } function messageFor(r) { var t = txt(); if (r.code === 'min') return t.toastMin; if (r.code === 'max') return t.toastMax; if (r.code === 'flavours') return fill(t.toastFlav, { p: pctFor(r), need: r.need, m: r.need - r.f }); return ''; } /* ---------- reading the box ---------- */ function readItems(inst) { var items = inst && inst.cart && inst.cart.f && typeof inst.cart.f.getItems === 'function' ? inst.cart.f.getItems() : null; if (!Array.isArray(items)) throw new Error('cart.f.getItems() did not return an array'); return items; } function toast(msg) { try { if (window.gbbSdkHelpers && gbbSdkHelpers.utility && typeof gbbSdkHelpers.utility.activateToastMessage === 'function') { gbbSdkHelpers.utility.activateToastMessage(msg, 4500); return; } } catch (e) { /* fall through */ } showBlockedBanner(msg); } /* ---------- default-deny click blocker (installed first, lifted only when the gate is ready) ---------- */ function onBlockedClick(ev) { if (state.gate === 'ready') return; var t = ev.target; if (!(t && t.closest && t.closest('.gbbFooterNextButton'))) return; ev.preventDefault(); ev.stopImmediatePropagation(); if (state.gate === 'failed') showBlockedBanner(txt().blocked); } ['click', 'touchend', 'keydown'].forEach(function (type) { document.addEventListener(type, function (ev) { if (type === 'keydown' && ev.key !== 'Enter' && ev.key !== ' ') return; onBlockedClick(ev); }, true); }); // The app's own product modal (opened by the magnifier on its cards) shows stock text. Never let it open. document.addEventListener('click', function (ev) { if (ev.target.closest && ev.target.closest('.gbbProductImageContainer, .gbbProductOverlay')) { ev.preventDefault(); ev.stopImmediatePropagation(); } }, true); function showBlockedBanner(msg) { var n = document.getElementById('mixbox-blocked'); if (!n) { n = document.createElement('div'); n.id = 'mixbox-blocked'; n.setAttribute('role', 'alert'); (document.querySelector('.gbbBundleWrapper') || document.body).insertBefore(n, (document.querySelector('.gbbBundleWrapper') || document.body).firstChild); } setText(n, msg); } function fail(why, err) { state.gate = 'failed'; window.__mixboxGate = 'failed'; document.documentElement.classList.add('mixbox-blocked'); console.error(LOG + ' gate NOT active, box checkout is blocked. Reason: ' + why, err || ''); showBlockedBanner(txt().blocked); } /* ---------- progress UI ---------- */ function buildStatus() { var el = document.createElement('div'); el.id = 'mixbox-status'; el.className = 'mbx'; el.setAttribute('role', 'status'); el.setAttribute('aria-live', 'polite'); el.innerHTML = '' + '

' + '

'; return el; } /* ---------- store-style skin ---------- */ function esc(v) { return String(v).replace(/&/g, '&').replace(/"/g, '"').replace(/ 0) { return '

' + '' + '' + qty + '' + '

'; } return ''; } function buildCard(G, c) { var t = document.createElement('template'); t.innerHTML = c.html; var el = t.content.firstElementChild; if (!el) return null; // the store card links to the product page; here nothing on the card navigates (the box is the page) [].slice.call(el.querySelectorAll('script, product-form')).forEach(function (n) { n.remove(); }); [].slice.call(el.querySelectorAll('a')).forEach(function (a) { retag(a, a.classList.contains('prod__media') ? 'div' : 'span'); }); el.removeAttribute('view-event-payload'); el.setAttribute('data-pid', c.pid); if (!c.so) { var row = el.querySelector('.prod__row'); var nm = el.querySelector('.prod__name'); if (row) { var ctl = document.createElement('div'); ctl.className = 'mbx-ctl'; ctl.setAttribute('data-pid', c.pid); ctl.setAttribute('data-title', nm ? nm.textContent.trim() : ''); ctl.setAttribute('data-q', '0'); ctl.innerHTML = ctlHtml(G, c.pid, ctl.getAttribute('data-title'), 0); row.appendChild(ctl); } } return el; } function appCard(pid) { return document.querySelector('.gbbCategoryAccordionsContainer .gbbProductItem[data-product-id="' + pid + '"]'); } function onShopClick(ev) { var b = ev.target.closest && ev.target.closest('[data-act]'); if (!b) return; var ctl = b.closest('.mbx-ctl'); if (!ctl) return; ev.preventDefault(); var pid = ctl.getAttribute('data-pid'), act = b.getAttribute('data-act'); var card = appCard(pid); if (!card) { toast(txt().na); return; } var target = act === 'dec' ? card.querySelector('.gbbQuantityStepperRemoveButton') : (card.querySelector('.gbbQuantityStepperAddButton') || card.querySelector('.gbbProductAddButton')); if (target) target.click(); } function mountShop(wrap) { var G = window.__MIXBOX; if (!G || !G.cards || !G.cards.length) return; document.documentElement.classList.add('mbx-on'); var hero = document.getElementById('mbx-hero'); if (G.hero && !hero) { hero = document.createElement('div'); hero.id = 'mbx-hero'; hero.innerHTML = G.hero; } if (hero && hero.nextElementSibling !== wrap) wrap.parentNode.insertBefore(hero, wrap); var acc = wrap.querySelector('.gbbCategoryAccordionsContainer'); // wait for the app's REAL product cards (it first paints skeleton ".gbbProductItem" placeholders without a product id) if (!acc || !acc.querySelector('.gbbProductItem[data-product-id]')) return; // a card we cannot sell from (not known to the app and not sold out) is left out rather than shown dead var want = G.cards.filter(function (c) { return c.so || appCard(c.pid); }); var shop = document.getElementById('mbx-shop'); if (!shop) { shop = document.createElement('div'); shop.id = 'mbx-shop'; shop.setAttribute('data-cat', 'zero-sirupe'); shop.appendChild(document.createElement('div')).className = 'prod-grid'; shop.addEventListener('click', onShopClick); } // the app paints its cards in batches: (re)build the grid whenever more of them are known than we show var grid = shop.querySelector('.prod-grid'); if (grid.getAttribute('data-n') !== String(want.length)) { grid.setAttribute('data-n', String(want.length)); grid.textContent = ''; want.forEach(function (c) { var el = buildCard(G, c); if (el) grid.appendChild(el); }); } if (shop.parentNode !== acc.parentNode || shop.nextElementSibling !== acc) acc.parentNode.insertBefore(shop, acc); } function syncControls(items) { var G = window.__MIXBOX, shop = document.getElementById('mbx-shop'); if (!G || !shop) return; var q = {}; items.forEach(function (it) { q[String(it.product_id)] = (q[String(it.product_id)] || 0) + (Number(it.quantity) || 0); }); [].forEach.call(shop.querySelectorAll('.mbx-ctl'), function (ctl) { var n = q[ctl.getAttribute('data-pid')] || 0; if (ctl.getAttribute('data-q') === String(n)) return; ctl.setAttribute('data-q', String(n)); ctl.innerHTML = ctlHtml(G, ctl.getAttribute('data-pid'), ctl.getAttribute('data-title'), n); }); } var lastFill = '0%'; // Box rows show the flavour only: the app prints the full product title, the shop's names all end in " Zero Sirup". // The app also prints the title in the shop's DEFAULT language (German), even on /en. The store card of the same product // (data-pid = the row's data-product-id) carries the title in the page language, so the row text is taken from the card. // Only the existing text node's value is changed (the app owns the node and overwrites it when its own text changes). function shortenTitles() { [].forEach.call(document.querySelectorAll('.gbbFooterProductWrapper'), function (row) { var el = row.querySelector('.gbbFooterProductTitle'); var n = el && el.firstChild; if (!n || n.nodeType !== 3) return; var card = document.querySelector('#mbx-shop .prod[data-pid="' + row.getAttribute('data-product-id') + '"] .prod__name'); var full = card ? card.textContent.trim() : n.nodeValue; var short = full.replace(/\s+Zero Sirup\s*$/, ''); if (short && n.nodeValue !== short) { n.nodeValue = short; el.setAttribute('title', full); } }); } function mount() { var wrap = document.querySelector('.gbbBundleWrapper'); var footer = document.querySelector('.gbbBundleFooter'); if (!wrap || !footer) return null; mountShop(wrap); var st = document.getElementById('mixbox-status'); if (!st) st = buildStatus(); var compact = footer.classList.contains('gbbCompactFooter'); var anchor = compact ? footer.firstChild : footer.querySelector('.gbbFooterActionContainer'); if (st.parentNode !== footer || (compact ? footer.firstChild !== st : st.nextElementSibling !== anchor)) { footer.insertBefore(st, anchor); // The app re-renders its footer on every change, so this element is (re)inserted each time and a CSS transition has no // "before" state. Put the bar back at the last width, force a style flush, and let render() move it to the new width. st.style.setProperty('--mbx-fill', lastFill); void st.offsetWidth; } return st; } function render() { if (state.gate === 'failed' || !state.inst) return; var st = mount(); if (!st) return; var t = txt(), r; var items; try { items = readItems(state.inst); r = evaluate(items); } catch (e) { fail('cannot read the box', e); return; } try { syncControls(items); } catch (e) { console.error(LOG + ' control sync failed', e); } try { shortenTitles(); } catch (e) { console.error(LOG + ' title shortening failed', e); } var qEl = st.querySelector('.mbx__msg--qty'), fEl = st.querySelector('.mbx__msg--flav'); var msg, left; if (r.qty === 0) msg = t.q0; // {n} is the bare number: the texts carry their own word (owner's corrected copy, 2026-11-04: "Noch 3 Stück", "Noch 3 weitere") else if (r.qty < 6) msg = fill(t.qLt6, { n: 6 - r.qty }); else if (r.qty < 10) msg = fill(t.q6, { n: 10 - r.qty }); else if (r.qty < 16) msg = fill(t.q10, { n: 16 - r.qty }); else msg = t.q16; setText(qEl, msg); var fmsg, warn = false; if (r.qty === 0) fmsg = t.f0; else if (r.qty < MIN_QTY) fmsg = t.f0; else if (r.f < r.need) { fmsg = fill(t.fNeed, { p: pctFor(r), need: r.need, m: r.need - r.f }); warn = true; } else fmsg = fill(t.fOk, { f: flavours(r.f) }); setText(fEl, fmsg); var tl = st.querySelector('.mbx__tl'), tv = st.querySelector('.mbx__tv'); setText(tl, t.total); try { var pr = state.inst.cart.f.getBundlePricing(); var cur = Math.round(pr.discountedPrice), was = Math.round(pr.totalPrice); var btn = document.querySelector('.gbbFooterNextButton'); var tot = r.qty ? money(cur) : ''; if (btn && btn.getAttribute('data-total') !== tot) btn.setAttribute('data-total', tot); // phone bar shows the total inside the button (CSS) var sig = r.qty ? (was > cur ? was + '>' + cur : String(cur)) : ''; if (tv.getAttribute('data-sig') !== sig) { tv.setAttribute('data-sig', sig); tv.innerHTML = !r.qty ? '' : (was > cur ? '~~' + money(was) + '~~ ' : '') + '' + money(cur) + ''; } } catch (e) { tv.textContent = ''; } st.classList.toggle('mbx--warn', warn); st.classList.toggle('mbx--ok', r.ok); lastFill = Math.min(r.qty, MAX_QTY) / MAX_QTY * 100 + '%'; st.style.setProperty('--mbx-fill', lastFill); st.setAttribute('data-qty', String(r.qty)); st.setAttribute('data-flavours', String(r.f)); } var raf = 0; function schedule() { if (raf) return; raf = window.requestAnimationFrame(function () { raf = 0; render(); }); } /* ---------- wiring ---------- */ function wire(inst) { // self test: everything we rely on must be there BEFORE the buttons are released if (!inst || !inst.cart || !inst.cart.f) return fail('instance.cart.f missing'); if (typeof inst.cart.f.validateBeforeAdd !== 'function') return fail('cart.f.validateBeforeAdd missing'); if (typeof inst.cart.f.getItems !== 'function') return fail('cart.f.getItems missing'); if (!window.gbbSdkHelpers || !gbbSdkHelpers.utility || typeof gbbSdkHelpers.utility.executeAddToCart !== 'function') { return fail('gbbSdkHelpers.utility.executeAddToCart missing'); } if (!window.gbbSdk || !gbbSdk.events || !gbbSdk.events.CART_UPDATED) return fail('gbbSdk.events.CART_UPDATED missing'); try { evaluate(readItems(inst)); } catch (e) { return fail('self test: bottles not readable', e); } state.inst = inst; var origValidate = inst.cart.f.validateBeforeAdd; inst.cart.f.validateBeforeAdd = function (opts) { // An empty box: the app's own check says "No products in cart" in English, hard-coded (no language setting for it). // Answer it first with our own message, in the page language. The box is still refused. try { var r0 = evaluate(readItems(inst)); if (r0.qty === 0) { var m0 = messageFor(r0); if (!opts || opts.showToast !== false) toast(m0); return { ok: false, data: { code: 'MIXBOX_GATE_MIN', message: m0 } }; } } catch (e) { /* unreadable box: fall through, the app's own check and the checks below still refuse */ } var base = origValidate.apply(this, arguments); if (!base || base.ok !== true) return base; // the app's own rules (min 6, max 16, stock) come first try { var r = evaluate(readItems(inst)); if (r.ok) return base; var m = messageFor(r); if (!opts || opts.showToast !== false) toast(m); return { ok: false, data: { code: 'MIXBOX_GATE_' + r.code.toUpperCase(), message: m } }; } catch (e) { console.error(LOG + ' validate failed, refusing the add', e); return { ok: false, data: { code: 'MIXBOX_GATE_ERROR', message: txt().blocked } }; } }; var origAdd = gbbSdkHelpers.utility.executeAddToCart; gbbSdkHelpers.utility.executeAddToCart = async function () { try { var r = evaluate(readItems(inst)); if (!r.ok) { toast(messageFor(r)); return null; } // null = "add failed" for addBundle(), no throw, no error report } catch (e) { console.error(LOG + ' pre-add check failed, refusing the add', e); toast(txt().blocked); return null; } return origAdd.apply(this, arguments); }; gbbSdk.subscribe(gbbSdk.events.CART_UPDATED, schedule); if (gbbSdk.events.BUNDLE_INITIALIZED) gbbSdk.subscribe(gbbSdk.events.BUNDLE_INITIALIZED, schedule); if (gbbSdk.events.BOX_SELECTION_CHANGED) gbbSdk.subscribe(gbbSdk.events.BOX_SELECTION_CHANGED, schedule); new MutationObserver(schedule).observe(document.body, { childList: true, subtree: true }); window.addEventListener('resize', schedule); state.gate = 'ready'; window.__mixboxGate = 'ready'; document.documentElement.classList.remove('mixbox-blocked'); var stale = document.getElementById('mixbox-blocked'); if (stale) stale.remove(); schedule(); window.setTimeout(schedule, 800); } try { if (!window.gbbSdk || typeof gbbSdk.override !== 'function') throw new Error('gbbSdk.override missing'); gbbSdk.override('sdk', function (inst) { try { wire(inst); } catch (e) { fail('wire() threw', e); } }); } catch (e) { fail('could not hook into the SDK', e); } // The engine must have handed us its instance shortly after this script ran. If not, say so. window.setTimeout(function () { if (state.gate === 'pending') fail('engine instance never arrived (SDK changed?)'); }, 10000); })();

Mix & Match Box