ProductPrice
Displays the product's listing and spot price.
The
ProductPrice component displays both the listing price and spot price of a product.
It wraps two Price components.Overview
Example
Code
Original price:$999Price:$950.04
Import
To use the
ProductPrice component, import it from the @faststore/ui package.
_10import { ProductPrice } from '@faststore/ui'
Import Styles into your FastStore project
To apply the
ProductPrice styles, add the following line to your stylesheet:
_10@import "@faststore/ui/src/components/molecules/ProductPrice/styles.scss";
For more details on importing component styles, refer to the Importing FastStore UI component styles guide.
Usage
Original price:$999Price:$950.04
_10<ProductPrice value={950.04} listPrice={999} formatter={useFormattedPrice} />
_22// Example of formatter_22interface PriceFormatterOptions {_22 decimals?: boolean;_22}_22_22export const usePriceFormatter = ({ decimals }: PriceFormatterOptions = {}) => {_22 return useCallback(_22 (price: number) =>_22 Intl.NumberFormat("en-US", {_22 style: "currency",_22 currency: "USD",_22 minimumFractionDigits: decimals ? 2 : 0,_22 }).format(price),_22 [decimals]_22 );_22};_22_22export const useFormattedPrice = (price: number) => {_22 const formatter = usePriceFormatter();_22_22 return useMemo(() => formatter(price), [formatter, price]);_22};
Props
| Name | Type | Description | Default |
|---|---|---|---|
| value* | number | Specifies product's raw price value. | |
| listPrice* | number | Specifies product's listing price. | |
| formatter | PriceFormatter | Formatter function that transforms the raw price value and render the result. | |
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing-library, and jest). | fs-product-price |
Design tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-product-price-gap | var(--fs-spacing-1) |
Use cases
The
ProductPrice component wraps two instances of the Price component, representing the prices with the spot and listing variants.- If the spot price and listing price are the same, only the spot price is shown.
- If the listing price is set to
0, only the spot price is shown.
Customization
The
ProductPrice component can be customized using the following data attribute:data-fs-product-priceRelated components
- 62.5