/* ===== 2026-10-23 (speed): cart-only timers run only while the drawer is OPEN ===== Every block below lives inside the cart drawer, but their timers ran on every page for the whole visit with the cart closed: three /cart.js polls (1.2-1.5s) and four redraws (250-300ms) - about two thirds of the main-thread work on product pages, which is what made pages slow to become usable. `setInterval` is shadowed inside this wrapper only (the page's own timers are untouched): each tick is skipped while the drawer is closed or the tab is hidden, and every registered tick runs at once the moment the drawer opens, so nothing in the cart is ever stale on screen. Open = Upnova's [part="drawer-backdrop"] exists in the cart's shadow root (a DOM lookup - never measure layout here, that forces a full-page style/layout pass). NOTE: the first block (the 2026-09 "Buy Two Get 50% Off On Third" marquee painter) still overwrites Upnova's cart top bar - kept as-is, only its timer is gated. */ (function () { var ffxTicks = []; function ffxCartOpen() { var host = document.querySelector('#upezCart') || document.querySelector('upez-cart'); if (!host || !host.shadowRoot) return false; if (!host.shadowRoot.querySelector('[part="upnova-07b00d17fa2e"]')) return true; /* unknown markup - behave as before */ return !!host.shadowRoot.querySelector('[part="drawer-backdrop"]'); } var setInterval = function (fn, ms) { ffxTicks.push(fn); return window.setInterval(function () { if (document.hidden || !ffxCartOpen()) return; fn(); }, ms); }; var ffxWasOpen = false; window.setInterval(function () { if (document.hidden) return; var open = ffxCartOpen(); if (open && !ffxWasOpen) ffxTicks.forEach(function (f) { try { f(); } catch (e) {} }); ffxWasOpen = open; }, 150); /* Fern — "Buy Two Get 50% Off On Third" dynamic cart message */ var EXCLUDE = ['sock', 'navidium', 'protection', 'free gift', 'our gift for you']; var THRESHOLD = 2; function findMarquee() { var direct = document.querySelector('.upez__marquee'); if (direct) return direct; var host = document.querySelector('#upezCart') || document.querySelector('upez-cart'); if (host && host.shadowRoot) { var el = host.shadowRoot.querySelector('.upez__marquee'); if (el) return el; } var all = document.querySelectorAll('*'); for (var i = 0; i < all.length; i++) { if (all[i].shadowRoot) { var m = all[i].shadowRoot.querySelector('.upez__marquee'); if (m) return m; } } return null; } function qualifyingQty(c) { var n = 0; (c.items || []).forEach(function (i) { if (!i.final_price) return; var t = ((i.product_title || '') + ' ' + (i.handle || '') + ' ' + (i.title || '')).toLowerCase(); for (var k = 0; k < EXCLUDE.length; k++) { if (t.indexOf(EXCLUDE[k]) > -1) return; } n += i.quantity; }); return n; } function paint(n) { var el = findMarquee(); if (!el) return; if (n >= 3) { el.style.display = 'none'; return; } el.style.display = ''; var msg; if (n === 2) { msg = 'Offer unlocked! Add 1 more item to get 50% off'; } else { msg = 'Add ' + (THRESHOLD - n) + ' more item(s) to unlock Buy Two Get 50% Off On Third'; } var html = '

' + msg + '

'; if (el.innerHTML !== html) el.innerHTML = html; } function refresh() { fetch('/cart.js', { headers: { Accept: 'application/json' }, cache: 'no-store' }) .then(function (r) { return r.json(); }) .then(function (c) { paint(qualifyingQty(c)); }) .catch(function () {}); } try { if (typeof cart !== 'undefined' && cart) paint(qualifyingQty(cart)); } catch (e) {} refresh(); setInterval(refresh, 1200); /* ===== 2026-09-26: ffx-bellaucci-bar (v4) - reward rail ===================== Pairs with the "rewards bar (v4)" block in Custom CSS. Neither half works alone: the CSS reads --ffx-x, .ffx-done and .ffx-next, all set here. WHY v4. The bar's markup is built by the theme snippet ffx-upnova-cart-headline (live theme, not editable from here). That snippet still has SHIP_GOAL = 200 HARDCODED, so it measures free shipping against 200 no matter what the app says. On 2026-09-25 the app was changed to Headbands 110 / Free Shipping 135 / Grip Socks 165, and the two fell out of step: the snippet ordered its discs 110 / 165 / 200 while Upnova's real order is 110 / 135 / 165. v3 matched discs to rewards by their caption text and inferred the spend from the snippet's filler, so that mismatch left the thresholds unresolved - blank gift names, and a rail frozen at 0 until a tier was hit. v4 takes NOTHING numeric from the snippet: - rewards, thresholds, names and order come straight from Upnova's config; - the spend is read from /cart.js, so the rail moves the moment the first product is added rather than waiting on the snippet's filler; - discs are paired to rewards by the data-key the snippet stamps on them (falling back to the caption), then ranked by OUR threshold - which is why free shipping now sits in the middle where it belongs; - earned state is decided here as .ffx-done. The snippet's own .is-reached is ignored, because it would still flip free shipping at 200. The one thing still taken from the snippet is the DOM itself. If the live theme's copy of that snippet ever stops stamping data-key AND stops writing .ffx-goal-name, nothing matches and the bar is left exactly as the snippet drew it rather than half-rendered. Fixing SHIP_GOAL in the theme would remove the need for most of this, but live-theme writes are blocked, so the compensation lives here. Nothing is written unless it changed - the snippet repaints on a 500ms tick and rewriting identical values every pass is what makes a bar flicker. */ (function () { var PERIOD = 250; /* redraw tick */ var POLL = 1200; /* /cart.js tick */ var CAP_HALF = 52; /* half .ffx-goal-cap's width; only an edge clamp */ /* Rewards handed over in more than one unit get the small count badge on the disc. Keyed by the reward name exactly as Upnova spells it, e.g. { 'Fern Grip Socks': 2 }. Unlisted rewards fall back to how many products their tier offers, which is 1 for both gifts today - so no badge is drawn until a tier really gives more than one. */ var QTY = {}; /* Trimmed off the front of a name before "Free " is put on it, so the bar reads "Free Grip Socks" rather than "Free Fern Grip Socks". */ var BRAND = /^fern\s+/i; var spent = null; /* null until the first /cart.js answers */ function shadow() { var h = document.querySelector('#upezCart') || document.querySelector('upez-cart'); return (h && h.shadowRoot) ? h.shadowRoot : null; } function sig(v) { return v && !Array.isArray(v) && v.value !== undefined ? v.value : v; } function money(v) { var cur = (window.Shopify && Shopify.currency && Shopify.currency.active) || 'GBP'; try { return new Intl.NumberFormat(document.documentElement.lang || 'en-GB', { style: 'currency', currency: cur }).format(v); } catch (e) { return v.toFixed(2); } } function caption(t) { return /^free\b/i.test(t) ? t : 'Free ' + t.replace(BRAND, ''); } /* The reward list, built in the SAME push order the snippet uses, so the keys line up with the data-key it stamps on each disc: shipping first as 'ship', then each visible gift tier as 'gift' + the length so far. Thresholds here are Upnova's real ones - no hardcoded shipping goal. */ function config() { var ship = sig(window.UPEZ_FREE_SHIPPING_TIERS); var gifts = sig(window.UPEZ__FREE_GIFT_DISCOUNTS); var rate = parseFloat(window.Shopify && Shopify.currency && Shopify.currency.rate) || 1; var list = [], ids = []; if (ship && ship[0] && parseFloat(ship[0].goal_value)) { list.push({ key: 'ship', at: parseFloat(ship[0].goal_value) * rate, title: ship[0].goal_label || 'Free Shipping', qty: 0 }); } (gifts || []).forEach(function (d) { (d.tiers || []).forEach(function (t) { (t.products || []).forEach(function (p) { ids.push(String(p.id)); }); if (t.hideInProgressBar || !parseFloat(t.minPurchaseValue)) return; var title = t.title || 'Free Gift'; list.push({ key: 'gift' + list.length, at: parseFloat(t.minPurchaseValue) * rate, title: title, qty: QTY[title] || (t.products || []).length || 1 }); }); }); if (!list.length) return null; var by = {}; list.forEach(function (g) { by[g.key] = g; }); return { list: list, by: by, ids: ids }; } /* Spend on Upnova's terms: cart total after discounts, less any gift lines - a gift never counts towards unlocking itself. */ function poll() { var cfg = config(); var ids = cfg ? cfg.ids : []; fetch('/cart.js', { headers: { Accept: 'application/json' }, cache: 'no-store', credentials: 'same-origin' }) .then(function (r) { return r.json(); }) .then(function (c) { var t = (c.total_price || 0) / 100; (c.items || []).forEach(function (it) { if (ids.indexOf(String(it.product_id)) !== -1) t -= (it.final_line_price || 0) / 100; }); spent = Math.max(0, t); }) .catch(function () {}); /* keep the last known spend on a failed fetch */ } function draw() { var root = shadow(); if (!root) return; var cont = root.querySelector('[part="upnova-progress-line-container"]'); if (!cont) return; var marks = [].slice.call(cont.querySelectorAll('.ffx-goal-mark')); if (!marks.length) return; var W = cont.getBoundingClientRect().width; if (!W) return; /* drawer still animating open; the next tick catches it */ var cfg = config(); if (!cfg) return; /* Pair each disc with its reward - by data-key, else by the caption the snippet writes - then rank by OUR threshold, because the snippet appends them in its own (stale) order. */ var rows = []; marks.forEach(function (mk) { var g = cfg.by[mk.getAttribute('data-key')]; if (!g) { var nm = mk.querySelector('.ffx-goal-name'); var t = nm ? nm.textContent : ''; for (var z = 0; z < cfg.list.length; z++) { if (cfg.list[z].title === t) { g = cfg.list[z]; break; } } } if (g) rows.push({ mk: mk, g: g }); }); if (!rows.length) return; /* unknown markup - leave the bar as it is */ rows.sort(function (a, b) { return a.g.at - b.g.at; }); /* Positions: the rail is cut into n+1 equal segments with a disc on each internal boundary, so three tiers land on 25% / 50% / 75%. */ var n = rows.length; var e = []; for (var i = 0; i < n; i++) e.push((i + 1) / (n + 1)); var clampLo = CAP_HALF / W, clampHi = 1 - (CAP_HALF / W); if (clampHi > clampLo) { e = e.map(function (v) { return Math.max(clampLo, Math.min(clampHi, v)); }); } /* Rail: leaves 0 as soon as anything is in the cart and lands exactly on a disc as that tier unlocks. Full width once the last tier is earned. */ var s = spent === null ? 0 : spent; var out = 1; for (var k = 0; k < n; k++) { if (s < rows[k].g.at - 0.005) { var lo = k === 0 ? 0 : rows[k - 1].g.at; var from = k === 0 ? 0 : e[k - 1]; var span = rows[k].g.at - lo; out = span > 0 ? from + ((s - lo) / span) * (e[k] - from) : from; break; } } var bar = cont.querySelector('.ffx-even-fill'); if (!bar) { bar = document.createElement('div'); bar.className = 'ffx-even-fill'; cont.insertBefore(bar, cont.firstChild); } var w = (Math.max(0, Math.min(1, out)) * 100).toFixed(2) + '%'; if (bar.style.width !== w) bar.style.width = w; var taken = false; rows.forEach(function (r, i) { var mk = r.mk, g = r.g; var x = (e[i] * 100).toFixed(3) + '%'; if (mk.style.getPropertyValue('--ffx-x') !== x) mk.style.setProperty('--ffx-x', x); var cap = mk.querySelector('.ffx-goal-cap'); if (!cap) { cap = document.createElement('div'); cap.className = 'ffx-goal-cap'; cap.innerHTML = ''; mk.appendChild(cap); } var tag = cap.querySelector('.ffx-goal-tag'); var tagTxt = caption(g.title); if (tag.textContent !== tagTxt) tag.textContent = tagTxt; var done = s >= g.at - 0.005; var away = cap.querySelector('.ffx-goal-away'); var awayTxt = done ? '' : money(g.at - s) + ' away'; if (away.textContent !== awayTxt) away.textContent = awayTxt; /* Earned state is decided HERE. The snippet's own .is-reached is ignored because it still measures free shipping against a hardcoded 200. */ if (mk.classList.contains('ffx-done') !== done) mk.classList.toggle('ffx-done', done); var isNext = !taken && !done; if (isNext) taken = true; if (mk.classList.contains('ffx-next') !== isNext) mk.classList.toggle('ffx-next', isNext); var badge = mk.querySelector('.ffx-goal-qty'); if (g.qty > 1) { if (!badge) { badge = document.createElement('span'); badge.className = 'ffx-goal-qty'; mk.appendChild(badge); } if (badge.textContent !== String(g.qty)) badge.textContent = String(g.qty); } else if (badge) { badge.remove(); } }); } poll(); setInterval(poll, POLL); try { draw(); } catch (e) {} setInterval(function () { try { draw(); } catch (e) {} }, PERIOD); /* Any click can be an add-to-cart, so re-read straight after one rather than waiting up to a full poll for the rail to move. */ document.addEventListener('click', function () { setTimeout(poll, 250); }, true); })(); /* ===== 2026-09-26: ffx-sets-first - cross-sell carousels ===================== Both cross-sell widgets ("Complete the look" = the SETS collection, "Shop by category" = SETS tab first) put a set that contains something already in the cart at the front, then the other sets, then everything else. Upnova has no per-cart ordering, so this reorders the rendered tiles with CSS `order` (never moves DOM nodes - React owns them) and then nudges the Embla track so it re-measures the slides in their new visual order. Tiles are matched by the /products/ link on each card and cart lines by their handle, so it works in every language and market. A cart line counts when its handle STARTS WITH one of the set's piece prefixes, which also catches the older per-colour "- SALE" products. Sets are sold at their own price: nothing here touches prices or discounts. */ (function () { var SETS = { 'contrast-bra-shorts-set-all-colours': ['contrast-sports-bra', 'contrast-shorts'], 'core-bra-shorts-set-all-colours': ['core-backless-sports-bra', 'core-shorts'], 'core-bra-leggings-set-all-colours': ['core-backless-sports-bra', 'core-high-waisted-leggings'], 'flow-bra-flares-set-all-colours': ['flow-sports-bra', 'flow-wrap-over-high-waisted-flared-leggings'], 'supersculpt-tank-leggings-all-colours':['supersculpt-halter-neck-tank', 'supersculpt-scrunch-bum-leggings'], 'supersculpt-bra-shorts-set-all-colours':['supersculpt-halter-neck-sports-bra', 'supersculpt-scrunch-bum-shorts'], 'contour-tank-shorts-set-all-colours': ['contour-racer-back-tank', 'contour-running-shorts', 'contour-shorts'] }; /* 2026-10-21: 3-piece sets are one product per colour (handle = set base + "-" + colour slug). TOP3 is the sets in best-seller order; TOP3_COLOURS is each set's colours, best seller first. The widget shows ONE tile per set: the colour already in the cart if there is one, else the best seller. */ var TOP3 = ["core-3-piece-set", "core-fleece-3-piece-set", "contrast-3-piece-set", "supersculpt-3-piece-set", "flow-3-piece-set", "contour-3-piece-set", "core-bra-shorts-zip-up-jacket-set", "core-bra-shorts-fleece-set", "core-bra-flares-zip-up-jacket-set", "core-bra-flares-fleece-set", "core-tank-leggings-zip-up-jacket-set", "core-tank-leggings-fleece-set", "core-tank-shorts-zip-up-jacket-set", "core-tank-shorts-fleece-set", "core-tank-flares-zip-up-jacket-set", "core-tank-flares-fleece-set", "supersculpt-bra-shorts-jacket-set", "supersculpt-tank-leggings-jacket-set", "supersculpt-tank-shorts-jacket-set", "flow-bra-tank-leggings-set", "flow-bra-tank-shorts-set"]; var TOP3_COLOURS = {"core-3-piece-set": ["cherry-red", "navy-blue", "charcoal-grey", "grey", "shadow-black", "ivory-white", "espresso", "blush-pink", "sky-blue", "matcha-green"], "core-fleece-3-piece-set": ["cherry-red", "navy-blue", "shadow-black", "espresso", "blush-pink"], "contrast-3-piece-set": ["cherry-red", "shadow-black", "sky-blue", "dusty-pink", "cobalt-blue", "light-grey"], "supersculpt-3-piece-set": ["deep-black", "baby-pink", "slate-grey", "cherry-red", "white"], "flow-3-piece-set": ["plum", "shadow-black", "cherry-red", "mocha-brown", "navy-blue", "blush-pink", "slate-blue"], "contour-3-piece-set": ["shadow-black-with-stone-grey", "mocha-with-oat", "steel-blue-with-navy", "sage-green-with-grey"], "core-bra-shorts-zip-up-jacket-set": ["cherry-red", "navy-blue", "charcoal-grey", "grey", "shadow-black", "ivory-white", "espresso", "blush-pink", "sky-blue", "matcha-green"], "core-bra-shorts-fleece-set": ["cherry-red", "navy-blue", "shadow-black", "espresso", "blush-pink"], "core-bra-flares-zip-up-jacket-set": ["cherry-red", "navy-blue", "shadow-black", "ivory-white", "espresso", "blush-pink", "sky-blue"], "core-bra-flares-fleece-set": ["cherry-red", "navy-blue", "shadow-black", "espresso", "blush-pink"], "core-tank-leggings-zip-up-jacket-set": ["cherry-red", "navy-blue", "charcoal-grey", "grey", "shadow-black", "ivory-white", "espresso", "blush-pink", "sky-blue", "matcha-green"], "core-tank-leggings-fleece-set": ["cherry-red", "navy-blue", "shadow-black", "espresso", "blush-pink"], "core-tank-shorts-zip-up-jacket-set": ["cherry-red", "navy-blue", "charcoal-grey", "grey", "shadow-black", "ivory-white", "espresso", "blush-pink", "sky-blue", "matcha-green"], "core-tank-shorts-fleece-set": ["cherry-red", "navy-blue", "shadow-black", "espresso", "blush-pink"], "core-tank-flares-zip-up-jacket-set": ["cherry-red", "navy-blue", "shadow-black", "ivory-white", "espresso", "blush-pink", "sky-blue"], "core-tank-flares-fleece-set": ["cherry-red", "navy-blue", "shadow-black", "espresso", "blush-pink"], "supersculpt-bra-shorts-jacket-set": ["deep-black", "baby-pink", "slate-grey", "cherry-red", "white"], "supersculpt-tank-leggings-jacket-set": ["deep-black", "baby-pink", "slate-grey", "cherry-red", "white"], "supersculpt-tank-shorts-jacket-set": ["deep-black", "baby-pink", "slate-grey", "cherry-red", "white"], "flow-bra-tank-leggings-set": ["plum", "shadow-black", "cherry-red", "mocha-brown", "navy-blue", "slate-blue"], "flow-bra-tank-shorts-set": ["plum", "shadow-black", "cherry-red", "mocha-brown", "navy-blue", "blush-pink", "slate-blue"]}; var inCart = []; /* handles of the lines in the cart */ var inColours = []; /* colour slugs in the cart, newest first */ function slug(s) { return String(s || '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, ''); } function handleOf(slide) { var a = slide.querySelector('a[href*="/products/"]'); var m = a && /\/products\/([^/?#]+)/.exec(a.getAttribute('href') || ''); return m ? m[1] : ''; } /* Set base of a one-per-colour set handle, or '' (longest base wins). */ function baseOf(h) { var best = ''; for (var i = 0; i < TOP3.length; i++) { var b = TOP3[i]; if (h.indexOf(b + '-') === 0 && TOP3_COLOURS[b].indexOf(h.slice(b.length + 1)) >= 0 && b.length > best.length) best = b; } return best; } function poll() { fetch('/cart.js', { headers: { Accept: 'application/json' }, cache: 'no-store', credentials: 'same-origin' }) .then(function (r) { return r.json(); }) .then(function (c) { inCart = (c.items || []).map(function (i) { return i.handle || ''; }); /* Colours in the cart, newest line first: a Colour option on merged pieces, or the "| Colour" title suffix on one-per-colour sets. */ var cols = []; (c.items || []).slice().reverse().forEach(function (i) { (i.options_with_values || []).forEach(function (o) { if (/colou?r/i.test(o.name)) cols.push(slug(o.value)); }); var t = (i.product_title || '').split(' | '); if (t.length > 1) cols.push(slug(t[t.length - 1])); }); inColours = cols; }) .catch(function () {}); } function matches(set) { var parts = SETS[set]; for (var i = 0; i < inCart.length; i++) { for (var k = 0; k < parts.length; k++) { if (inCart[i].indexOf(parts[k]) === 0) return true; } } return false; } /* -2 = set with a piece in the cart, -1 = other set, 0 = anything else. Ties keep Upnova's own order. */ function rank(slide) { var a = slide.querySelector('a[href*="/products/"]'); var m = a && /\/products\/([^/?#]+)/.exec(a.getAttribute('href') || ''); var h = m ? m[1] : ''; /* 2026-10-21: 3-piece sets ("MAKE IT A SET & SAVE 20%") in best-seller order - one product per line, ranked by the last 90 days' sales of its three pieces. Upnova itself keeps a widget's products sorted by id. */ var top = TOP3.indexOf(baseOf(h)); if (top >= 0) return -1 + top / 1000; if (!SETS[h]) return 0; return matches(h) ? -2 : -1; } /* Upnova keeps a widget's collections sorted by id, and SETS has the newest id, so its tab always comes last and a different tab opens by default. Move the SETS tab to the front and open it once per rendered widget; after that the shopper's own tab choice is left alone. */ var opened = typeof WeakSet === 'function' ? new WeakSet() : null; function setsTab(root) { [].forEach.call(root.querySelectorAll('[part="upnova-collection-tabs"]'), function (row) { var tab = null; [].forEach.call(row.querySelectorAll('[part="upnova-collection-tab"]'), function (t) { if (/^\s*sets\s*$/i.test(t.textContent)) tab = t; }); if (!tab) return; if (tab.style.order !== '-1') tab.style.order = '-1'; if (opened && !opened.has(row)) { opened.add(row); tab.click(); row.scrollLeft = 0; } }); } /* 2026-10-21: "Complete the look" (flow-3673) reads one collection per colour family (Black, Navy, Red, ...), each holding one product per 3-piece set - Upnova only loads the first 25 products of a collection, so a single collection of every colour of every set cannot work. The tabs are those families; open the one matching the newest colour in the cart, and only re-open when that colour changes, so a shopper's own tab choice sticks. */ var FAMILY_KEYS = [['black','Black'],['navy','Navy'],['plum','Plum'],['cherry','Red'],['red','Red'], ['pink','Pink'],['lilac','Pink'],['white','White'],['ivory','White'],['grey','Grey'],['gray','Grey'], ['espresso','Brown'],['mocha','Brown'],['brown','Brown'],['oat','Brown'],['blue','Blue'], ['matcha','Green'],['sage','Green'],['green','Green']]; function familyOf(colourSlug) { for (var i = 0; i < FAMILY_KEYS.length; i++) if (colourSlug.indexOf(FAMILY_KEYS[i][0]) >= 0) return FAMILY_KEYS[i][1]; return ''; } var famOpened = typeof WeakMap === 'function' ? new WeakMap() : null; function colourTab(root) { if (!famOpened) return; var fam = ''; for (var i = 0; i < inColours.length && !fam; i++) fam = familyOf(inColours[i]); if (!fam) return; [].forEach.call(root.querySelectorAll('[upez-flow-handle="flow-3673"] [part="upnova-collection-tabs"]'), function (row) { if (famOpened.get(row) === fam) return; [].forEach.call(row.querySelectorAll('[part="upnova-collection-tab"]'), function (t) { if (t.textContent.trim().toLowerCase() === fam.toLowerCase()) { famOpened.set(row, fam); t.click(); row.scrollLeft = Math.max(0, t.offsetLeft - 16); } }); }); } function draw() { var host = document.querySelector('#upezCart') || document.querySelector('upez-cart'); var root = host && host.shadowRoot; if (!root) return; setsTab(root); colourTab(root); [].forEach.call(root.querySelectorAll('[part="upnova-horizontal-cross-sell-carousel"]'), function (car) { var slides = [].slice.call(car.querySelectorAll('[part="upnova-afd895c4468f"]')); if (!slides.length) return; /* One tile per 3-piece set: keep the cart's colour, else the best seller. */ var keep = {}, groups = {}; slides.forEach(function (s) { var h = handleOf(s), b = baseOf(h); if (b) (groups[b] = groups[b] || []).push({ s: s, c: h.slice(b.length + 1) }); }); Object.keys(groups).forEach(function (b) { var g = groups[b], pick = null; for (var i = 0; i < inColours.length && !pick; i++) { for (var k = 0; k < g.length; k++) if (g[k].c === inColours[i]) { pick = g[k]; break; } } if (!pick) { var order = TOP3_COLOURS[b]; g.sort(function (x, y) { return order.indexOf(x.c) - order.indexOf(y.c); }); pick = g[0]; } keep[b] = pick.s; }); var hidden = false; slides = slides.filter(function (s) { var b = baseOf(handleOf(s)); var show = !b || keep[b] === s; var d = show ? '' : 'none'; if (s.style.display !== d) { s.style.display = d; hidden = true; } return show; }); if (!slides.length) return; /* 2026-10-24: no visual reordering any more. CSS `order` moved tiles on screen but Embla still steps through them in DOM order, so "next" (and a swipe) jumped to a tile drawn near the end and the row could not be paged through. Tiles now stay in Upnova's own order; this only clears what earlier versions set, and re-measures the track when tiles were hidden above. rank() is kept for reference but no longer used. */ var changed = hidden; slides.forEach(function (s) { if (s.style.order) { s.style.order = ''; changed = true; } if (s.style.flexBasis) { s.style.flexBasis = ''; changed = true; } if (s.style.paddingRight) { s.style.paddingRight = ''; changed = true; } }); if (changed) { var track = slides[0].parentElement; track.style.paddingRight = '1px'; requestAnimationFrame(function () { requestAnimationFrame(function () { track.style.paddingRight = ''; }); }); } }); } poll(); setInterval(poll, 1500); document.addEventListener('click', function () { setTimeout(poll, 300); }, true); setInterval(function () { try { draw(); } catch (e) {} }, 300); })(); /* ===== 2026-09-27: ffx-tabs-desktop - cross-sell tab row on a mouse ========== The "Shop by category" tab row is one line that scrolls sideways (see the matching block in Custom CSS). Touch and trackpads can swipe it, but on a desktop mouse the scrollbar is hidden, the wheel scrolls up and down, and dragging does nothing, so every tab past the drawer's edge was unreachable. This adds: wheel -> sideways scroll, click-and-drag (a drag never counts as a tab click), and a < / > button at each end that shows only while there is more to scroll that way. Buttons are only drawn on mouse devices. */ (function () { var fine = window.matchMedia && matchMedia('(hover: hover) and (pointer: fine)').matches; function wire(row) { row.setAttribute('data-ffx-tabs', '1'); row.addEventListener('wheel', function (e) { if (row.scrollWidth <= row.clientWidth) return; var d = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY; var max = row.scrollWidth - row.clientWidth; if ((d < 0 && row.scrollLeft <= 0) || (d > 0 && row.scrollLeft >= max - 1)) return; row.scrollLeft += d; e.preventDefault(); }, { passive: false }); var down = null, moved = false; row.addEventListener('mousedown', function (e) { if (e.button !== 0) return; down = { x: e.clientX, left: row.scrollLeft }; moved = false; }); window.addEventListener('mousemove', function (e) { if (!down) return; var dx = e.clientX - down.x; if (!moved && Math.abs(dx) < 5) return; moved = true; row.scrollLeft = down.left - dx; e.preventDefault(); }); window.addEventListener('mouseup', function () { down = null; }); row.addEventListener('click', function (e) { if (moved) { e.preventDefault(); e.stopPropagation(); moved = false; } }, true); row.addEventListener('dragstart', function (e) { e.preventDefault(); }); } function arrows(row) { var box = row.parentElement; if (!box) return; if (getComputedStyle(box).position === 'static') box.style.position = 'relative'; ['prev', 'next'].forEach(function (dir) { var b = box.querySelector(':scope > .ffx-tab-arrow.ffx-' + dir); if (!b) { b = document.createElement('button'); b.type = 'button'; b.className = 'ffx-tab-arrow ffx-' + dir; b.setAttribute('aria-label', dir === 'prev' ? 'Previous categories' : 'Next categories'); b.innerHTML = dir === 'prev' ? '‹' : '›'; b.addEventListener('click', function (e) { e.preventDefault(); e.stopPropagation(); var step = Math.max(120, row.clientWidth * 0.7); row.scrollBy({ left: dir === 'prev' ? -step : step, behavior: 'smooth' }); }); box.appendChild(b); } var top = row.offsetTop + row.offsetHeight / 2; var t = top + 'px'; if (b.style.top !== t) b.style.top = t; var max = row.scrollWidth - row.clientWidth; var show = max > 1 && (dir === 'prev' ? row.scrollLeft > 1 : row.scrollLeft < max - 1); if (b.classList.contains('ffx-show') !== show) b.classList.toggle('ffx-show', show); }); } function draw() { var host = document.querySelector('#upezCart') || document.querySelector('upez-cart'); var root = host && host.shadowRoot; if (!root) return; [].forEach.call(root.querySelectorAll('[part="upnova-collection-tabs"]'), function (row) { if (!row.hasAttribute('data-ffx-tabs')) wire(row); if (fine) arrows(row); }); } setInterval(function () { try { draw(); } catch (e) {} }, 250); })(); /* ===== 2026-09-28: ffx-xsell-full-price - real price on cross-sell cards ===== (v2 2026-10-23) The cross-sell cards preview the Buy X Get Y price: once the cart qualifies, every card shows AED 0 / £0 under a "Buy 2 Get 3 Free" badge, which reads as that item's own price rather than what happens once it is in the cart. This puts the real price back on the card and hides the per-card offer badge. Nothing about the offer itself changes - the item is added at full price, and the discount still lands on the lowest-priced eligible lines once the quantity is met. HOW. Upnova hands each card a variant whose price has ALREADY had the offer taken off, keeping the money it removed in variant.applicable_discount.amount, so the real price is price + that amount. Adding that number back rather than undoing a percentage keeps it right in every market and for any offer type (a free gift's amount is its whole price). Cart lines, the subtotal and checkout are untouched - only the card's own price label is rewritten. v2: the carousels are now elements with their own shadow root inside the cart's, and the card carries `product` (not `selectedVariant`) on a React fiber a few levels above the price node, so every nested shadow root is swept and both prop shapes are read. If Upnova ever stops previewing prices here, applicable_discount goes away and every card is simply left alone. */ (function () { var PART = 'upnova-product-price-current'; var BADGE = 'upnova-buy-x-get-y-discount-badge'; function roots() { var h = document.querySelector('#upezCart') || document.querySelector('upez-cart'); var out = [], stack = h && h.shadowRoot ? [h.shadowRoot] : []; while (stack.length) { var r = stack.pop(), els = r.querySelectorAll('*'), i; out.push(r); for (i = 0; i < els.length; i++) if (els[i].shadowRoot) stack.push(els[i].shadowRoot); } return out; } function money(cents) { try { return window.upez__formatMoney(cents / 100); } catch (e) { return null; } } function discounted(v) { return v && v.applicable_discount && v.applicable_discount.amount && typeof v.price === 'number' ? v : null; } function variantFor(el) { var k = null, ks = Object.keys(el), i; for (i = 0; i < ks.length; i++) { if (ks[i].indexOf('__reactFiber') === 0) { k = ks[i]; break; } } if (!k) return null; var n = el[k], d = 0; while (n && d < 14) { var p = n.memoizedProps; if (p && p.selectedVariant) return p.selectedVariant; if (p && p.product && p.product.variants) { var vs = p.product.variants; for (i = 0; i < vs.length; i++) if (discounted(vs[i])) return vs[i]; return null; } n = n.return; d++; } return null; } function fix(el) { var v = discounted(variantFor(el)); if (!v) return; var txt = money(v.price + v.applicable_discount.amount); if (txt && el.textContent !== txt) el.textContent = txt; } function sweep() { var rs = roots(), i, j, els; for (i = 0; i < rs.length; i++) { watch(rs[i]); els = rs[i].querySelectorAll('[part="' + PART + '"]'); for (j = 0; j < els.length; j++) fix(els[j]); els = rs[i].querySelectorAll('[part="' + BADGE + '"]'); for (j = 0; j < els.length; j++) if (els[j].style.display !== 'none') els[j].style.display = 'none'; } } /* The observers correct a card in the same frame React paints it, so a zero price is never on screen; the interval is the backstop for a cart that is torn down and rebuilt and picks up newly mounted widget roots. Writing only on a change is what keeps the observers from retriggering themselves forever. */ var watched = typeof WeakSet === 'function' ? new WeakSet() : null; function watch(r) { if (!watched || watched.has(r)) return; watched.add(r); new MutationObserver(function () { try { sweep(); } catch (e) {} }) .observe(r, { childList: true, subtree: true, characterData: true }); } setInterval(function () { try { sweep(); } catch (e) {} }, 300); /* 2026-10-23: the 300ms sweep above only runs while the drawer is open, so attach the observers as soon as the cart's shadow root exists (and again if Upnova rebuilds it) - an unthrottled one-element check, not a sweep. */ window.setInterval(function () { var h = document.querySelector('#upezCart') || document.querySelector('upez-cart'); if (h && h.shadowRoot && watched && !watched.has(h.shadowRoot)) { try { sweep(); } catch (e) {} } }, 1000); })(); })();