/* * UiChemy interactive runtime — ships in a uichemy_composer widget's raw_js. * * Why: React event handlers/state do NOT survive the static export. The * browser-settle already bakes correct *initial* values (counters, etc.), but * ongoing behavior (accordions, tabs, carousels) is gone. This tiny vanilla * runtime restores it for sections that mark their structure with data-uich-* * hooks. It is idempotent and a complete no-op when no hooks are present, so it * is safe to include on every interactive section. * * Conventions (the JSX should emit these for behavior to auto-wire): * Accordion: [data-uich-accordion(="multi")] * [data-uich-acc-item] > [data-uich-acc-trigger] + [data-uich-acc-panel] * Tabs: [data-uich-tabs] * [data-uich-tab][data-uich-target="X"] ... [data-uich-panel="X"] * Carousel: [data-uich-carousel(="autoplay-ms")] * [data-uich-track] (children = slides); optional * [data-uich-prev] / [data-uich-next] / [data-uich-dot][data-uich-index] * Toggle: [data-uich-toggle] (role=switch-ish); flips data-checked * Gallery: [data-uich-gallery] * [data-uich-gallery-main] (the big img) * [data-uich-gallery-thumb] (each thumb; optional * data-uich-gallery-full for a larger source) * Stars: [data-uich-stars] containing an element with * [data-uich-stars-pct="0-100"] whose width it sets * Quantity: [data-uich-qty] * [data-uich-qty-dec] + [data-uich-qty-input] + [data-uich-qty-inc] * Woo cart: [data-uich-woo-cart] (one per section; holds an empty * `div.widget_shopping_cart_content` for Woo to replace) * [data-uich-woo-cart-item] (each product card) * [data-uich-woo-remove] (that card's remove control) * [data-uich-woo-view-cart] (a link to the cart page) * Woo items: [data-uich-woo-items] (the checkout mount; review-order rows * get a Store API thumbnail, img.uich-woo-thumb) * Woo qty: no marker on the live page — every * `.woocommerce-cart-form .quantity` gets a −/+ stepper * (.uich-wqty; locked rows .is-locked + .uich-wqty-locked); * `data-uich-wqty` in the JSX is what attaches this runtime * Filters: [data-uich-filter-group] (chips; [data-uich-filter-all] = All) * [data-uich-filter-item] > [data-uich-filter-label] * (cards, scoped to the nearest [data-uichemy-root]) * Coupons: [data-uich-coupon] (the card) with optional * data-uich-coupon-code / -type / -amount / -currency / * -expires / -cart-url; descendants * [data-uich-coupon-headline] [data-uich-coupon-expiry] * [data-uich-coupon-message] [data-uich-coupon-apply] * Countdown: [data-uich-countdown="seconds-from-load"] * [data-uich-cd-unit="days|hours|minutes|seconds"] */ (function () { function initAccordions(root) { root.querySelectorAll('[data-uich-accordion]').forEach(function (acc) { if (acc.__uichInit) return; acc.__uichInit = true; var multi = acc.getAttribute('data-uich-accordion') === 'multi'; acc.querySelectorAll('[data-uich-acc-trigger]').forEach(function (trig) { trig.addEventListener('click', function () { var item = trig.closest('[data-uich-acc-item]'); if (!item) return; var panel = item.querySelector('[data-uich-acc-panel]'); var open = item.getAttribute('data-open') === 'true'; if (!multi) { acc.querySelectorAll('[data-uich-acc-item]').forEach(function (it) { it.setAttribute('data-open', 'false'); var p = it.querySelector('[data-uich-acc-panel]'); if (p) p.style.maxHeight = '0px'; }); } item.setAttribute('data-open', String(!open)); if (panel) panel.style.maxHeight = open ? '0px' : panel.scrollHeight + 'px'; }); }); }); } function initTabs(root) { root.querySelectorAll('[data-uich-tabs]').forEach(function (tabs) { if (tabs.__uichInit) return; tabs.__uichInit = true; var btns = tabs.querySelectorAll('[data-uich-tab]'); function activate(target) { btns.forEach(function (b) { b.setAttribute('data-active', String(b.getAttribute('data-uich-target') === target)); }); tabs.querySelectorAll('[data-uich-panel]').forEach(function (p) { p.style.display = p.getAttribute('data-uich-panel') === target ? '' : 'none'; }); } btns.forEach(function (b) { b.addEventListener('click', function () { activate(b.getAttribute('data-uich-target')); }); }); if (btns[0]) activate(btns[0].getAttribute('data-uich-target')); }); } function initCarousels(root) { root.querySelectorAll('[data-uich-carousel]').forEach(function (car) { if (car.__uichInit) return; car.__uichInit = true; var track = car.querySelector('[data-uich-track]'); if (!track) return; var count = track.children.length; var i = 0; var dots = car.querySelectorAll('[data-uich-dot]'); function go(n) { i = (n + count) % count; track.style.transform = 'translateX(-' + i * 100 + '%)'; if (track.style.transition === '') track.style.transition = 'transform .4s ease'; dots.forEach(function (d) { d.setAttribute('data-active', String(Number(d.getAttribute('data-uich-index')) === i)); }); } var prev = car.querySelector('[data-uich-prev]'); var next = car.querySelector('[data-uich-next]'); if (prev) prev.addEventListener('click', function () { go(i - 1); }); if (next) next.addEventListener('click', function () { go(i + 1); }); dots.forEach(function (d) { d.addEventListener('click', function () { go(Number(d.getAttribute('data-uich-index')) || 0); }); }); var ap = parseInt(car.getAttribute('data-uich-carousel') || '0', 10); if (ap > 0) setInterval(function () { go(i + 1); }, ap); go(0); }); } function initToggles(root) { root.querySelectorAll('[data-uich-toggle]').forEach(function (t) { if (t.__uichInit) return; t.__uichInit = true; t.addEventListener('click', function () { t.setAttribute('data-checked', String(t.getAttribute('data-checked') !== 'true')); }); }); } /** * A designed quantity stepper over a real . * * WHY THE INPUT IS REAL AND NOT A . WooCommerce reads the quantity * straight out of the request, so on a GET add-to-cart form the value has to * live in a NAMED form control or the cart receives nothing and silently * adds one. Keeping a native number input also means the control still works * with this runtime absent — the browser's own spinner does the job — which * matters because a section can be exported to a page where the js never * runs. The buttons are progressive enhancement over a working control, not * the control itself. * * `min` defaults to 1: zero is not a quantity, and Woo treats it as a * removal. `max` is honoured when the design sets one (a stock limit). */ function initQty(root) { root.querySelectorAll('[data-uich-qty]').forEach(function (box) { if (box.__uichInit) return; box.__uichInit = true; var input = box.querySelector('[data-uich-qty-input]'); if (!input) return; var min = parseInt(input.getAttribute('min') || '1', 10); var maxAttr = input.getAttribute('max'); var max = maxAttr ? parseInt(maxAttr, 10) : Infinity; function set(n) { if (isNaN(n)) n = min; input.value = String(Math.max(min, Math.min(max, n))); input.dispatchEvent(new Event('change', { bubbles: true })); } var dec = box.querySelector('[data-uich-qty-dec]'); var inc = box.querySelector('[data-uich-qty-inc]'); if (dec) dec.addEventListener('click', function () { set(parseInt(input.value, 10) - 1); }); if (inc) inc.addEventListener('click', function () { set(parseInt(input.value, 10) + 1); }); // A typed value is clamped on blur rather than per keystroke, so a // partially typed number is not rewritten under the cursor. input.addEventListener('blur', function () { set(parseInt(input.value, 10)); }); }); } /** * Gallery thumbnails that actually change the main image. * * The design expresses this as React state — `activeImage` plus an onClick * per thumb — and none of that survives the static export, so the strip * rendered correctly and clicking did nothing. Same class of failure as the * tabs. * * DELEGATED ON THE CONTAINER, not bound per thumb, because the thumbs are * produced by a Twig `{% for %}` at render time: the count is whatever the * product's gallery holds, and on a re-render they are different nodes. A * listener on the container covers all of them however many there are. * * `data-uich-gallery-full` is preferred over the thumb's own `src`. The strip * is bound at `woocommerce_thumbnail` size, so copying that into the main * slot would swap a large image for a small one and show it blurred; the * `full` field carries the same image at `woocommerce_single`. */ function initGallery(root) { root.querySelectorAll('[data-uich-gallery]').forEach(function (box) { if (box.__uichInit) return; box.__uichInit = true; var main = box.querySelector('[data-uich-gallery-main]'); if (!main) return; function activate(thumb) { var img = thumb.matches('img') ? thumb : thumb.querySelector('img'); var src = thumb.getAttribute('data-uich-gallery-full') || (img && img.getAttribute('data-uich-gallery-full')) || (img && img.getAttribute('src')); if (!src) return; main.setAttribute('src', src); var alt = img && img.getAttribute('alt'); if (alt) main.setAttribute('alt', alt); box.querySelectorAll('[data-uich-gallery-thumb]').forEach(function (t) { t.setAttribute('data-active', String(t === thumb)); }); } box.addEventListener('click', function (e) { var thumb = e.target.closest && e.target.closest('[data-uich-gallery-thumb]'); if (thumb && box.contains(thumb)) { e.preventDefault(); activate(thumb); } }); // Mark the first thumb active so the strip agrees with the main image on // load. Does NOT swap the source — the main image is already the // product's featured photo, which is the right thing to open on. var first = box.querySelector('[data-uich-gallery-thumb]'); if (first) first.setAttribute('data-active', 'true'); }); } /** * Star ratings a section draws itself. * * The fill width arrives on a data attribute rather than in `style` because * the export's settle pass re-renders the markup in a browser and computes * styles: an invalid `width:{{ … }}%` is dropped there, a data attribute is * not. So the percentage rides through the export intact and is applied here. * * Idempotent and inert when the attribute is absent, so a card whose product * has no rating simply keeps a zero-width fill. */ function initStars(root) { root.querySelectorAll('[data-uich-stars]').forEach(function (box) { if (box.__uichInit) return; box.__uichInit = true; box.querySelectorAll('[data-uich-stars-pct]').forEach(function (fill) { var pct = parseFloat(fill.getAttribute('data-uich-stars-pct')); if (isNaN(pct)) pct = 0; fill.style.width = Math.max(0, Math.min(100, pct)) + '%'; }); }); } /** * WHICH PRODUCTS ARE IN THE CART, and the key that removes each one. * * WHY THIS EXISTS. A product card can ADD without help — Woo's own * `add-to-cart.js` handles the click and marks the button `.added` — but it * cannot REMOVE, because removing needs the item's `cart_item_key` and * nothing in a product loop knows one. `product.id` is not it: the key is a * hash of the product plus whatever else went into the line. * * The key exists in exactly one place a page can reach: the mini-cart * fragment Woo returns from every add and every remove * (`div.widget_shopping_cart_content`), whose own remove link carries * `data-product_id`, `data-cart_item_key` and a nonced href. So the section * ships an EMPTY `div.widget_shopping_cart_content` inside a hidden mount and * Woo keeps it current for free — `updateFragments` replaces that div by * selector on every cart change, whether or not anyone is looking at it. * * Read from the DOM rather than from Woo's jQuery events, and watched with a * MutationObserver: the fragment arrives as a REPLACED child of the mount, so * one observer covers add, remove and any other cart change, with no * dependency on jQuery being reachable from here. * * The controls are handed to Woo rather than wired ourselves. Marking one * `remove_from_cart_button` and giving it the key is enough — Woo delegates * that class off `document.body`, so it does the AJAX, the failure fallback to * the href, and the `removed_from_cart` fragment update, and this observer * then syncs the cards back. One `fetch` on load, because the state on a * fresh page is whatever the cart already holds: nothing else refreshes the * fragment (Woo enqueues `cart-fragments.js` only where a cart widget is * rendered), so without it a reload would forget every item. */ function initWooCart(root) { var mount = root.querySelector('[data-uich-woo-cart]'); if (!mount || mount.__uichInit) return; mount.__uichInit = true; var FRAGMENT = 'div.widget_shopping_cart_content'; function sync() { var inCart = {}; mount.querySelectorAll('a[data-cart_item_key][data-product_id]').forEach(function (a) { inCart[a.getAttribute('data-product_id')] = { key: a.getAttribute('data-cart_item_key'), href: a.getAttribute('href') || '#', }; }); document.querySelectorAll('[data-uich-woo-cart-item]').forEach(function (card) { var cta = card.querySelector('.add_to_cart_button[data-product_id]'); var rm = card.querySelector('[data-uich-woo-remove]'); var entry = cta ? inCart[cta.getAttribute('data-product_id')] : null; card.setAttribute('data-in-cart', String(!!entry)); /* `.added` is Woo's own class, reused here so the "Added" label needs no * second CSS rule and survives a reload. Simple products only: a * variable one reads "Select options" and has to go to its own page to * choose a variation, so overlaying "Added" on it would describe the * wrong thing even when one of its variations is in the cart. */ if (cta && cta.getAttribute('data-product-type') === 'simple') { cta.classList[entry ? 'add' : 'remove']('added'); } if (!rm) return; if (entry) { rm.setAttribute('href', entry.href); rm.setAttribute('data-cart_item_key', entry.key); rm.classList.add('remove_from_cart_button'); } else { rm.setAttribute('href', '#'); rm.removeAttribute('data-cart_item_key'); rm.classList.remove('remove_from_cart_button'); } }); } /* The cart page, from the only source that is always right. * * The template ships `/my-cart/` so the link works with no JS, but a slug * is a guess: WooCommerce's Cart page is an ASSIGNMENT, and a re-import * moves it (see the build spec's re-import checklist). Woo prints * `wc_add_to_cart_params` inline on every Woo page carrying the assigned * page's real permalink — the value its own "View cart" notice uses — so * that is written over the authored fallback. Left alone when the global is * absent, i.e. any page without WooCommerce, where the fallback is still * the best answer available. */ var wooCartUrl = (window.wc_add_to_cart_params || {}).cart_url; if (wooCartUrl) { document.querySelectorAll('[data-uich-woo-view-cart]').forEach(function (a) { a.setAttribute('href', wooCartUrl); }); } if (typeof MutationObserver === 'function') new MutationObserver(sync).observe(mount, { childList: true, subtree: true }); sync(); if (typeof fetch === 'function') fetch('/?wc-ajax=get_refreshed_fragments', { credentials: 'same-origin' }) .then(function (r) { return r.ok ? r.json() : null; }) .then(function (d) { var html = d && d.fragments && d.fragments[FRAGMENT]; if (!html) return; var box = document.createElement('div'); box.innerHTML = html; var fresh = box.firstElementChild; if (!fresh) return; var cur = mount.querySelector(FRAGMENT); if (cur) cur.replaceWith(fresh); else mount.appendChild(fresh); sync(); // the observer fires too; sync is idempotent }) .catch(function () {}); } /* CHECKOUT LINE-ITEM THUMBNAILS. * * WooCommerce's cart template renders a `product-thumbnail` cell; its * CHECKOUT review template does not — `review-order.php` prints a name, a * quantity and a total, and nothing else. So the image cannot be styled into * existence, and it cannot be bound either: there is no `cart` or `order` * provider on this build, so no dynamic tag has anything to read. * * What DOES exist is Woo's Store API, which returns the current session's * cart including each item's thumbnail, with no PHP and no plugin. This * fetches it and prepends the image to each review row. * * PAINTED ON EVERY RENDER, NOT ONCE. Woo's checkout.js runs * `update_order_review` on load and again on every country / state / postcode * / shipping-method / coupon change, and the response REPLACES * `.woocommerce-checkout-review-order-table` wholesale. A one-shot injection * therefore shows the thumbnails only until that first update lands, and * loses them for the rest of the page's life — present while the table is * blocked mid-refresh, gone the moment it settles. That is the bug this * guards, and it is why the product NAME looks reliable by comparison: Woo * re-prints the name itself, while the image has to be put back by hand after * every re-render. `paint` is therefore idempotent and driven by two signals. * * Matched by NAME, not by index. The rows and the API items come from the * same cart, but a coupon, a fee line or a plugin can insert a row, and * pairing an image with the wrong product is worse than showing none. * * Only runs where the cart still exists. On order-received the cart is * already emptied, so that page shows no thumbnails — it is about an order, * not a cart, and adding them there needs a PHP filter. */ function initWooItems(root) { var mounts = root.querySelectorAll('[data-uich-woo-items]'); if (!mounts.length) return; var byName = null; // normalised product name -> thumbnail src var inflight = null; // shared by every repaint queued while a fetch is open var retriedFor = -1; // miss count already refetched for, so misses can't loop /* Both sides are normalised the same way. The API can hand back an * entity-encoded title ("Tom & Jerry Cake") where the DOM gives us the * decoded text, and Woo pads the cell with (which \s does match). * DOMParser rather than the innerHTML-on-a-textarea trick: the document it * builds is inert, so a title carrying markup can neither run nor fetch. */ function key(s) { var raw = String(s == null ? '' : s); var text = raw; if (raw.indexOf('&') !== -1 && window.DOMParser) { try { text = new DOMParser().parseFromString(raw, 'text/html').documentElement.textContent || raw; } catch (e) { text = raw; } } return text.replace(/\s+/g, ' ').trim().toLowerCase(); } /* The cell is "Name × 2" and, for a * variable product, a

AFTER that quantity. Read only * what precedes the quantity, or the attribute list is glued onto the name * and nothing matches. */ function rowName(cell) { var out = ''; var kids = cell.childNodes; for (var i = 0; i < kids.length; i++) { var n = kids[i]; if (n.nodeType === 1) { if (n.classList.contains('product-quantity')) break; if (n.nodeName === 'DL') continue; } out += n.textContent || ''; } return out.replace(/\s+/g, ' ').trim(); } /* Exact match first. A variation's row name and its Store API name can * differ by the attribute suffix ("Hoodie" vs "Hoodie - Blue, Large"), so * fall back to a prefix match — but only when exactly one item matches, * because "Chocolate Croissant" prefixes "Chocolate Croissant Deluxe" too * and a wrong pairing is the one outcome worse than a missing image. */ function lookup(name) { var k = key(name); if (!k) return null; if (byName[k]) return byName[k]; var hit = null, n = 0; for (var other in byName) { if (!Object.prototype.hasOwnProperty.call(byName, other) || !other) continue; if (k.indexOf(other) === 0 || other.indexOf(k) === 0) { hit = byName[other]; n++; } } return n === 1 ? hit : null; } function load(force) { if (inflight) return inflight; if (byName && !force) return Promise.resolve(byName); inflight = (typeof fetch === 'function' ? fetch('/wp-json/wc/store/v1/cart', { credentials: 'same-origin' }) : Promise.reject(new Error('fetch unavailable'))) .then(function (r) { return r.ok ? r.json() : null; }) .then(function (data) { var map = {}; var items = (data && data.items) || []; items.forEach(function (it) { var img = it.images && it.images[0]; var k = key(it.name); if (img && k) map[k] = img.thumbnail || img.src; }); byName = map; }) .catch(function () { if (!byName) byName = {}; }) .then(function () { inflight = null; return byName; }); return inflight; } function paint() { var misses = 0; Array.prototype.forEach.call(mounts, function (mount) { var cells = mount.querySelectorAll('tr.cart_item .product-name'); Array.prototype.forEach.call(cells, function (cell) { if (cell.querySelector('.uich-woo-thumb')) return; // idempotent var name = rowName(cell); if (!name) return; var src = lookup(name); if (!src) { misses++; return; } var im = document.createElement('img'); im.className = 'uich-woo-thumb'; im.src = src; im.alt = name; im.loading = 'lazy'; cell.insertBefore(im, cell.firstChild); }); }); return misses; } /* A row we cannot pair is usually permanent (a fee line), but it can also * mean the cart gained an item since the fetch — a coupon that adds a free * product. So an unpaired row refetches ONCE per distinct miss count, which * covers the live change without letting a fee line refetch on every * mutation. */ function refresh(force) { load(force).then(function () { var misses = paint(); if (!misses) { retriedFor = -1; return; } if (!force && misses !== retriedFor) { retriedFor = misses; refresh(true); } }); } /* Our own insertion is itself a childList mutation, so coalesce to * one pass per turn; the second pass finds every cell already filled and * stops. */ var queued = false; function schedule() { if (queued) return; queued = true; Promise.resolve().then(function () { queued = false; refresh(false); }); } Array.prototype.forEach.call(mounts, function (mount) { if (mount.__uichWooItems) return; mount.__uichWooItems = true; if (typeof MutationObserver === 'function') new MutationObserver(schedule).observe(mount, { childList: true, subtree: true }); }); /* Two signals, deliberately. The observer needs no jQuery and catches the * table being replaced whatever did it. `updated_checkout` is Woo's own * "the review table is final" event, and jQuery is required to hear it: * Woo triggers it through jQuery, which does not dispatch a native event, * so addEventListener would never fire. The cart-mutation events are the * only ones that refetch — repainting is free, a round trip on every * address keystroke is not. */ var jq = window.jQuery; if (jq) { jq(document.body).on('updated_checkout', schedule); jq(document.body).on( 'added_to_cart removed_from_cart updated_cart_totals wc_fragments_refreshed', function () { refresh(true); } ); } refresh(false); } /** * PLUS/MINUS ON WOOCOMMERCE'S OWN CART QUANTITY. * * WooCommerce renders the cart quantity as a bare `` * and nothing else. There are no +/- buttons in Woo, there never have been; * the only steppers a shopper ever sees are the browser's native spinner * arrows, which this section deliberately suppresses * (`appearance: textfield`) because they are tiny, Chrome-only and ugly * against the rest of the design. So the cart shipped a type-a-number box. * * WORSE ON SOME ROWS: NOTHING AT ALL. `templates/global/quantity-input.php` * renders `type="hidden"` when `min_value === max_value`: * * $type = ( $max_value && $min_value === $max_value ) ? 'hidden' : 'number'; * * which is every product marked **Sold individually**, and every * stock-managed product down to its last unit with backorders off. Measured * on two live stores: three of eight products on one, one of seven on the * other, each rendering an 80x0 cell — a gap in the row where the control * should be. The shopper cannot tell that from a broken page. * * SO THE STEPPER IS BUILT HERE, around Woo's input rather than instead of * it. The input stays the form control Woo reads on submit — renaming or * replacing it loses the quantity — and keeps working with this file absent. * * A LOCKED ROW GETS A STEPPER TOO, disabled, showing the value. Hiding the * control entirely is what Woo does and it is the thing being fixed: an * empty cell reads as a fault, a greyed 1 reads as a rule. The hidden input * is left exactly as Woo wrote it so the form still submits. * * WHY IT DOES NOT SUBMIT ITSELF. An earlier version of this stepper * auto-clicked `update_cart` ~400ms after every +/- tap or typed value, on * the theory that a disabled-looking button otherwise reads as broken. In * practice that meant editing several rows before checking out was * impossible: the first row's edit round-tripped and re-rendered the form * (a fresh DOM node) out from under whatever the shopper was about to do to * the second row. Reported directly: "I want to manually update multiple * products quantity, not possible in auto update — once I'm done then * Update cart." So the stepper now only ever writes the input's value and * dispatches a native `change` — which is what Woo's own cart.js listens * for to enable the Update cart button — and stops there. Nothing submits * until the shopper clicks Update cart themselves, however many rows they * touched first. */ function initWooQty(root) { /* One row. Idempotent: a replaced row is a NEW node, so the expando is * absent and it upgrades again; a row we already own returns at the * button check. */ function upgrade(box) { if (box.__uichWqty) return; box.__uichWqty = true; var input = box.querySelector('input.qty'); if (!input || box.querySelector('.uich-wqty-btn')) return; var min = parseInt(input.getAttribute('min') || '0', 10); var maxAttr = input.getAttribute('max'); var max = maxAttr ? parseInt(maxAttr, 10) : Infinity; /* Woo's own test for "no choice to make", not a guess at one. A hidden * input is the rendered symptom; min === max is the cause, and it is * also true of the rare number input Woo leaves visible. */ var locked = input.type === 'hidden' || (isFinite(max) && max === min); box.classList.add('uich-wqty'); if (locked) box.classList.add('is-locked'); function button(kind, glyph, label) { var b = document.createElement('button'); b.type = 'button'; b.className = 'uich-wqty-btn uich-wqty-' + kind; b.textContent = glyph; b.setAttribute('aria-label', label); if (locked) { b.disabled = true; b.setAttribute('aria-disabled', 'true'); } return b; } var dec = button('dec', '−', 'Decrease quantity'); var inc = button('inc', '+', 'Increase quantity'); box.insertBefore(dec, input); /* The locked row has no visible input to sit between the buttons, so it * gets a readout. aria-hidden: the quantity is already in the row's * accessible name via Woo's own screen-reader label. */ if (locked) { var readout = document.createElement('span'); readout.className = 'uich-wqty-locked'; readout.textContent = input.value || '1'; readout.setAttribute('aria-hidden', 'true'); box.insertBefore(readout, input.nextSibling); box.appendChild(inc); return; } box.appendChild(inc); function set(n) { if (isNaN(n)) n = min; var next = Math.max(min, Math.min(max, n)); if (String(next) === String(input.value)) return; input.value = String(next); /* Dispatch only. Woo's own cart.js listens for `change` on `.qty` to * un-disable `[name="update_cart"]` — that's the only effect wanted * here. No timer, no auto-click: the shopper edits as many rows as * they like, then submits once with Update cart. */ box.classList.add('is-dirty'); input.dispatchEvent(new Event('change', { bubbles: true })); } dec.addEventListener('click', function () { set(parseInt(input.value, 10) - 1); }); inc.addEventListener('click', function () { set(parseInt(input.value, 10) + 1); }); } function scan() { Array.prototype.forEach.call( root.querySelectorAll('.woocommerce-cart-form .quantity'), upgrade ); } /* Inserting our own buttons is itself a childList mutation, so coalesce to * one pass per turn; the second pass finds every row already owned and * stops. */ var queued = false; function schedule() { if (queued) return; queued = true; Promise.resolve().then(function () { queued = false; scan(); }); } /* THE STEPPERS HAVE TO BE REBUILT, because WooCommerce throws them away. * * The classic cart is not a static page. `cart.js` delegates a click off * document.body for `[name="update_cart"]`, answers over AJAX, and * REPLACES the whole `.woocommerce-cart-form` with server HTML — which has * Woo's bare inputs and none of our buttons. Reported as "+ - shows at * first, then after I update one it is gone", and the rebuilt markup also * takes the locked rows back to an empty cell. * * Same defect the checkout thumbnails had with `update_order_review`, and * the same two signals fix it. The observer is on the `.woocommerce` * PARENT, not the form: the form is the node being replaced, so an * observer bound to it dies with it. `updated_wc_div` is Woo's own "the * cart is final" event and needs jQuery to hear — Woo triggers it through * jQuery, which does not dispatch a native event, so addEventListener * would never fire. */ Array.prototype.forEach.call(root.querySelectorAll('.woocommerce'), function (host) { if (host.__uichWqtyHost) return; host.__uichWqtyHost = true; if (typeof MutationObserver === 'function') new MutationObserver(schedule).observe(host, { childList: true, subtree: true }); }); /* A replaced row drops `is-dirty` with the node it was on, but Woo can * also answer WITHOUT replacing the row — totals only. Clearing on Woo's * own settled signal covers that; doing it in scan() would not, because * scan() also runs on our own button insertion and would clear the mark * in the same turn it was set. */ function clearDirty() { Array.prototype.forEach.call( root.querySelectorAll('.uich-wqty.is-dirty'), function (b) { b.classList.remove('is-dirty'); } ); } var jq = window.jQuery; if (jq) { /* `updated_wc_div` is the one that matters: it is what Woo fires after * swapping the cart div, i.e. after the shopper actually clicked * Update cart. Deliberately NOT `updated_cart_totals` — that re-renders * the totals block, leaves the form alone, and subscribing to it would * be a redundant wake-up. */ jq(document.body).on( 'updated_wc_div wc_cart_emptied item_removed_from_classic_cart', function () { clearDirty(); schedule(); } ); } scan(); } /* THE CATEGORY FILTER ROW on a product listing. * * Filters the grid IN PLACE. The chips are deliberately not links to the * product-category archive: following one abandons this section's design for * whatever template renders that archive. A listing's filter is expected to * narrow the products under it. * * MATCHED ON THE VISIBLE CATEGORY TEXT, not on a slug. Both sides of the * comparison are already on the page and already bound: the chip prints * `{{ term.name }}` and the card prints `{{ (product.categories|first).name }}`, * which are the same string for the same term. Binding a slug as well would * need a new per-item field on the product loop for no gain, and would add a * second thing that can drift out of step with what the visitor sees. * * The consequence, stated plainly: a product in several categories matches * its FIRST one — the one its card displays. Filtering to a category whose * products list it second would not show them. That is a limit of matching * what is rendered, and it is the same category the card claims to be in. * * `hidden` rather than `style.display`, so the section's own CSS decides how * a hidden card disappears and nothing has to remember the original display * value to restore it. */ function initFilters(root) { root.querySelectorAll('[data-uich-filter-group]').forEach(function (group) { if (group.__uichInit) return; group.__uichInit = true; /* Scoped to the section, not the document: two listings on one page must * filter their own grid. Falls back to document for a section exported * without the wrapper. */ var scope = group.closest('[data-uichemy-root]') || document; var items = scope.querySelectorAll('[data-uich-filter-item]'); var chips = group.querySelectorAll('[data-uich-filter-all], [data-uichemy-list], button, a'); if (!items.length || !chips.length) return; var norm = function (v) { return String(v == null ? '' : v).replace(/\s+/g, ' ').trim().toLowerCase(); }; function apply(key) { Array.prototype.forEach.call(items, function (item) { var label = item.querySelector('[data-uich-filter-label]'); var show = !key || norm(label && label.textContent) === key; if (show) item.removeAttribute('hidden'); else item.setAttribute('hidden', ''); }); } Array.prototype.forEach.call(chips, function (chip) { chip.addEventListener('click', function (e) { /* Chips are

Web Design

2 Articles

Five interface trends worth keeping in 2026

Design systems that save your team a day a week