NotHeadless UI

Price

Muestra el precio de una variante o el rango de precios de un producto. Resuelve precios promocionales y de comparación (compare-at), y muestra un precio null como “Consultar”, nunca como $0.

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

Normal

$ 24.900

Promocional

$ 19.900~~$ 24.900~~20% OFF

Comparación

$ 24.900~~$ 32.900~~24% OFF

Precio null

Consultar

Rango

Desde$ 24.900

Grande

$ 19.900~~$ 24.900~~20% OFF

<Price variant={variant} />
<Price variants={product.variants} />          // "Desde $ 24.900" si los precios difieren
<Price info={getPrice(variant)} size="lg" />

Props

Prop	Tipo	Descripción
variant	Pick<Variant, price \| promotionalPrice \| compareAtPrice>	Precio de una sola variante.
variants	Variant[]	Rango de precios entre las variantes visibles.
info	PriceInfo \| PriceRange	Precalculado con @notheadless/sdk/commerce.
size	"sm" \| "default" \| "lg" = "default"	Escala tipográfica.
showDiscount	boolean = true	Muestra el badge “20% OFF”.

Cargando documentación…