/* ===================================================================== * Split Kaching cart variant options into labeled, per-option rows. * * Kaching renders the variants row with the values only, combined: * *

Blue, UK 3

* * We want one labeled row per option: * *

Color: Blue

Size: UK 3

* * The option NAMES (Color, Size) aren't in the DOM — only the values * are — so we pull them from Shopify's AJAX cart (/cart.js), which * exposes each line item's `options_with_values` ([{name, value}, ...]), * and match each cart row to its line item by the displayed text. * * The existing CSS (.kaching-cart-item__variants-row { flex-direction: * column }) already stacks the resulting divs, so no CSS change needed. * ===================================================================== */ (() => { const ROW_SELECTOR = '.kaching-cart-item__variants-row'; const OPT_SELECTOR = '.kaching-cart-item__variant-options'; if (window.__obCartVariantsInstalled) { window.__obCartVariants && window.__obCartVariants(); return; } window.__obCartVariantsInstalled = true; // [{ pairs: [{name, value}, ...] }, ...] from the current cart. let lineItems = []; let refreshing = false; let refreshTimer = null; async function refresh() { if (refreshing) return; refreshing = true; try { const res = await fetch('/cart.js', { headers: { Accept: 'application/json' } }); if (res.ok) { const cart = await res.json(); lineItems = (cart.items || []) .map(item => { const pairs = (item.options_with_values || []) .filter(o => o && o.name && o.value && o.value !== 'Default Title'); return { pairs }; }) .filter(li => li.pairs.length); } } catch (e) { /* network error — leave lineItems as-is and try again later */ } refreshing = false; splitRows(); } function scheduleRefresh() { clearTimeout(refreshTimer); refreshTimer = setTimeout(refresh, 400); } // Find the line item whose joined values match the displayed text. // Separator-agnostic: tries the common joins Kaching/Shopify may use. function findPairsByText(text) { const t = text.trim().toLowerCase(); const match = lineItems.find(li => { const vals = li.pairs.map(p => p.value.trim().toLowerCase()); return ( vals.join(', ') === t || vals.join(' / ') === t || vals.join(',') === t || vals.join(' ') === t ); }); return match ? match.pairs : null; } function splitRows() { document.querySelectorAll(ROW_SELECTOR).forEach(row => { const divs = row.querySelectorAll(OPT_SELECTOR); // Already expanded (or empty) — nothing to do. Keeps it idempotent // so re-runs after Kaching re-renders don't double-process. if (divs.length !== 1) return; const div = divs[0]; const text = div.textContent.trim(); if (!text) return; const pairs = findPairsByText(text); if (!pairs) { // No match in the current cart snapshot — cart probably changed. scheduleRefresh(); return; } // Single-option items already read fine (e.g. "Blue"); leave them. if (pairs.length < 2) return; const frag = document.createDocumentFragment(); pairs.forEach(p => { const el = document.createElement('div'); el.className = 'kaching-cart-item__variant-options'; // Bold label ("Color:"), normal value (" Blue"). // Some option names already end in a colon — strip it so we // don't end up with "::". const name = p.name.trim().replace(/:+$/, ''); const label = document.createElement('strong'); label.textContent = `${name}:`; el.appendChild(label); el.appendChild(document.createTextNode(` ${p.value}`)); frag.appendChild(el); }); div.replaceWith(frag); }); } // Initial load. refresh(); // Re-run when the cart drawer opens or Kaching re-renders the cart. // Our own edits turn 1 div into N divs, which then short-circuit above, // so this can't loop. const observer = new MutationObserver(() => splitRows()); observer.observe(document.documentElement, { childList: true, subtree: true }); // Cart contents can change (add / remove / qty); refresh the snapshot // shortly after any click so names stay correct for new items. document.addEventListener('click', () => scheduleRefresh(), true); // Manual hook for console debugging. window.__obCartVariants = () => { scheduleRefresh(); splitRows(); }; })();

Complete Your Look (Most Customers Add This)