/* ============================================================================ 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 Capacitor Run 3/4 115V/60Hz #85PR370E36

Lancer Tower Hole Plug 0.75-Inch — Replacement Plug for Commercial Beverage Dispensing Towers

Lancer Bracket Left Light IBD

Lancer Body Valve LFCV Black

Lancer Splash Plate for 44" Sensation

Lancer IBD22H Dispenser Cube Ice, 6 Valve

Lancer Ballast LED Driver 60W Mean Well

Lancer Main Body Assembly With Foam Cone

Lancer Splash Plate Front for CED2500

Lancer Extractor Tool Assembly

Lancer Drip Tray Assembly for Lancer IBD44

Lancer Kit LEV ID Panel PC Capacitive Touch

Lancer Body Assembly Emitter Ice RoHS

Lancer Drip Tray Assembly for Lancer 25" Blue Star

Lancer Body Assembly Diffuser Volumetric Valve

Lancer Cup Rest for Lancer IBD25

Lancer F8T5/CW Flourescent Lamp Bulb, 8 Watt, 12"

Lancer Shroud Rear for Delta III

Lancer Flow Control Syrup Kit 4.5 oz

Lancer Drip Tray Assembly 8000

Lancer Bulb 18" 15W T8 Daylight MDS

Lancer Kit Pellet Ice Scotsman/ Hoshizaki

Lancer Pellet Ice Merchandiser

Lancer Motor and Fan Assembly 115V 35W for CED 2500

Recently viewed