domma-cms 0.84.1 → 0.86.0

package/plugins/shopping-cart/public/cart.js

@@ -0,0 +1,715 @@
+/**
+ * Shopping Cart - the browser half. Loaded on every public page (plugin.json
+ * `inject`), and does nothing at all on a page with no shop on it and an
+ * empty basket.
+ *
+ * - The basket: kept in this browser (localStorage), so it follows the
+ *   shopper from page to page and visit to visit. It holds ids, options and
+ *   quantities; PRICES always come from the server (POST /quote), which is
+ *   also what checkout charges.
+ * - The basket button and drawer, on any page once there is something in it.
+ * - Adding: any [data-shop-add] button (cards, [buy-button]) and a product
+ *   page's form.
+ * - The storefront: category chips, search and sort, without a reload.
+ * - Checkout (/shop/cart) and the receipt (/shop/order/…), which waits for
+ *   the payment to be confirmed.
+ */
+
+import {formatMoney} from './lib/money.js';
+
+const API = '/api/plugins/shopping-cart';
+const KEY = 'dm-shop:basket';
+const CONFIG_KEY = 'dm-shop:config';
+const DETAILS_KEY = 'dm-shop:details';
+const PENDING_KEY = 'dm-shop:pending';
+
+// ---- Small things --------------------------------------------------------------
+
+const $ = (sel, root = document) => root.querySelector(sel);
+const $$ = (sel, root = document) => [...root.querySelectorAll(sel)];
+const esc = (s) => String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+const store = {
+    get(k, fallback = null) { try { const v = localStorage.getItem(k); return v ? JSON.parse(v) : fallback; } catch { return fallback; } },
+    set(k, v) { try { localStorage.setItem(k, JSON.stringify(v)); } catch { /* private window: the page still works */ } },
+    drop(k) { try { localStorage.removeItem(k); } catch { /* ignore */ } }
+};
+const session = {
+    get(k) { try { return JSON.parse(sessionStorage.getItem(k) || 'null'); } catch { return null; } },
+    set(k, v) { try { sessionStorage.setItem(k, JSON.stringify(v)); } catch { /* ignore */ } }
+};
+const ICON = {
+    truck: '<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h11v10H3zM14 10h4l3 3v3h-7z"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></svg>',
+    bag: '<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 7h12l-1 13H7L6 7z"/><path d="M9 7a3 3 0 0 1 6 0"/></svg>',
+    check: '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 5 5L20 7"/></svg>',
+    arrow: '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>',
+    lock: '<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>',
+    card: '<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 10h18"/></svg>',
+    bank: '<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" aria-hidden="true"><path d="M3 10 12 4l9 6M5 10v8M9.5 10v8M14.5 10v8M19 10v8M3 20h18"/></svg>',
+    paypal: '<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" aria-hidden="true"><path d="M8.3 21H4.8l2.8-17h6.1c3.4 0 5.4 1.8 4.9 4.8-.6 3.7-3.1 5.3-6.4 5.3H9.9L8.3 21z" opacity=".55"/><path d="M10.2 18.5H7.6l.3-1.9h0l1.9-11.8h5.1c2.6 0 4 1.4 3.6 3.7-.5 3-2.5 4.3-5.2 4.3h-1.9l-1.2 5.7z"/></svg>'
+};
+
+// ---- Config: from the page, or remembered from the last shop page -----------------
+
+let config = (() => {
+    const el = document.getElementById('dm-shop-config');
+    if (el) {
+        try {
+            const c = JSON.parse(el.textContent || '{}');
+            store.set(CONFIG_KEY, {shopPath: c.shopPath, currency: c.currency, floatingCart: c.floatingCart,
+                cartPosition: c.cartPosition, freeShippingOver: c.freeShippingOver, title: c.title});
+            return c;
+        } catch { /* fall through */ }
+    }
+    return store.get(CONFIG_KEY, null);
+})();
+const page = document.getElementById('dm-shop')?.dataset.shopPage || '';
+const money = (n, cur) => formatMoney(n, cur || config?.currency || 'GBP');
+const shopPath = () => config?.shopPath || '/shop';
+
+// ---- The basket ---------------------------------------------------------------------
+
+const basket = {
+    read() {
+        const b = store.get(KEY, null);
+        return Array.isArray(b?.lines) ? b.lines.filter(l => l && l.productId && l.qty > 0) : [];
+    },
+    write(lines) {
+        store.set(KEY, {lines, at: Date.now()});
+        emit();
+    },
+    count() { return basket.read().reduce((s, l) => s + l.qty, 0); },
+    add(item, qty = 1) {
+        const lines = basket.read();
+        const had = lines.find(l => l.productId === item.productId && (l.variantId || '') === (item.variantId || ''));
+        if (had) had.qty = Math.min(999, had.qty + qty);
+        else lines.push({productId: item.productId, variantId: item.variantId || '', qty, name: item.name || '', image: item.image || '', variantName: item.variantName || ''});
+        basket.write(lines);
+    },
+    set(productId, variantId, qty) {
+        const lines = basket.read();
+        const i = lines.findIndex(l => l.productId === productId && (l.variantId || '') === (variantId || ''));
+        if (i < 0) return;
+        if (qty <= 0) lines.splice(i, 1); else lines[i].qty = Math.min(999, qty);
+        basket.write(lines);
+    },
+    clear() { basket.write([]); }
+};
+
+const listeners = new Set();
+function emit() { listeners.forEach(fn => { try { fn(); } catch { /* one listener's fault */ } }); }
+// Another tab changed the basket.
+window.addEventListener('storage', (e) => { if (e.key === KEY) emit(); });
+
+/** Price the basket (the server's word), dropping from it what can no longer be bought. */
+let quoteSeq = 0;
+async function quote(extra = {}) {
+    const lines = basket.read();
+    const seq = ++quoteSeq;
+    const res = await fetch(`${API}/quote`, {method: 'POST', headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({lines: lines.map(({productId, variantId, qty}) => ({productId, variantId, qty})), ...extra})});
+    if (!res.ok) throw new Error('The basket could not be priced just now.');
+    const q = await res.json();
+    if (seq === quoteSeq) reconcile(q);
+    return q;
+}
+
+/** Make the stored basket match what the server priced (sold out, fewer left). */
+function reconcile(q) {
+    const priced = new Map(q.lines.map(l => [`${l.productId}:${l.variantId}`, l]));
+    const lines = basket.read();
+    let changed = false;
+    const next = [];
+    for (const l of lines) {
+        const p = priced.get(`${l.productId}:${l.variantId || ''}`);
+        if (!p) { changed = true; continue; }
+        if (p.qty !== l.qty || p.name !== l.name || p.image !== l.image || p.variantName !== l.variantName) changed = true;
+        next.push({...l, qty: p.qty, name: p.name, image: p.image, variantName: p.variantName});
+    }
+    if (changed) store.set(KEY, {lines: next, at: Date.now()});
+    if (changed) listeners.forEach(fn => { if (fn !== renderDrawerSoon) { try { fn(); } catch { /* ignore */ } } });
+}
+
+// ---- The basket button and drawer ------------------------------------------------------
+
+let fab = null;
+let drawer = null;
+let lastFocus = null;
+
+function ensureFab() {
+    if (fab) return fab;
+    fab = document.createElement('button');
+    fab.type = 'button';
+    fab.className = `shop-fab is-hidden${config?.cartPosition === 'left' ? ' is-left' : ''}`;
+    fab.setAttribute('aria-label', 'Open your basket');
+    fab.innerHTML = `${ICON.bag}<span class="shop-fab-label">Basket</span><span class="shop-fab-count" aria-live="polite">0</span>`;
+    fab.addEventListener('click', openDrawer);
+    document.body.appendChild(fab);
+    return fab;
+}
+
+function syncFab(bump = false) {
+    const n = basket.count();
+    const wanted = n > 0 && (config?.floatingCart !== false || page) && page !== 'cart' && page !== 'order';
+    if (!wanted && !fab) return;
+    ensureFab();
+    fab.querySelector('.shop-fab-count').textContent = String(n);
+    fab.setAttribute('aria-label', `Open your basket (${n} item${n === 1 ? '' : 's'})`);
+    fab.classList.toggle('is-hidden', !wanted);
+    if (bump) {
+        fab.classList.remove('is-bump');
+        void fab.offsetWidth;
+        fab.classList.add('is-bump');
+    }
+}
+
+function ensureDrawer() {
+    if (drawer) return drawer;
+    drawer = document.createElement('div');
+    drawer.className = `shop-drawer${config?.cartPosition === 'left' ? ' is-left' : ''}`;
+    drawer.setAttribute('role', 'dialog');
+    drawer.setAttribute('aria-modal', 'true');
+    drawer.setAttribute('aria-label', 'Your basket');
+    drawer.innerHTML = `<div class="shop-drawer-backdrop" data-close></div>
+<div class="shop-drawer-panel">
+  <div class="shop-drawer-head"><h2>Your basket <small data-d-count></small></h2><button type="button" class="shop-x" data-close aria-label="Close">×</button></div>
+  <div class="shop-drawer-body" data-d-body></div>
+  <div class="shop-drawer-foot" data-d-foot hidden>
+    <div data-d-free></div>
+    <div class="shop-drawer-sub"><span>Subtotal</span><span data-d-sub></span></div>
+    <p class="shop-drawer-hint">Delivery and any tax are worked out at checkout.</p>
+    <a class="shop-drawer-go" data-d-go href="#">${ICON.lock}<span>Checkout</span></a>
+    <button type="button" class="shop-drawer-more" data-close>Keep shopping</button>
+  </div>
+</div>`;
+    drawer.addEventListener('click', (e) => {
+        if (e.target.closest('[data-close]')) closeDrawer();
+    });
+    drawer.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') closeDrawer();
+        if (e.key === 'Tab') {
+            const f = $$('a[href], button:not([disabled]), input', drawer.querySelector('.shop-drawer-panel')).filter(x => x.offsetParent);
+            if (!f.length) return;
+            if (e.shiftKey && document.activeElement === f[0]) { e.preventDefault(); f[f.length - 1].focus(); }
+            else if (!e.shiftKey && document.activeElement === f[f.length - 1]) { e.preventDefault(); f[0].focus(); }
+        }
+    });
+    wireLines(drawer.querySelector('[data-d-body]'));
+    document.body.appendChild(drawer);
+    return drawer;
+}
+
+function openDrawer() {
+    ensureDrawer();
+    document.querySelector('.shop-toast')?.remove();
+    lastFocus = document.activeElement;
+    drawer.querySelector('[data-d-go]').href = `${shopPath()}/cart`;
+    renderDrawer(null);
+    requestAnimationFrame(() => {
+        drawer.classList.add('is-open');
+        document.documentElement.classList.add('shop-locked');
+        drawer.querySelector('.shop-x').focus();
+    });
+    quote().then(renderDrawer).catch(() => renderDrawer(null));
+}
+
+function closeDrawer() {
+    if (!drawer?.classList.contains('is-open')) return;
+    drawer.classList.remove('is-open');
+    document.documentElement.classList.remove('shop-locked');
+    lastFocus?.focus?.();
+}
+
+/** One line of the basket, drawer or checkout. `q` is its priced line, when known. */
+function lineHtml(l, q, cur) {
+    const href = q?.slug ? `${shopPath()}/${encodeURIComponent(q.slug)}` : '#';
+    const img = q?.image || l.image;
+    return `<div class="shop-line" data-line data-id="${esc(l.productId)}" data-variant="${esc(l.variantId || '')}">
+  <span class="shop-line-img">${img ? `<img src="${esc(img)}" alt="" loading="lazy">` : ICON.bag}</span>
+  <div>
+    <a class="shop-line-name" href="${esc(href)}">${esc(q?.name || l.name || 'Item')}</a>
+    <div class="shop-line-meta">${(q?.variantName || l.variantName) ? `${esc(q?.optionName || 'Option')}: ${esc(q?.variantName || l.variantName)} · ` : ''}${q ? esc(money(q.unitPrice, cur)) : ''}</div>
+    <div class="shop-line-controls">
+      <div class="shop-qty is-small"><button type="button" data-qty="-1" aria-label="One fewer">−</button><input type="number" value="${l.qty}" min="0" max="${q?.available ?? 999}" aria-label="Quantity" data-qty-input><button type="button" data-qty="1" aria-label="One more"${q?.available != null && l.qty >= q.available ? ' disabled' : ''}>+</button></div>
+      <button type="button" class="shop-remove" data-remove>Remove</button>
+    </div>
+  </div>
+  <span class="shop-line-amt">${q ? esc(money(q.lineTotal, cur)) : ''}</span>
+</div>`;
+}
+
+/** Steppers and Remove, for any container of lines. */
+function wireLines(root) {
+    const change = (row, qty) => {
+        if (qty <= 0) {
+            row.classList.add('is-leaving');
+            setTimeout(() => basket.set(row.dataset.id, row.dataset.variant, 0), 220);
+        } else {
+            basket.set(row.dataset.id, row.dataset.variant, qty);
+        }
+    };
+    root.addEventListener('click', (e) => {
+        const row = e.target.closest('[data-line]');
+        if (!row) return;
+        const step = e.target.closest('[data-qty]');
+        if (step) {
+            const input = row.querySelector('[data-qty-input]');
+            change(row, Math.max(0, (Number(input.value) || 0) + Number(step.dataset.qty)));
+        }
+        if (e.target.closest('[data-remove]')) change(row, 0);
+    });
+    root.addEventListener('change', (e) => {
+        const input = e.target.closest('[data-qty-input]');
+        if (input) change(input.closest('[data-line]'), Math.max(0, Math.floor(Number(input.value) || 0)));
+    });
+}
+
+function freeBarHtml(subtotal, cur) {
+    const over = Number(config?.freeShippingOver) || 0;
+    if (!over) return '';
+    const left = over - subtotal;
+    const pct = Math.max(4, Math.min(100, Math.round(subtotal / over * 100)));
+    return `<div class="shop-freebar"><p>${left > 0 ? `You are <strong>${esc(money(left, cur))}</strong> away from free delivery.` : `${ICON.check} <strong>Free delivery</strong> is yours.`}</p>
+<div class="shop-freebar-track"><div class="shop-freebar-fill" style="width:${pct}%"></div></div></div>`;
+}
+
+function renderDrawer(q) {
+    if (!drawer) return;
+    const lines = basket.read();
+    const body = drawer.querySelector('[data-d-body]');
+    const foot = drawer.querySelector('[data-d-foot]');
+    const n = lines.reduce((s, l) => s + l.qty, 0);
+    drawer.querySelector('[data-d-count]').textContent = n ? `(${n})` : '';
+    if (!lines.length) {
+        body.innerHTML = `<div class="shop-drawer-empty"><span class="shop-bigicon">${ICON.bag}</span><p>Your basket is empty.</p>
+<a class="shop-linkbtn" href="${esc(shopPath())}">Browse the shop</a></div>`;
+        foot.hidden = true;
+        return;
+    }
+    const cur = q?.currency;
+    const byKey = new Map((q?.lines || []).map(l => [`${l.productId}:${l.variantId}`, l]));
+    body.innerHTML = (q?.problems?.length ? `<ul class="shop-notes">${q.problems.map(p => `<li>${esc(p.message)}</li>`).join('')}</ul>` : '')
+        + lines.map(l => lineHtml(l, byKey.get(`${l.productId}:${l.variantId || ''}`), cur)).join('');
+    foot.hidden = false;
+    drawer.querySelector('[data-d-sub]').textContent = q ? money(q.subtotal, cur) : '…';
+    drawer.querySelector('[data-d-free]').innerHTML = q && q.requiresShipping ? freeBarHtml(q.subtotal, cur) : '';
+}
+
+// Re-price the open drawer after a change, once the clicking stops.
+let drawerTimer = 0;
+function renderDrawerSoon() {
+    if (!drawer?.classList.contains('is-open')) return;
+    renderDrawer(null);
+    clearTimeout(drawerTimer);
+    drawerTimer = setTimeout(() => quote().then(renderDrawer).catch(() => {}), 250);
+}
+listeners.add(renderDrawerSoon);
+listeners.add(() => syncFab());
+
+// ---- Adding -----------------------------------------------------------------------------
+
+function toast(item, qty) {
+    $('.shop-toast')?.remove();
+    const t = document.createElement('div');
+    t.className = `shop-toast${config?.cartPosition === 'left' ? ' is-left' : ''}`;
+    t.setAttribute('role', 'status');
+    t.innerHTML = `${item.image ? `<img src="${esc(item.image)}" alt="">` : `<span class="shop-toast-img">${ICON.bag}</span>`}
+<div><strong><span class="shop-toast-check">${ICON.check}</span>Added to basket</strong><small>${qty > 1 ? `${qty} × ` : ''}${esc(item.name || '')}${item.variantName ? ` · ${esc(item.variantName)}` : ''}</small></div>
+<a href="#" data-open>View</a>`;
+    t.querySelector('[data-open]').addEventListener('click', (e) => { e.preventDefault(); t.remove(); openDrawer(); });
+    document.body.appendChild(t);
+    setTimeout(() => { t.classList.add('is-out'); setTimeout(() => t.remove(), 320); }, 3200);
+}
+
+function added(btn, item, qty) {
+    basket.add(item, qty);
+    syncFab(true);
+    toast(item, qty);
+    if (btn) {
+        btn.classList.add('is-added');
+        const label = btn.querySelector('span');
+        const was = label?.textContent;
+        if (label) label.textContent = 'Added';
+        setTimeout(() => { btn.classList.remove('is-added'); if (label && was) label.textContent = was; }, 1400);
+    }
+}
+
+document.addEventListener('click', (e) => {
+    const btn = e.target.closest('[data-shop-add]');
+    if (!btn) return;
+    e.preventDefault();
+    added(btn, {productId: btn.dataset.id, name: btn.dataset.name, image: btn.dataset.image}, 1);
+});
+
+document.addEventListener('click', (e) => {
+    if (e.target.closest('[data-shop-print]')) window.print();
+});
+
+// ---- A product's page ---------------------------------------------------------------------
+
+function productPage() {
+    const root = $('[data-shop-product]');
+    if (!root) return;
+    const form = $('[data-shop-buy]', root);
+    const qtyInput = $('input[name="qty"]', form);
+    const priceEl = $('[data-shop-price]', root);
+    const stockEl = $('[data-shop-stock]', root);
+    const addBtn = $('[data-shop-addbtn]', root);
+
+    // Pictures.
+    const main = $('[data-shop-main]', root);
+    root.addEventListener('click', (e) => {
+        const t = e.target.closest('.shop-thumb');
+        if (!t || !main) return;
+        $$('.shop-thumb', root).forEach(x => x.classList.toggle('is-on', x === t));
+        main.style.opacity = '0';
+        setTimeout(() => { main.src = t.dataset.src; main.style.opacity = '1'; }, 150);
+    });
+
+    const chosen = () => $('input[name="variant"]:checked', form);
+    function syncOption() {
+        const v = chosen();
+        if (!v) {
+            if ($('input[name="variant"]', form)) { addBtn.disabled = true; $('span', addBtn).textContent = 'Sold out'; }
+            return;
+        }
+        priceEl.textContent = money(Number(v.dataset.price));
+        const left = v.dataset.left === '' ? null : Number(v.dataset.left);
+        qtyInput.max = left ?? 999;
+        if (left !== null && Number(qtyInput.value) > left) qtyInput.value = String(Math.max(1, left));
+        stockEl.textContent = left !== null && left <= 5 ? `Only ${left} left` : '';
+        addBtn.disabled = left === 0;
+    }
+    form.addEventListener('change', (e) => { if (e.target.name === 'variant') syncOption(); });
+    syncOption();
+
+    $('[data-shop-qty]', form).addEventListener('click', (e) => {
+        const b = e.target.closest('[data-step]');
+        if (!b) return;
+        const max = Number(qtyInput.max) || 999;
+        qtyInput.value = String(Math.min(max, Math.max(1, (Number(qtyInput.value) || 1) + Number(b.dataset.step))));
+    });
+
+    form.addEventListener('submit', (e) => {
+        e.preventDefault();
+        if (addBtn.disabled) return;
+        const v = chosen();
+        const qty = Math.max(1, Math.min(Number(qtyInput.max) || 999, Math.floor(Number(qtyInput.value) || 1)));
+        added(addBtn, {productId: root.dataset.id, variantId: v?.value || '', name: root.dataset.name, image: root.dataset.image,
+            variantName: v ? v.closest('label').querySelector('span').firstChild.textContent.trim() : ''}, qty);
+    });
+}
+
+// ---- The storefront: chips, search, sort ------------------------------------------------------
+
+function storefront() {
+    const grid = $('[data-shop-grid]');
+    if (!grid || page !== 'index') return;
+    const cards = $$('[data-shop-card]', grid);
+    const order = cards.slice();
+    const none = $('[data-shop-none]');
+    const search = $('[data-shop-search]');
+    const sort = $('[data-shop-sort]');
+    let category = config?.category || '';
+
+    function apply() {
+        const q = (search?.value || '').trim().toLowerCase();
+        let shown = 0;
+        for (const c of cards) {
+            const ok = (!category || c.dataset.category === category) && (!q || c.dataset.search.includes(q));
+            c.hidden = !ok;
+            if (ok) shown++;
+        }
+        const how = sort?.value || '';
+        const sorted = how === 'price-asc' ? cards.slice().sort((a, b) => a.dataset.price - b.dataset.price)
+            : how === 'price-desc' ? cards.slice().sort((a, b) => b.dataset.price - a.dataset.price)
+            : how === 'name' ? cards.slice().sort((a, b) => a.dataset.name.localeCompare(b.dataset.name))
+            : order;
+        sorted.forEach(c => grid.appendChild(c));
+        if (none) none.hidden = shown > 0;
+        const url = new URL(location.href);
+        category ? url.searchParams.set('category', category) : url.searchParams.delete('category');
+        q ? url.searchParams.set('q', q) : url.searchParams.delete('q');
+        history.replaceState(null, '', url);
+    }
+
+    document.addEventListener('click', (e) => {
+        const chip = e.target.closest('[data-shop-cat]');
+        if (chip) {
+            category = chip.dataset.shopCat;
+            $$('[data-shop-cat]').forEach(x => x.classList.toggle('is-on', x === chip));
+            apply();
+        }
+        if (e.target.closest('[data-shop-clear]')) {
+            category = '';
+            if (search) search.value = '';
+            $$('[data-shop-cat]').forEach(x => x.classList.toggle('is-on', !x.dataset.shopCat));
+            apply();
+        }
+    });
+    let t = 0;
+    search?.addEventListener('input', () => { clearTimeout(t); t = setTimeout(apply, 120); });
+    sort?.addEventListener('change', apply);
+    if (category || search?.value) apply();
+}
+
+// ---- Checkout ---------------------------------------------------------------------------------
+
+function checkout() {
+    const root = $('[data-shop-checkout]');
+    if (!root) return;
+    const linesEl = $('[data-co-lines]', root);
+    const form = $('[data-co-form]', root);
+    const summary = $('[data-co-summary]', root);
+    const totals = $('[data-co-totals]', root);
+    const methodsEl = $('[data-co-methods]', root);
+    const errorEl = $('[data-co-error]', root);
+    const payBtn = $('[data-co-pay]', root);
+    const codeForm = $('[data-co-code]', root);
+    const deliveryStep = $('[data-co-delivery]', root);
+    const addressEl = $('[data-co-address]', root);
+    const collectRow = $('[data-co-collect]', root);
+    let current = null;
+    let code = session.get('dm-shop:code') || '';
+    let busy = false;
+
+    // What they typed last time in this tab.
+    const kept = session.get(DETAILS_KEY) || {};
+    for (const [k, v] of Object.entries(kept)) {
+        const el = form.elements[k];
+        if (!el || el.type === 'radio' || el.type === 'checkbox') continue;
+        el.value = v;
+    }
+    const keep = () => {
+        const out = {};
+        for (const k of ['name', 'email', 'phone', 'line1', 'line2', 'city', 'region', 'postcode', 'country', 'note']) out[k] = form.elements[k]?.value || '';
+        session.set(DETAILS_KEY, out);
+    };
+    form.addEventListener('input', keep);
+
+    // A reminder email links here with the order: fill the basket from it (another device, a cleared browser).
+    const params = new URLSearchParams(location.search);
+    if (params.get('restore') && params.get('t')) {
+        restoreFrom(params.get('restore'), params.get('t')).finally(() => {
+            history.replaceState(null, '', location.pathname);
+            refresh();
+        });
+    }
+
+    if (config?.cancelled) {
+        errorEl.hidden = false;
+        errorEl.textContent = 'Payment was cancelled and nothing was taken. Your basket is just as you left it.';
+    }
+
+    wireLines(linesEl);
+
+    const delivery = () => (form.elements.delivery?.value === 'collect' ? 'collect' : 'ship');
+    const servicesEl = $('[data-co-services]', root);
+    let service = session.get('dm-shop:service') || '';
+
+    /** Delivery services to choose between, when the shop offers more than one (Shopping Cart Pro's zones). */
+    function renderServices(q) {
+        const list = q.shippingChoices || [];
+        servicesEl.hidden = list.length < 2 || delivery() === 'collect';
+        if (servicesEl.hidden) return;
+        const on = q.shippingChoice || list[0].id;
+        servicesEl.innerHTML = list.map(c => `<label class="shop-choice"><input type="radio" name="service" value="${esc(c.id)}"${c.id === on ? ' checked' : ''}>
+<span><span class="shop-radio"></span>${ICON.truck} ${esc(c.label)}<span class="shop-choice-end">${c.amount === 0 ? 'Free' : esc(money(c.amount, q.currency))}</span></span></label>`).join('');
+    }
+    const country = () => form.elements.country?.value || '';
+
+    function renderTotals(q) {
+        const cur = q.currency;
+        const good = (q.adjustments || []).filter(a => a.stage === 'discount' && a.code);
+        totals.innerHTML = `${q.requiresShipping && delivery() === 'ship' ? freeBarHtml(q.subtotal, cur) : ''}<dl class="shop-totals">
+  <div><dt>Subtotal <small>(${q.itemCount} item${q.itemCount === 1 ? '' : 's'})</small></dt><dd>${esc(money(q.subtotal, cur))}</dd></div>
+  ${q.adjustments.map(a => `<div class="${a.included ? 'is-included' : a.amount < 0 ? 'is-discount' : ''}"><dt>${esc(a.label)}</dt><dd>${a.stage === 'shipping' && a.amount === 0 ? 'Free' : esc(money(a.amount, cur))}</dd></div>`).join('')}
+  <div class="is-total"><dt>Total</dt><dd>${esc(money(q.total, cur))}</dd></div>
+</dl>${(q.notes || []).length || good.length ? `<ul class="shop-notes">${good.map(a => `<li class="is-good">${ICON.check} ${esc(a.code)} applied</li>`).join('')}${(q.notes || []).map(n => `<li>${esc(n.message)}</li>`).join('')}</ul>` : ''}`;
+        $('span', payBtn).textContent = q.total > 0 ? `Pay ${money(q.total, cur)}` : 'Place order';
+    }
+
+    function renderMethods(q) {
+        const had = form.elements.provider?.value;
+        if (q.total === 0) {
+            methodsEl.innerHTML = '<p class="shop-muted">Nothing to pay.</p>';
+            return;
+        }
+        if (!q.methods.length) {
+            methodsEl.innerHTML = '<p class="shop-co-error">This shop cannot take payment just now. Please get in touch with us to order.</p>';
+            payBtn.disabled = true;
+            return;
+        }
+        const icon = {stripe: ICON.card, paypal: ICON.paypal, offline: ICON.bank};
+        const end = {stripe: '<span class="shop-paymark">VISA</span><span class="shop-paymark">MC</span><span class="shop-paymark">AMEX</span>', paypal: '', offline: ''};
+        methodsEl.innerHTML = q.methods.map((m, i) => `<label class="shop-choice"><input type="radio" name="provider" value="${esc(m.id)}"${(had ? had === m.id : i === 0) ? ' checked' : ''}>
+<span><span class="shop-radio"></span>${icon[m.id] || ''} ${esc(m.label)}<span class="shop-choice-end">${end[m.id] || ''}</span></span></label>`).join('');
+    }
+
+    function renderLines(q) {
+        const lines = basket.read();
+        if (!lines.length) {
+            linesEl.innerHTML = `<div class="shop-co-empty"><span class="shop-bigicon">${ICON.bag}</span><h2>Your basket is empty</h2>
+<p class="shop-muted">Find something you like - it will wait here for you.</p><a class="shop-buy-button" href="${esc(shopPath())}">Browse the shop ${ICON.arrow}</a></div>`;
+            form.hidden = true;
+            summary.hidden = true;
+            return;
+        }
+        const byKey = new Map((q?.lines || []).map(l => [`${l.productId}:${l.variantId}`, l]));
+        linesEl.innerHTML = (q?.problems?.length ? `<ul class="shop-notes">${q.problems.map(p => `<li>${esc(p.message)}</li>`).join('')}</ul>` : '')
+            + lines.map(l => lineHtml(l, byKey.get(`${l.productId}:${l.variantId || ''}`), q?.currency)).join('');
+        form.hidden = false;
+        summary.hidden = false;
+    }
+
+    async function refresh() {
+        if (!basket.read().length) { renderLines(null); return; }
+        try {
+            const q = await quote({code, delivery: delivery(), service, address: {country: country()}});
+            current = q;
+            renderLines(q);
+            if (!basket.read().length) return;
+            const ships = q.requiresShipping;
+            deliveryStep.hidden = !ships;
+            collectRow.hidden = !(ships && q.features?.collection);
+            addressEl.hidden = !ships || delivery() === 'collect';
+            $('[data-co-paystep]', root).textContent = ships ? '3' : '2';
+            codeForm.hidden = !q.features?.codes;
+            if (code && codeForm.elements.code && !codeForm.elements.code.value) codeForm.elements.code.value = code;
+            renderServices(q);
+            renderTotals(q);
+            renderMethods(q);
+        } catch (err) {
+            linesEl.innerHTML = `<p class="shop-co-error">${esc(err.message)}</p>`;
+        }
+    }
+
+    let t = 0;
+    const refreshSoon = () => { clearTimeout(t); t = setTimeout(refresh, 200); };
+    listeners.add(refreshSoon);
+    form.addEventListener('change', (e) => {
+        if (e.target.name === 'service') { service = e.target.value; session.set('dm-shop:service', service); }
+        if (e.target.name === 'delivery' || e.target.name === 'country' || e.target.name === 'service') refreshSoon();
+    });
+    codeForm.addEventListener('submit', (e) => {
+        e.preventDefault();
+        code = (codeForm.elements.code.value || '').trim();
+        session.set('dm-shop:code', code);
+        refresh();
+    });
+
+    function showErrors(errors = {}) {
+        $$('.shop-field', form).forEach(f => { f.classList.remove('is-bad'); f.querySelector('.shop-field-err')?.remove(); });
+        let first = null;
+        for (const [k, msg] of Object.entries(errors)) {
+            const el = form.elements[k];
+            const field = el?.closest?.('.shop-field');
+            if (!field) continue;
+            field.classList.add('is-bad');
+            const s = document.createElement('span');
+            s.className = 'shop-field-err';
+            s.textContent = msg;
+            field.appendChild(s);
+            first ||= el;
+        }
+        first?.focus();
+    }
+
+    form.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        if (busy || !current) return;
+        errorEl.hidden = true;
+        if (form.elements.terms && !form.elements.terms.checked) {
+            errorEl.hidden = false;
+            errorEl.textContent = 'Please agree to the terms of sale first.';
+            return;
+        }
+        const f = form.elements;
+        const body = {
+            lines: basket.read().map(({productId, variantId, qty}) => ({productId, variantId, qty})),
+            customer: {name: f.name.value, email: f.email.value, phone: f.phone.value},
+            address: {line1: f.line1.value, line2: f.line2.value, city: f.city.value, region: f.region.value, postcode: f.postcode.value, country: country()},
+            delivery: delivery(),
+            service,
+            note: f.note.value,
+            provider: f.provider?.value || '',
+            code,
+            expectTotal: current.total
+        };
+        busy = true;
+        payBtn.disabled = true;
+        const label = $('span', payBtn).textContent;
+        $('span', payBtn).textContent = 'One moment…';
+        try {
+            const res = await fetch(`${API}/checkout`, {method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(body)});
+            const out = await res.json().catch(() => ({}));
+            if (!res.ok) {
+                if (out.errors) showErrors(out.errors);
+                if (out.quote) { reconcile(out.quote); await refresh(); }
+                errorEl.hidden = false;
+                errorEl.textContent = out.error || 'Something went wrong. Nothing has been charged.';
+                errorEl.scrollIntoView({behavior: 'smooth', block: 'center'});
+                return;
+            }
+            store.set(PENDING_KEY, {orderId: out.orderId, at: Date.now()});
+            location.href = out.redirect;
+            return;
+        } catch {
+            errorEl.hidden = false;
+            errorEl.textContent = 'Could not reach the shop - check your connection. Nothing has been charged.';
+        } finally {
+            busy = false;
+            payBtn.disabled = false;
+            $('span', payBtn).textContent = label;
+        }
+    });
+
+    refresh();
+}
+
+/** Refill the basket from an order's lines (only an order never paid). */
+async function restoreFrom(id, token) {
+    try {
+        const res = await fetch(`${API}/order/${encodeURIComponent(id)}?t=${encodeURIComponent(token)}`);
+        if (!res.ok) return;
+        const o = await res.json();
+        if (o.status !== 'pending') return;
+        const lines = (o.lines || []).filter(l => l.productId).map(l => ({productId: l.productId, variantId: l.variantId || '', qty: l.qty,
+            name: l.name, image: l.image, variantName: l.variantName || ''}));
+        if (lines.length) basket.write(lines);
+    } catch { /* the basket stays as it was */ }
+}
+
+// ---- Receipt ----------------------------------------------------------------------------------
+
+function receipt() {
+    const root = $('[data-shop-receipt]');
+    if (!root) return;
+    const {id, token} = config?.order || {};
+    const status = root.dataset.status;
+    const pending = store.get(PENDING_KEY, null);
+    // The basket became this order: empty it once the order is really in.
+    if (pending?.orderId === id && status !== 'pending') {
+        basket.clear();
+        store.drop(PENDING_KEY);
+        session.set('dm-shop:code', '');
+    }
+    if (status !== 'pending' || !id) return;
+    let tries = 0;
+    const poll = async () => {
+        tries++;
+        try {
+            const res = await fetch(`${API}/order/${encodeURIComponent(id)}?t=${encodeURIComponent(token)}`);
+            if (res.ok && (await res.json()).status !== 'pending') { location.reload(); return; }
+        } catch { /* try again */ }
+        if (tries < 40) setTimeout(poll, Math.min(8000, 1500 + tries * 500));
+    };
+    setTimeout(poll, 1500);
+}
+
+// ---- Start ------------------------------------------------------------------------------------
+
+syncFab();
+if (page === 'product') productPage();
+if (page === 'index') storefront();
+if (page === 'cart') checkout();
+if (page === 'order') receipt();