NotHeadless UI

ProductProvider

Estado headless del producto (opciones, variante seleccionada, precio, disponibilidad, imagen, cantidad) compartido con todos los componentes que tiene adentro.

Ejemplo interactivo con datos de muestra. Sin conexión a una tienda real.

Cargando ejemplo…

<ProductProvider product={product} initialVariantId={searchParams.variant}>
  <ProductGallery />          {/* sigue la imagen de la variante */}
  <VariantSelector />
  <AddToCartButton />         {/* lee variante + cantidad del contexto */}
</ProductProvider>

function Custom() {
  const { variant, price, availability, selection, selectOption, quantity, setQuantity } = useProduct()
}

Props

Prop	Tipo	Descripción
product	Pick<Product, id \| name \| handle \| attributes \| images \| variants>	El producto que se vende.
initialVariantId	number	Preseleccioná una variante, por ejemplo desde la URL.
onVariantChange	(v: Variant \| null) => void	Sincronizá la selección con la URL o con analytics.

Los productos con una sola variante vienen preseleccionados. Si hay opciones, variant queda en null hasta que se elijan todas.
Cada vez que cambia la selección, quantity se limita al maxQuantity de la variante elegida.

Cargando documentación…