/* ============================================================================ HOWDY BREWER × UPNOVA · Mini Cart Phase 2 (JS layer) ---------------------------------------------------------------------------- Where this lives: Upnova app → Customize → Custom JavaScript (paste this entire file) Companion: Custom CSS field already has the matching styles. What this does: • Injects vendor + SKU + in-stock dot into every line item • Live "Order in Xh Ym for same-day shipping" cutoff strip with tooltip • "You're saving $X" pill above subtotal • Trust row (lock + returns + phone) above the checkout button • "Just Added" success eyebrow when an item is added to cart How it stays in sync: • MutationObserver on Upnova's shadow root, throttled to 1×/frame, with per-element dataset flags to prevent infinite re-injection loops. • Fetch interceptor on /cart/add, /cart/change, /cart/update — re-fetches /cart.js and re-renders so qty bumps update vendor/sku/savings. • setInterval(60s) re-renders the cutoff strip so the countdown ticks. ============================================================================ */ (function () { "use strict"; // ─── Config ────────────────────────────────────────────────────────── const DRAWER_PART = "upnova-072913ae8a51"; // root drawer signature const HEADER_SLOT = "upnova-f0964b90644a"; // empty slot in sticky header const ITEMS_WRAP = "upnova-bfb109770305"; // line-items container const LINE_PART = "upnova-cb3f2133b496"; // single cart line const TITLE_BLOCK = "upnova-4214c08f6e84"; // title wrapper inside line const TITLE_LINK = "upnova-b2616f6a1986"; // title const SUBTITLE = "upnova-4157fac0cad1"; // empty

under title (used for SKU/stock) const FOOTER_SLOT = "upnova-3f5a383083fd"; // empty slot above checkout (trust row) const CHECKOUT_BX = "upnova-f15969210ec7"; // checkout container (savings pill) const BTN_WRAPPER = "upnova-772b635afa8f"; // wrapper around the checkout button const BTN_FACE = "upnova-c53cd3e95d02"; // visible orange face of the button const BTN_INNER = "upnova-e67ef86b4cc7"; // inner row inside the visible face const BTN_LABEL = "upnova-6fb53ea68d77"; // "SECURE CHECKOUT" label span const BTN_PRICE_W = "upnova-1bffeaf1023a"; // duplicated price wrapper (we remove it) const CUTOFF_HOUR_CT = 15; // 3 PM Central same-day cutoff // Cached state let cachedHost = null; let cachedCart = null; let cartFetchInflight = null; let observerInstalled = false; let lastLineSignature = ""; // ─── Shadow root discovery ─────────────────────────────────────────── function findShadowRoot() { if (cachedHost && cachedHost.isConnected && cachedHost.shadowRoot) { const stillThere = cachedHost.shadowRoot.querySelector( '[part="' + DRAWER_PART + '"]' ); if (stillThere) return cachedHost.shadowRoot; } cachedHost = null; const all = document.querySelectorAll("*"); for (let i = 0; i < all.length; i++) { const el = all[i]; if (el.shadowRoot) { try { if (el.shadowRoot.querySelector('[part="' + DRAWER_PART + '"]')) { cachedHost = el; window.__hbUpnovaHost = el; return el.shadowRoot; } } catch (e) { /* closed shadow root, skip */ } } } return null; } // ─── Cart fetch (deduped) ──────────────────────────────────────────── function fetchCart(force) { if (!force && cartFetchInflight) return cartFetchInflight; cartFetchInflight = fetch("/cart.js", { credentials: "same-origin" }) .then(function (r) { return r.json(); }) .then(function (cart) { cachedCart = cart; cartFetchInflight = null; return cart; }) .catch(function () { cartFetchInflight = null; return null; }); return cartFetchInflight; } function fmtMoney(cents) { if (typeof cents !== "number" || isNaN(cents)) return ""; return "$" + (cents / 100).toFixed(2); } // ─── Per-line: vendor + SKU + in-stock ─────────────────────────────── // Idempotent via per-element existence checks (no dataset flag) so that if // Upnova ever wipes our injected children during a re-render, the next // pass restores them. function injectLineMeta(root, cart) { if (!root || !cart || !cart.items) return; const lines = root.querySelectorAll('[part="' + LINE_PART + '"]'); lines.forEach(function (line) { const handle = line.dataset.productHandle; if (!handle) return; const item = cart.items.find(function (i) { return i.handle === handle; }); if (!item) return; const titleBlock = line.querySelector('[part="' + TITLE_BLOCK + '"]'); if (!titleBlock) return; // 1. Vendor eyebrow ABOVE the title link const titleLink = titleBlock.querySelector('[part="' + TITLE_LINK + '"]'); if (item.vendor && titleLink && !titleBlock.querySelector(".hb-vendor")) { const vendor = document.createElement("div"); vendor.className = "hb-vendor"; vendor.textContent = item.vendor; titleBlock.insertBefore(vendor, titleLink); } // 2. SKU + in-stock into the empty subtitle slot const subSlot = titleBlock.querySelector('[part="' + SUBTITLE + '"]'); if (subSlot && !subSlot.querySelector(".hb-meta")) { const existingText = subSlot.textContent.trim(); const meta = document.createElement("span"); meta.className = "hb-meta"; if (item.sku) { const sku = document.createElement("span"); sku.className = "hb-meta-sku"; sku.textContent = "SKU: " + item.sku; meta.appendChild(sku); } const stock = document.createElement("span"); stock.className = "hb-meta-stock"; stock.innerHTML = 'In stock'; meta.appendChild(stock); if (existingText && existingText.length > 0) { subSlot.appendChild(document.createTextNode(existingText + " · ")); } else { subSlot.textContent = ""; } subSlot.appendChild(meta); } }); } // ─── Shipping cutoff state ─────────────────────────────────────────── function getCutoffState() { const now = new Date(); const fmt = new Intl.DateTimeFormat("en-US", { timeZone: "America/Chicago", weekday: "short", hour: "numeric", minute: "numeric", hour12: false, }); const parts = fmt.formatToParts(now); const weekday = (parts.find(function (p) { return p.type === "weekday"; }) || {}).value; let hour = parseInt((parts.find(function (p) { return p.type === "hour"; }) || {}).value, 10); const minute = parseInt((parts.find(function (p) { return p.type === "minute"; }) || {}).value, 10); if (hour === 24) hour = 0; // some locales output 24 for midnight const isWeekday = ["Mon", "Tue", "Wed", "Thu", "Fri"].indexOf(weekday) !== -1; const beforeCutoff = isWeekday && hour < CUTOFF_HOUR_CT; if (beforeCutoff) { const minsLeft = (CUTOFF_HOUR_CT - hour) * 60 - minute; const h = Math.floor(minsLeft / 60); const m = minsLeft % 60; let timeStr; if (h > 0 && m > 0) timeStr = h + "h " + m + "m"; else if (h > 0) timeStr = h + "h"; else timeStr = m + "m"; return { mode: "live", text: 'Order in ' + timeStr + ' for same-day shipping (M–F before 3 PM CT)', }; } let nextLabel; if (weekday === "Fri" || weekday === "Sat" || weekday === "Sun") { nextLabel = "Monday"; } else { nextLabel = "tomorrow"; } return { mode: "next", text: "Today's same-day cutoff has passed — ships " + nextLabel + "", }; } // ─── Cutoff strip injection ────────────────────────────────────────── function injectCutoff(root) { if (!root) return; const itemsWrap = root.querySelector('[part="' + ITEMS_WRAP + '"]'); if (!itemsWrap) return; let strip = root.querySelector(".hb-cutoff-strip"); if (!strip) { strip = document.createElement("div"); strip.className = "hb-cutoff-strip"; strip.innerHTML = '' + '' + '' + '' + '' + '' + '' + '' + 'Same-day shipping applies to in-stock items only. ' + 'Special-order, build-to-order, and some oversized LTL items require additional ' + 'lead time. You’ll see exact ship windows on each product page.' + '' + '' + 'In-stock items shipping the same method.' + ''; itemsWrap.parentNode.insertBefore(strip, itemsWrap.nextSibling); // Touch/click handler for tooltip (mobile :focus-within can be flaky) const trigger = strip.querySelector(".hb-tip-trigger"); const tip = strip.querySelector(".hb-tip"); if (trigger && tip) { trigger.addEventListener("click", function (e) { e.stopPropagation(); tip.classList.toggle("hb-tip--open"); }); // Close on outside click within the shadow root root.addEventListener("click", function (e) { if (!e.composedPath().some(function (n) { return n === tip; })) { tip.classList.remove("hb-tip--open"); } }); } } const state = getCutoffState(); const main = strip.querySelector(".hb-cutoff-main"); // Only update if actually changed — prevents observer/inject loop if (main && main.innerHTML !== state.text) { main.innerHTML = state.text; } if (strip.dataset.mode !== state.mode) { strip.dataset.mode = state.mode; } } // ─── Trust row ─────────────────────────────────────────────────────── function injectTrustRow(root) { if (!root) return; const slot = root.querySelector('[part="' + FOOTER_SLOT + '"]'); if (!slot) return; if (slot.querySelector(".hb-trust-row")) return; const trust = document.createElement("div"); trust.className = "hb-trust-row"; trust.innerHTML = // Lock — secure checkout '

' + // U-turn arrow (Heroicons arrow-uturn-left) — universally readable as "return" '

' + '' + 'Hassle-free returns

' + // Phone — support '

' + '' + '(888) 964-4239

Dispensing Parts

Lancer Volumetric Valve 1.5 Push Button | 19-0161/05-1

Lancer ADA Membrane Switch Assembly Finders Craft

Lancer Seal Ice Chute Liner for ACIB

Lancer Cover Assembly Ice Bin 23 IC

Pepsi Major Minor Bonus Label Kit for Lancer FS

Lancer Faucet / Tap 304SS Hi-Light Quick Connect

Lancer Ice Bin Lid Lancer Bevariety 23 Cold Carb Drop-In

Agitator Assembly Angled Pellet/Nugget Ice

Lancer Portion Control Valve ID Panel

Lancer Splash Plate for 3023 Drop-In

Lancer Reserve 3 Bottle for Shurflo

Lancer Relay Compressor 115V/60Hz

Lancer IBD30N Dispenser Nugget Ice, 8 Valve

Lancer Breaker Circuit ETA 3.5A

Lancer Merchandiser Medallion Kit for 22" Bevariety

Lancer 1522 Ice Chest Lid Top — Replacement Cover for Lancer Ice Bins

Lancer Ice Chest 1522 Drop-In No Cold Plate

Lancer FS30 Dispenser 16 Brand/12 Bonus ADA Nugget Ice

Lancer Label Test/Reset Switch for Carbonator 20/pk

Lancer CED 1506E Juice Dispenser 6 Valve

Lancer Seal with Radial Lip

Lancer Pump Outlet Assembly for CCD8000 — Replacement Outlet for Commercial Beverage Dispensers

Drip Tray without Drain for Lancer Premia

Lancer Lens Marquee for MDS 8000

Recently viewed