2d:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2e:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2f:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 30:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 31:T1f16,"use client"; import { IconShoppingBag, IconX } from "@tabler/icons-react"; import { Button } from "@/components/ui/button"; import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty"; import { Progress } from "@/components/ui/progress"; import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle } from "@/components/ui/sheet"; import { cn } from "@/lib/utils"; import { formatMoney } from "../../../lib/commerce/select"; import type { Money } from "../../../lib/commerce/types"; import { CartButton } from "../../ui/cart-button/cart-button"; import { useCart, type CartLine } from "../_shared/cart-store"; import { resolveProductHref, type PdpHrefs, type ProductHref } from "../_shared/links"; import { PortalScope } from "../_shared/portal-scope"; import { QuantityStepper } from "../_shared/ui/quantity-stepper"; export type PdpCartDrawerProps = { /** Free-shipping threshold. Omit unless the brand states one: no invented thresholds. */ freeShippingThreshold?: Money; /** Where "Keep shopping" goes when set; otherwise the button just closes the drawer. */ continueHref?: string; /** Route overrides (product): line item image and title link to the PDP. */ hrefs?: PdpHrefs; /** Explicit product href builder; wins over hrefs. */ hrefFor?: ProductHref; className?: string; }; /** The bag icon with its count; opens the drawer through the cart store. */ export function CartDrawerTrigger({ className }: { className?: string }) { const cart = useCart(); return cart.setOpen(true)} className={className} />; } function Line({ line, href }: { line: CartLine; href: string }) { const cart = useCart(); const image = line.variant.image ?? line.product.featuredImage; const options = [...new Set([...Object.values(line.variant.options), line.size].filter(Boolean))].join(" / "); return (

{/* eslint-disable-next-line @next/next/no-img-element */}

{options}

{formatMoney(line.lineTotal)}

cart.setQty(line.key, q)} label={`Quantity of ${line.product.title}`} />

); } /** * The bag: a Kobra sheet from the end edge. Reads and writes the cart store (open, lines, qty). * Checkout goes to the brand's Shopify cart permalink, else the mrch.shop link of the first item, * else "checkout on mrch.shop coming soon". */ export function PdpCartDrawer({ freeShippingThreshold, continueHref, hrefs, hrefFor, className }: PdpCartDrawerProps) { const productHref = resolveProductHref(hrefFor, hrefs); const cart = useCart(); const { lines, subtotal } = cart; const href = cart.checkoutUrl(); const designs = new Set(lines.map((l) => l.product.handle)).size; const split = !cart.shopifyDomain && designs > 1; const toGo = freeShippingThreshold && subtotal && subtotal.currency === freeShippingThreshold.currency ? Math.max(0, freeShippingThreshold.amount - subtotal.amount) : null; return ( Bag ({cart.count}) Items in your bag and checkout. {lines.length === 0 ? ( Your bag is empty Pick a design and it lands here. {continueHref ? ( ) : ( }>Keep shopping )} ) : ( <> {toGo !== null && freeShippingThreshold ? (

{toGo === 0 ? ( "Free shipping unlocked" ) : ( <> {formatMoney({ ...freeShippingThreshold, amount: toGo })} away from free shipping )}

) : null}

))}

Subtotal {subtotal ? formatMoney(subtotal) : ""}

{href ? ( ) : (

checkout opens on mrch.shop when the store goes live

)} {!href ? null : split ? (

mrch.shop checks out one design at a time. This opens the first item.

) : (

Shipping and taxes are calculated at checkout.

)} )} ); } export default PdpCartDrawer; 32:T271d,"use client"; /* * Tiny client cart (no zustand): React context + a module store read with * useSyncExternalStore, persisted to localStorage per brand (`kc-cart:`). * * API (stable; the customizer imports this): * * * ...blocks... * * - `products` resolves stored lines back to product + variant for display. Lines whose * product is not in `products` (or registered through `add(item, product)`) are hidden. * - mounts Kobra (bottom-center) unless `toaster={false}`. * * const cart = useCart(); // safe outside a provider: `ready: false` and every method is a no-op * cart.ready boolean * cart.brand Brand | undefined * cart.shopifyDomain string | null set when the brand checks out on its own Shopify store * cart.items CartItem[] { variantId, productHandle, qty, size? } * cart.lines CartLine[] item + product + variant + lineTotal + key + checkoutHref * cart.count number total quantity * cart.subtotal Money | null null when the bag is empty * cart.open / cart.setOpen(boolean) drawer visibility (cart-drawer reads this) * cart.add(item: Omit & { qty?: number }, product?: Product) * cart.remove(key) cart.setQty(key, qty) cart.clear() (key = lineKey(item)) * cart.checkoutUrl(items?: CartItem[]) => string | null (items default to the bag) * * checkoutUrl(items, { brandSlug, shopifyDomain?, products }) => string | null (pure) * - brand has shopifyDomain -> https:///cart/:,: * - else the mrch.shop storeUrl of the FIRST item, wrapped with mrchShopUrl (UTM + attribution) * - else null ("checkout on mrch.shop coming soon") * mrch.shop checks out one design at a time, so the bag exits per line (CartLine.checkoutHref). * * lineKey(item) => string variantId + size, the identity of a bag line. */ import { createContext, useCallback, useContext, useMemo, useState, useSyncExternalStore, type ReactNode, } from "react"; import { Toasts } from "@/components/ui/toast"; import { PortalScope } from "./portal-scope"; import { mrchShopUrl } from "../../../lib/commerce/adapters/mrch"; import type { Brand, Money, Product, Variant } from "../../../lib/commerce/types"; import { buildCheckoutUrl, clampQty, lineKey, parseCart, type CartItem, type CheckoutContext } from "./cart-core"; export { lineKey, type CartItem }; export type CartLine = CartItem & { key: string; product: Product; variant: Variant; lineTotal: Money; /** Where this single line checks out (mrch.shop URL with UTM, or the Shopify permalink), or null. */ checkoutHref: string | null; }; export type Cart = { ready: boolean; brand: Brand | undefined; shopifyDomain: string | null; items: CartItem[]; lines: CartLine[]; count: number; subtotal: Money | null; open: boolean; setOpen: (open: boolean) => void; add: (item: Omit & { qty?: number }, product?: Product) => void; remove: (key: string) => void; setQty: (key: string, qty: number) => void; clear: () => void; checkoutUrl: (items?: CartItem[]) => string | null; }; export type { CheckoutContext }; export function checkoutUrl(items: CartItem[], ctx: CheckoutContext): string | null { return buildCheckoutUrl(items, ctx, (slug, placement, url, designSlug) => mrchShopUrl(slug, placement, url, { designSlug })); } /* ---- persistence: one module store per storage key --------------------------------------- */ type Store = { key: string; items: CartItem[]; loaded: boolean; listeners: Set<() => void>; }; const EMPTY: CartItem[] = []; const stores = new Map(); function storeFor(key: string): Store { let store = stores.get(key); if (!store) { store = { key, items: EMPTY, loaded: false, listeners: new Set() }; stores.set(key, store); } return store; } const parse = (raw: string | null): CartItem[] => { const items = parseCart(raw); return items.length ? items : EMPTY; }; function snapshot(store: Store): CartItem[] { if (!store.loaded && typeof window !== "undefined") { store.loaded = true; try { store.items = parse(window.localStorage.getItem(store.key)); } catch { store.items = EMPTY; } } return store.items; } function commit(store: Store, items: CartItem[]) { store.items = items.length ? items : EMPTY; store.loaded = true; try { window.localStorage.setItem(store.key, JSON.stringify(store.items)); } catch { /* private mode: the bag lives for the session */ } store.listeners.forEach((l) => l()); } function subscribe(store: Store, listener: () => void) { store.listeners.add(listener); const onStorage = (e: StorageEvent) => { if (e.key !== store.key) return; store.items = parse(e.newValue); listener(); }; window.addEventListener("storage", onStorage); return () => { store.listeners.delete(listener); window.removeEventListener("storage", onStorage); }; } /* ---- context ------------------------------------------------------------------------------ */ const noop = () => {}; const NO_CART: Cart = { ready: false, brand: undefined, shopifyDomain: null, items: EMPTY, lines: [], count: 0, subtotal: null, open: false, setOpen: noop, add: noop, remove: noop, setQty: noop, clear: noop, checkoutUrl: () => null, }; const CartContext = createContext(NO_CART); export function useCart(): Cart { return useContext(CartContext); } export type CartProviderProps = { brand: Brand; products: Product[]; shopifyDomain?: string | null; /** Mount the Kobra toast stack (the add-to-cart "Added" toast needs one). Default true. */ toaster?: boolean; children: ReactNode; }; export function CartProvider({ brand, products, shopifyDomain = null, toaster = true, children, }: CartProviderProps) { const store = storeFor(`kc-cart:${brand.slug}`); const items = useSyncExternalStore( (l) => subscribe(store, l), () => snapshot(store), () => EMPTY, ); const [open, setOpen] = useState(false); const [extra, setExtra] = useState([]); const catalog = useMemo(() => { const byHandle = new Map(); for (const p of extra) byHandle.set(p.handle, p); for (const p of products) byHandle.set(p.handle, p); return byHandle; }, [products, extra]); const checkoutFor = useCallback( (list: CartItem[]) => checkoutUrl(list, { brandSlug: brand.slug, shopifyDomain, products: [...catalog.values()], }), [brand.slug, shopifyDomain, catalog], ); const lines = useMemo(() => { const out: CartLine[] = []; for (const item of items) { const product = catalog.get(item.productHandle); const variant = product?.variants.find((v) => v.id === item.variantId); if (!product || !variant) continue; out.push({ ...item, key: lineKey(item), product, variant, lineTotal: { amount: variant.price.amount * item.qty, currency: variant.price.currency }, checkoutHref: checkoutFor([item]), }); } return out; }, [items, catalog, checkoutFor]); const add = useCallback( (item, product) => { if (product && !catalog.has(product.handle)) { setExtra((list) => [...list, product]); } const qty = clampQty(item.qty); const key = lineKey(item); const current = snapshot(store); const found = current.some((i) => lineKey(i) === key); commit( store, found ? current.map((i) => (lineKey(i) === key ? { ...i, qty: Math.min(99, i.qty + qty) } : i)) : [...current, { variantId: item.variantId, productHandle: item.productHandle, size: item.size, qty }], ); }, [store, catalog], ); const remove = useCallback( (key) => commit(store, snapshot(store).filter((i) => lineKey(i) !== key)), [store], ); const setQty = useCallback( (key, qty) => commit( store, !(qty >= 1) ? snapshot(store).filter((i) => lineKey(i) !== key) : snapshot(store).map((i) => (lineKey(i) === key ? { ...i, qty: clampQty(qty) } : i)), ), [store], ); const clear = useCallback(() => commit(store, EMPTY), [store]); const value = useMemo(() => { const count = lines.reduce((n, l) => n + l.qty, 0); const subtotal: Money | null = lines.length ? { amount: lines.reduce((n, l) => n + l.lineTotal.amount, 0), currency: lines[0].lineTotal.currency, } : null; return { ready: true, brand, shopifyDomain, items, lines, count, subtotal, open, setOpen, add, remove, setQty, clear, checkoutUrl: (list = items) => checkoutFor(list), }; }, [brand, shopifyDomain, items, lines, open, add, remove, setQty, clear, checkoutFor]); return ( {children} {toaster ? ( // A transformed ancestor becomes the containing block of the toast stack's fixed container, // so shifting this wrapper lifts the toasts above a sticky bar (--kc-sticky-offset, set by pdp-sticky-buy-bar).

) : null} ); } 33:Tb73,"use client"; import { IconMinus, IconPlus } from "@tabler/icons-react"; import { cva, type VariantProps } from "class-variance-authority"; import type { KeyboardEvent } from "react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; const stepper = cva( "inline-flex items-center rounded-lg border border-rule bg-canvas text-ink has-focus-visible:ring-3 has-focus-visible:ring-ring/50", { variants: { size: { default: "h-10", compact: "h-8", large: "h-12", }, }, defaultVariants: { size: "default" }, }, ); const readout = cva("tabular grid place-items-center text-center select-none outline-none focus-visible:ring-3 focus-visible:ring-ring/50 rounded-sm", { variants: { size: { default: "min-w-10 text-sm", compact: "min-w-8 text-[13px]", large: "min-w-14 text-base" }, }, defaultVariants: { size: "default" }, }); export type QuantityStepperProps = VariantProps & { value: number; onValueChange: (value: number) => void; min?: number; max?: number; /** Accessible name, e.g. "Quantity" or "Quantity of Wrench Grease Repeat". */ label?: string; className?: string; }; /** Minus, number, plus. The number is a spinbutton: arrow keys step it, tabular digits keep the width. */ export function QuantityStepper({ value, onValueChange, min = 1, max = 99, label = "Quantity", size = "default", className, }: QuantityStepperProps) { const set = (next: number) => onValueChange(Math.min(max, Math.max(min, next))); const onKeyDown = (e: KeyboardEvent) => { if (e.key === "ArrowUp" || e.key === "ArrowRight") { e.preventDefault(); set(value + 1); } else if (e.key === "ArrowDown" || e.key === "ArrowLeft") { e.preventDefault(); set(value - 1); } }; const iconSize = size === "compact" ? "icon-xs" : size === "large" ? "icon-lg" : "icon-sm"; return (

{value}

); } 34:T5b2,"use client"; import { IconShoppingBag } from "@tabler/icons-react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; export type CartButtonProps = { /** Items in the cart. The count is a prop; cart state lives elsewhere. */ count?: number; /** Renders a link when set, otherwise a button. */ href?: string; onClick?: () => void; className?: string; }; /** Bag icon with a tabular count badge. 40px hit area, badge hides at zero. */ export function CartButton({ count = 0, href, onClick, className }: CartButtonProps) { const label = count === 1 ? "Cart, 1 item" : `Cart, ${count} items`; return ( ); } export default CartButton; 35:Ta9c,import type { Money, Product, ProductImage, Variant } from "./types"; /** Price range of a variant list. Empty list gives a zero range in `currency`. */ export function priceRangeOf( variants: Variant[], currency = "USD", ): { min: Money; max: Money } { if (variants.length === 0) { const zero = { amount: 0, currency }; return { min: zero, max: zero }; } const sorted = [...variants].sort((a, b) => a.price.amount - b.price.amount); return { min: sorted[0].price, max: sorted[sorted.length - 1].price }; } /** Lowest priced variant, preferring available ones. Undefined when the product has no variants. */ export function findCheapestVariant(product: Product): Variant | undefined { if (product.variants.length === 0) return undefined; const pool = product.variants.some((v) => v.available) ? product.variants.filter((v) => v.available) : product.variants; return pool.reduce((a, b) => (b.price.amount < a.price.amount ? b : a)); } /** * Same as `findCheapestVariant` but typed non-optional so existing call sites keep compiling. * Adapters never emit a product without variants, so the throw is unreachable for adapter * output; hand-built products should use `findCheapestVariant`. */ export function cheapestVariant(product: Product): Variant { const v = findCheapestVariant(product); if (!v) throw new Error(`cheapestVariant: product "${product.handle}" has no variants (use findCheapestVariant)`); return v; } /** First variant whose options contain every given key/value. */ export function variantFor( product: Product, options: Record, ): Variant | undefined { return product.variants.find((v) => Object.entries(options).every(([k, val]) => v.options[k] === val), ); } export function optionValues(product: Product, name: string): string[] { return product.options.find((o) => o.name === name)?.values ?? []; } /** Images to show for a variant: its own image first, then the rest of the product. */ export function imagesFor(product: Product, variant?: Variant): ProductImage[] { if (!variant?.image) return product.images; const own = variant.image; return [own, ...product.images.filter((i) => i.src !== own.src)]; } export function formatMoney(money: Money, locale = "en-US"): string { const whole = Number.isInteger(money.amount); return new Intl.NumberFormat(locale, { style: "currency", currency: money.currency, minimumFractionDigits: whole ? 0 : 2, maximumFractionDigits: 2, }).format(money.amount); } /** True when at least one variant can be bought somewhere. */ export function isBuyable(product: Product): boolean { return product.variants.some((v) => v.available && v.storeUrl); } 36:T582,import type { BlockMeta } from "../../../lib/block-meta"; export const pdpCartDrawerMeta: BlockMeta = { slug: "pdp-cart-drawer", title: "Cart drawer", description: "A local bag in a Kobra sheet from the end edge: line items with quantity steppers, subtotal, checkout that exits to mrch.shop or Shopify, a designed empty state and an optional free-shipping bar.", group: "pdp", kobraDeps: ["sheet", "button", "empty", "progress"], files: [ "blocks/pdp/pdp-cart-drawer/pdp-cart-drawer.tsx", "blocks/pdp/_shared/cart-store.tsx", "blocks/pdp/_shared/ui/quantity-stepper.tsx", "blocks/ui/cart-button/cart-button.tsx", "lib/commerce/select.ts", ], props: [ { name: "hrefs", type: "{ home?: string; collection?: (handle) => string; product?: (handle) => string }", default: "'/', /collections/, /products/", description: "Route overrides (product): line item image and title link to the PDP." }, { name: "hrefFor", type: "(product) => string", description: "Explicit product href builder; wins over hrefs." }, { name: "freeShippingThreshold", type: "Money", description: "Shows a progress bar toward free shipping. Omit unless the brand states one." }, { name: "continueHref", type: "string", description: "Link for the empty state's Keep shopping; otherwise it closes the drawer." }, ], tags: ["pdp", "cart", "sheet", "checkout"], status: "ready", }; 24:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2d",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2d",null,{"href":"/#pdp","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"PDP"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Cart drawer"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Cart drawer"}],["$","span",null,{"data-slot":"badge","data-variant":"green","className":"group/badge t-label relative isolate inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent py-0.5 font-medium [--surface-calm:0.5] whitespace-nowrap transition-ring before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:border before:border-transparent before:transition-[scale,background-color,border-color] before:duration-150 before:ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:before:transition-none has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [a,button]:active:before:scale-[0.97] motion-reduce:[a,button]:active:before:scale-100 [&>svg]:pointer-events-none [&>svg]:size-3! t-surface t-surface-success text-[var(--badge-green-fg)] h-5 px-1.5 text-xs","children":"Ready"}]]}],["$","p",null,{"className":"max-w-[65ch] text-sm text-muted-foreground","children":"A local bag in a Kobra sheet from the end edge: line items with quantity steppers, subtotal, checkout that exits to mrch.shop or Shopify, a designed empty state and an optional free-shipping bar."}]]}],["$","$L2e",null,{"preview":["$","$L2f",null,{"slug":"pdp-cart-drawer","group":"pdp","minHeight":480,"fixedHeight":"$undefined"}],"code":["$","$L30",null,{"files":[{"path":"blocks/pdp/pdp-cart-drawer/pdp-cart-drawer.tsx","code":"$31"},{"path":"blocks/pdp/_shared/cart-store.tsx","code":"$32"},{"path":"blocks/pdp/_shared/ui/quantity-stepper.tsx","code":"$33"},{"path":"blocks/ui/cart-button/cart-button.tsx","code":"$34"},{"path":"lib/commerce/select.ts","code":"$35"},{"path":"blocks/pdp/pdp-cart-drawer/demo.tsx","code":"import { pdpDemoData } from \"../../../lib/commerce/fixtures/pdp\";\nimport { CartProvider } from \"../_shared/cart-store\";\nimport { PdpBuyBox } from \"../pdp-buy-box/pdp-buy-box\";\nimport { CartDrawerTrigger, PdpCartDrawer } from \"./pdp-cart-drawer\";\nimport { CartDrawerSeed } from \"./seed\";\n\nexport async function PdpCartDrawerDemo({ brand }: { brand?: string }) {\n const { brand: b, product, products } = await pdpDemoData(brand);\n return (\n \n

\n add something, then open the bag\n \n

\n \n \n

\n \n \n );\n}\n\nexport default PdpCartDrawerDemo;\n"},{"path":"blocks/pdp/pdp-cart-drawer/meta.ts","code":"$36"}]}],"props":"$L37"}],"$L38"]}]