/* ============================================================================ 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

TRUaire

TRUaire 2004CD06IN, 24x24 T-Bar Lay-In Ceiling Diffuser, White Steel Ceiling Air Vent, 2004CD Series

TRUaire 150MW06X14, 6x14 Floor Return Air Grille, White Steel Floor Vent Cover, 150MW Series

TRUaire 2004CD12BD, 24x24 T-Bar Lay-In Ceiling Diffuser, White Steel Ceiling Air Vent, 2004CD Series

TRUaire 880X10, 10 Ceiling Diffuser, White Steel Ceiling Air Vent, 880 Series

TRUaire 2004CD10BD, 24x24 T-Bar Lay-In Ceiling Diffuser, White Steel Ceiling Air Vent, 2004CD Series

TRUaire 2004CD10IN, 24x24 T-Bar Lay-In Ceiling Diffuser, White Steel Ceiling Air Vent, 2004CD Series

TRUaire 800X12, 12 Ceiling Diffuser, White Steel Ceiling Air Vent, 800 Series

TRUaire 1400CB12, 24x24 Perforated T-Bar Lay-In Ceiling Diffuser, White Steel Ceiling Air Vent, 1400CB/12 Series

TRUaire 2004CD08BD, 24x24 T-Bar Lay-In Ceiling Diffuser, White Steel Ceiling Air Vent, 2004CD Series

TRUaire 2000PDR6, 23.75x23.75 T-Bar Lay-In Ceiling Diffuser, White Steel Ceiling Air Vent, 2000PD Series

TRUaire 2003CD10, 24x24 T-Bar Lay-In Ceiling Diffuser, White Steel Ceiling Air Vent, 2003CD Series

TRUaire 150MW04X08, 4x8 Ceiling Diffuser, White Steel Ceiling Air Vent, 150MW Series

TRUaire 150MW06X10, 6x10 Floor Return Air Grille, White Steel Floor Vent Cover, 150MW Series

TRUaire 2003CD08, 24x24 T-Bar Lay-In Ceiling Diffuser, White Steel Ceiling Air Vent, 2003CD Series

TRUaire 150MB04X08, 4x8 Floor Return Air Grille, Brown Steel Floor Vent Cover, 150MB Series

TRUaire 150MB02X12, 2x12 Floor Return Air Grille, Brown Steel Floor Vent Cover, 150MB Series

TRUaire 1400CB10, 24x24 Perforated T-Bar Lay-In Ceiling Diffuser, White Steel Ceiling Air Vent, 1400CB/10 Series

TRUaire 1400CB08, 24x24 Perforated T-Bar Lay-In Ceiling Diffuser, White Steel Ceiling Air Vent, 1400CB/08 Series

TRUaire 150MW04X14, 4x14 Floor Return Air Grille, White Steel Floor Vent Cover, 150MW Series

TRUaire 150MW06X12, 6x12 Floor Return Air Grille, White Steel Floor Vent Cover, 150MW Series

TRUaire 2004CD12, 24x24 T-Bar Lay-In Ceiling Diffuser, White Steel Ceiling Air Vent, 2004CD Series

TRUaire 150MB06X14, 6x14 Floor Return Air Grille, Brown Steel Floor Vent Cover, 150MB Series

TRUaire 800X06, 6 Ceiling Diffuser, White Steel Ceiling Air Vent, 800 Series

TRUaire 2004CD06, 24x24 T-Bar Lay-In Ceiling Diffuser, White Steel Ceiling Air Vent, 2004CD Series

Recently viewed