ProductPrice
Displays product price with sale price support
Import
import { ProductPrice } from '@tallyui/components';Usage
<ProductPrice doc={productDocument} currencySymbol="$" />Handles sale prices automatically — regular prices use text-price, sale prices use text-sale with a "was" indicator.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
doc | any | required | RxDB product document |
currencySymbol | string | '$' | Currency symbol to prepend |
showFromPrice | boolean | true | Show the lowest price, formatted by formatFrom, when variant prices differ |
formatFrom | (price: string) => string | (price) => `from ${price}` | Formats the lowest price when variant prices differ, for languages whose word order puts the label after the price |
fromLabel | string | — | Deprecated. Use formatFrom. Label shown before the lowest price when given and formatFrom is not |
className | string | — | Override default styles |
Default classes: text-sm font-medium text-price (or text-sale when on sale)
Products with several variants
When the connector implements getVariants and the document has two or more
variants, ProductPrice compares each variant's resolved price. If they
differ, it shows the lowest price with a from prefix instead of the default
variant's price — a range has no single sale price, so no "was" price is
shown in that case.
// Variants priced €10.00 and €11.00 render "from €10.00"
<ProductPrice doc={productDocument} />
// Opt out and always show the default variant's price
<ProductPrice doc={productDocument} showFromPrice={false} />
// Put the price first, for languages whose word order needs it
<ProductPrice doc={productDocument} formatFrom={(p) => `${p} ab`} />
// Deprecated: use formatFrom instead
<ProductPrice doc={productDocument} fromLabel="ab" />A product with fewer than two variants, or without getVariants, renders
exactly as it did before.
Trait mapping
| Connector | Price source | Sale detection |
|---|---|---|
| WooCommerce | doc.price (string) | doc.on_sale boolean |
| Medusa | doc.variants[0].prices[0].amount (major units) | Price lists (not on product) |
| Shopify | doc.variants[0].price (string) | compare_at_price > price |
| Vendure | doc.variants[0].priceWithTax (cents) | Promotions (not on product) |