/* ------------------------------------------------------------------ Maravie - Kaching Cart custom JS (v2, meertalig) Plak in: Kaching Cart app -> Settings -> General -> Custom JS Nieuw t.o.v. v1: - Nederlands op de NL-store, Duits op de DE-store - juiste producthandle per taal (die verschilt per markt) - verzendbalk staat UIT voor Duitsland, want daar beloof je al gratis verzending in heel Duitsland ------------------------------------------------------------------ */ (function () { 'use strict'; var LOCALES = { nl: { bar: false, // verzending is gratis, dus geen drempel threshold: 7500, // centen handle: 'maravie-raw-hoodie-oversized', upsellTitle: 'Maak het af met de Raw Hoodie', barLeft: 'Nog {amount} voor gratis verzending', barDone: 'Gratis verzending ontgrendeld', add: 'Toevoegen', busy: 'Bezig...', sold: 'Uitverkocht', retry: 'Opnieuw proberen', assure: '14 dagen gratis retour' }, de: { bar: false, // DE heeft al gratis verzending threshold: 7500, handle: 'maravie-raw-hoodie', upsellTitle: 'Mach es komplett mit dem Raw Hoodie', barLeft: 'Noch {amount} bis zum kostenlosen Versand', barDone: 'Kostenloser Versand freigeschaltet', add: 'Hinzufügen', busy: 'Einen Moment...', sold: 'Ausverkauft', retry: 'Erneut versuchen', assure: '14 Tage kostenlose Rückgabe' } }; var lang = ((window.Shopify && window.Shopify.locale) || 'de').slice(0, 2).toLowerCase(); var T = LOCALES[lang] || LOCALES.de; var money = function (c) { return '€' + (c / 100).toFixed(2).replace('.', ','); }; var root = function () { return (window.Shopify && window.Shopify.routes && window.Shopify.routes.root) || '/'; }; var TRUCK = ''; var RETURN = ''; // alle handles van het upsell-product, zodat "zit al in de kar" in elke taal klopt var ALL_HANDLES = Object.keys(LOCALES).map(function (k) { return LOCALES[k].handle; }); var product = null, loading = false; function loadProduct() { if (product || loading) return Promise.resolve(product); loading = true; return fetch(root() + 'products/' + T.handle + '.js') .then(function (r) { return r.ok ? r.json() : null; }) .then(function (p) { product = p; loading = false; return p; }) .catch(function () { loading = false; return null; }); } function renderBar(contents, total) { var bar = contents.querySelector('.mv-ship'); if (!T.bar) { if (bar) bar.remove(); return; } if (!bar) { bar = document.createElement('div'); bar.className = 'mv-ship'; contents.insertBefore(bar, contents.firstChild); } var left = T.threshold - total; var pct = Math.max(0, Math.min(100, Math.round((total / T.threshold) * 100))); bar.className = 'mv-ship' + (left > 0 ? '' : ' mv-ship--done'); bar.innerHTML = '

' + TRUCK + '' + (left > 0 ? T.barLeft.replace('{amount}', money(left)) : T.barDone) + '

' + '

'; } function variantFor(colour, size) { if (!product) return null; var want = colour + ' / ' + size; for (var i = 0; i < product.variants.length; i++) { if (product.variants[i].title === want) return product.variants[i]; } return null; } function renderUpsell(contents, cart) { var already = (cart.items || []).some(function (i) { return ALL_HANDLES.indexOf(i.handle) !== -1; }); var box = contents.querySelector('.mv-upsell'); if (already || !product) { if (box) box.remove(); return; } if (box) return; box = document.createElement('div'); box.className = 'mv-upsell'; var colours = product.options[0].values; var sizes = product.options[1].values; var img = (product.featured_image || '').replace(/^\/\//, 'https://'); box.innerHTML = '

' + T.upsellTitle + '

' + '

' + product.title + '

' + '

' + money(product.price) + '' + (product.compare_at_price > product.price ? ' ~~' + money(product.compare_at_price) + '~~' : '') + '

' + '

' + '' + '' + '

' + '' + '

' + '

'; box.querySelector('.mv-upsell__add').addEventListener('click', function () { var btn = this; var v = variantFor( box.querySelector('[data-k="colour"]').value, box.querySelector('[data-k="size"]').value ); if (!v || !v.available) { btn.textContent = T.sold; setTimeout(function () { btn.textContent = T.add; }, 2000); return; } btn.disabled = true; btn.textContent = T.busy; fetch(root() + 'cart/add.js', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ items: [{ id: v.id, quantity: 1 }] }) }).then(function () { schedule(); }).catch(function () { btn.disabled = false; btn.textContent = T.retry; }); }); var items = contents.querySelector('.kaching-cart-item-container'); var mod = items ? items.closest('.kaching-cart__module') : null; if (mod && mod.parentNode === contents) { contents.insertBefore(box, mod.nextSibling); } else { contents.appendChild(box); } } function renderAssure() { var btn = document.querySelector('.kaching-cart__checkout-button'); if (!btn || !btn.parentNode) return; var ex = btn.parentNode.querySelector('.mv-assure'); if (ex && ex.nextElementSibling === btn) return; if (ex) ex.remove(); var el = document.createElement('div'); el.className = 'mv-assure'; el.innerHTML = RETURN + '' + T.assure + ''; btn.parentNode.insertBefore(el, btn); } function paint() { renderAssure(); var contents = document.querySelector('.kaching-cart__contents'); if (!contents) return; Promise.all([ fetch(root() + 'cart.js', { headers: { 'Accept': 'application/json' } }).then(function (r) { return r.json(); }), loadProduct() ]).then(function (res) { var cart = res[0]; if (!cart || !cart.items || !cart.items.length) return; renderBar(contents, cart.total_price); renderUpsell(contents, cart); }).catch(function () { /* stil falen, de drawer blijft werken */ }); } var scheduled = false; function schedule() { if (scheduled) return; scheduled = true; requestAnimationFrame(function () { scheduled = false; paint(); }); } function boot() { var el = document.querySelector('kaching-cart'); if (!el) return setTimeout(boot, 300); schedule(); new MutationObserver(function (muts) { for (var i = 0; i < muts.length; i++) { var t = muts[i].target; if (t && t.closest && (t.closest('.mv-ship') || t.closest('.mv-upsell') || t.closest('.mv-assure'))) continue; return schedule(); } }).observe(el, { childList: true, subtree: true }); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', boot); } else { boot(); } })();