/* ============================================================================ 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 190RF14X14, 14x14 Return Air Filter Grille, Removable Face, White Steel Filter Back Vent Cover, Fits 14x14x1 Filter, 190RF Series

TRUaire 17016X06, 16x6 Return Air Grille, White Steel Wall & Ceiling Vent Cover, 170 Series

TRUaire 17010X06, 10x6 Return Air Grille, White Steel Wall & Ceiling Vent Cover, 170 Series

TRUaire 122RW14X06W, 14x6 Return Air Grille, White Steel Wall & Ceiling Vent Cover, 122RW Series

TRUaire 122RW30X06W, 30x6 Return Air Grille, White Steel Wall & Ceiling Vent Cover, 122RW Series

TRUaire 17010X04, 10x4 Return Air Grille, White Steel Wall & Ceiling Vent Cover, 170 Series

TRUaire 190RF12X12, 12x12 Return Air Filter Grille, Removable Face, White Steel Filter Back Vent Cover, Fits 12x12x1 Filter, 190RF Series

TRUaire 17012X06, 12x6 Return Air Grille, White Steel Wall & Ceiling Vent Cover, 170 Series

TRUaire 17024X08, 24x8 Return Air Grille, White Steel Wall & Ceiling Vent Cover, 170 Series

TRUaire 17030X06, 36x6 Return Air Grille, White Steel Wall & Ceiling Vent Cover, 170 Series

TRUaire 122RW30X08W, 30x8 Return Air Grille, White Steel Wall & Ceiling Vent Cover, 122RW Series

TRUaire 19020X20, 20x20 Return Air Filter Grille, Hinged Face, White Steel Filter Back Vent Cover, Fits 20x20x1 Filter, 190 Series

TRUaire 17008X08, 8x8 Return Air Grille, White Steel Wall & Ceiling Vent Cover, 170 Series

TRUaire A27014X14, 14x14 Return Air Grille, Fixed Bar, White Aluminum Wall & Ceiling Vent Cover, A270 Series

TRUaire 17030X04, 30x4 Return Air Grille, White Steel Wall & Ceiling Vent Cover, 170 Series

TRUaire 19030X20, 30x20 Return Air Filter Grille, Hinged Face, White Steel Filter Back Vent Cover, Fits 30x20x1 Filter, 190 Series

TRUaire 17024X04, 24x4 Return Air Grille, White Steel Wall & Ceiling Vent Cover, 170 Series

TRUaire 19025X20, 25x20 Return Air Filter Grille, Hinged Face, White Steel Filter Back Vent Cover, Fits 25x20x1 Filter, 190 Series

TRUaire 19040X20, 40x20 Return Air Filter Grille, Hinged Face, White Steel Filter Back Vent Cover, Fits 40x20x1 Filter, 190 Series

TRUaire 17006X06, 6x6 Return Air Grille, White Steel Wall & Ceiling Vent Cover, 170 Series

TRUaire 190RF20X20, 20x20 Return Air Filter Grille, Removable Face, White Steel Filter Back Vent Cover, Fits 20x20x1 Filter, 190RF Series

TRUaire A27010X10, 10x10 Return Air Grille, Fixed Bar, White Aluminum Wall & Ceiling Vent Cover, A270 Series

TRUaire 17010X10, 10x10 Return Air Grille, White Steel Wall & Ceiling Vent Cover, 170 Series

TRUaire 17012X12, 12x12 Return Air Grille, White Steel Wall & Ceiling Vent Cover, 170 Series

Recently viewed