Cargando documentación…
Cargando documentación…
NotHeadless UI
Guarda la configuración (moneda, locale, labels, endpoints) y el store del carrito. El carrito se persiste en localStorage, se sincroniza entre pestañas y se refresca desde el servidor.
Ejemplo interactivo con datos de muestra. Sin conexión a una tienda real.
Agregá algo desde la página de AddToCartButton para llenar este carrito de ejemplo.
import { StoreProvider, useCart, useMoney } from "@notheadless/ui"
<StoreProvider currency="ARS" locale="es-AR" labels={{ addToCart: "Sumar al carrito" }}>
{children}
</StoreProvider>
function MiniCart() {
const { lines, count, subtotal, addLine, updateQuantity, removeLine, refresh, issues } = useCart()
const money = useMoney()
return <span>{count} items · {money(subtotal)}</span>
}| Prop | Tipo | Descripción |
|---|---|---|
| currency | string = "ARS" | Moneda ISO para el formateo. |
| locale | string = "es-AR" | Locale de Intl para el formateo. |
| labels | Partial<StoreLabels> | Sobrescribí cualquier texto de la UI (en español por defecto), incluidos los mensajes de problemas del carrito. |
| checkoutEndpoint | string = "/api/checkout" | Ruta creada con createCheckoutHandler. |
| cartEndpoint | string | null = "/api/cart" | Ruta creada con createCartHandler. Con null se desactiva el refresco. |
| productHref | (handle) => string = /products/:handle | URLs de producto que usan las cards, las líneas del carrito y la búsqueda. |
| storageKey | string = "notheadless-cart" | Clave de localStorage. |
Cada línea guarda productId, variantId y quantity (los únicos campos que se envían al servidor) más un snapshot para mostrar: nombre, imagen, label de la variante, precio unitario y maxQuantity. En cada mutación, las cantidades se limitan a min(99, stock).