/* 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'] }; var inCart = []; /* handles of the lines in the cart */ 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 || ''; }); }) .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] : ''; 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; } }); } function draw() { var host = document.querySelector('#upezCart') || document.querySelector('upez-cart'); var root = host && host.shadowRoot; if (!root) return; setsTab(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; var ranked = slides.map(function (s, i) { return { s: s, r: rank(s), i: i }; }); ranked.sort(function (a, b) { return a.r - b.r || a.i - b.i; }); var changed = false; /* The template gives the DOM-last slide extra width plus 1rem of end padding (45% wide on phones, 40% from 768px); hand both to the slide that is now visually last instead. */ var w = window.matchMedia && matchMedia('(min-width: 768px)').matches ? 40 : 45; ranked.forEach(function (x, pos) { var o = String(pos); var last = pos === ranked.length - 1; var basis = last ? 'calc(' + w + '% + 1rem)' : w + '%'; var pad = last ? '1rem' : '0px'; if (x.s.style.order !== o) { x.s.style.order = o; changed = true; } if (x.s.style.flexBasis !== basis) { x.s.style.flexBasis = basis; changed = true; } if (x.s.style.paddingRight !== pad) { x.s.style.paddingRight = pad; changed = true; } }); if (changed) { /* Embla measured slide positions in DOM order; a one-frame size change on the track makes its ResizeObserver re-initialise from the new visual order. */ 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 ===== The cross-sell cards previewed the Buy X Get Y price: a 33.99 set showed as 16.99 under the offer badge, which reads as that item's own price rather than what a third item costs once two are already in the basket. This puts the real price back on the card. Nothing about the offer itself changes - the badge stays, the item is added at full price, and the discount still lands on the lowest-priced eligible line 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. The variant is not on the price node itself, it sits on a React fiber a few levels above it, hence the walk up. 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'; function root() { var h = document.querySelector('#upezCart') || document.querySelector('upez-cart'); return h && h.shadowRoot; } function money(cents) { try { return window.upez__formatMoney(cents / 100); } catch (e) { return 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; n = n.return; d++; } return null; } function fix(el) { var v = variantFor(el); var d = v && v.applicable_discount; if (!d || !d.amount || typeof v.price !== 'number') return; var txt = money(v.price + d.amount); if (txt && el.textContent !== txt) el.textContent = txt; } function sweep() { var r = root(); if (!r) return; var els = r.querySelectorAll('[part="' + PART + '"]'); for (var i = 0; i < els.length; i++) fix(els[i]); } /* The observer corrects a card in the same frame React paints it, so a half price is never on screen; the interval is the backstop for a cart that is torn down and rebuilt. Writing only on a change is what keeps the observer from retriggering itself forever. */ var watching = null; function watch() { var r = root(); if (!r || watching === r) return; watching = r; new MutationObserver(function () { try { sweep(); } catch (e) {} }) .observe(r, { childList: true, subtree: true, characterData: true }); } setInterval(function () { try { watch(); sweep(); } catch (e) {} }, 300); })();