/* CLOTHIXPACK — shared shell: ticker + nav + cart drawer + footer. Cart persists to localStorage as `cxp.cart`. Exposes: window.Shell { Ticker, Nav, CartDrawer, Foot } window.useCart() hook window.openCart() / closeCart() globals (set by CartDrawer) */ const { useState, useEffect, useCallback } = React; /* -------------------- cart store -------------------- */ const CART_KEY = "cxp.cart"; function loadCart() { try { return JSON.parse(localStorage.getItem(CART_KEY)) || []; } catch { return []; } } function saveCart(items) { localStorage.setItem(CART_KEY, JSON.stringify(items)); window.dispatchEvent(new CustomEvent("cxp:cart", { detail: items })); } function cartItemKey(item) { const base = `${item.code}/${item.size}/${item.color}`; if (!item.customSize) return base; return `${base}/${JSON.stringify({ fit: item.customFit || "", unit: item.measurementUnit || "", measurements: item.measurements || {}, notes: item.customNotes || "", })}`; } function useCart() { const [items, setItems] = useState(loadCart); useEffect(() => { const on = (e) => setItems(e.detail); const onStorage = () => setItems(loadCart()); window.addEventListener("cxp:cart", on); window.addEventListener("storage", onStorage); return () => { window.removeEventListener("cxp:cart", on); window.removeEventListener("storage", onStorage); }; }, []); const add = useCallback((item) => { const cur = loadCart(); const key = cartItemKey(item); const idx = cur.findIndex(i => cartItemKey(i) === key); if (idx >= 0) { cur[idx].qty += item.qty || 1; } else { cur.push({ ...item, qty: item.qty || 1 }); } saveCart(cur); window.openCart && window.openCart(); }, []); const update = useCallback((key, qty) => { const cur = loadCart().map(i => cartItemKey(i) === key ? { ...i, qty } : i).filter(i => i.qty > 0); saveCart(cur); }, []); const remove = useCallback((key) => { saveCart(loadCart().filter(i => cartItemKey(i) !== key)); }, []); const count = items.reduce((s, i) => s + i.qty, 0); const subtotal = items.reduce((s, i) => s + i.qty * i.price, 0); return { items, add, update, remove, count, subtotal }; } /* -------------------- ticker -------------------- */ function Ticker() { const items = [ "AW26 COLLECTION LIVE", "CANADIAN-REGISTERED HOUSE", "INTERNATIONAL PRODUCTION WORKFLOW", "TRACKED SHIPPING OPTIONS", "CANADIAN-REGISTERED HOUSE", ]; return (
{items.map((item, i) => ( {item} ))}
); } /* -------------------- nav -------------------- */ function Nav({ active = "home" }) { const { count } = useCart(); return (
Shop Lookbook About Atelier Journal
Clothixpack
); } /* -------------------- cart drawer -------------------- */ function CartDrawer() { const [open, setOpen] = useState(false); const [finalSaleAccepted, setFinalSaleAccepted] = useState(false); const { items, update, remove, subtotal } = useCart(); useEffect(() => { window.openCart = () => setOpen(true); window.closeCart = () => setOpen(false); return () => { window.openCart = null; window.closeCart = null; }; }, []); useEffect(() => { const onKey = (e) => { if (e.key === "Escape") setOpen(false); }; document.addEventListener("keydown", onKey); return () => document.removeEventListener("keydown", onKey); }, []); useEffect(() => { document.body.style.overflow = open ? "hidden" : ""; }, [open]); useEffect(() => { if (!items.length) setFinalSaleAccepted(false); }, [items.length]); return ( <>
setOpen(false)}/> ); } /* -------------------- footer -------------------- */ function Foot() { return ( ); } window.Shell = { Ticker, Nav, CartDrawer, Foot }; window.useCart = useCart;