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. 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.

Example

Code

Original price:$999Price:$950.04

Usage

Import the component


_10import { ProductPrice } from "@faststore/ui";

Import styles

To apply styles, include the following in your stylesheet:


_10@import "@faststore/ui/src/components/molecules/ProductPrice/styles.scss";

For details, see Importing FastStore UI component styles.

Examples

Example

Code

Original price:$999Price:$950.04

Example of price formatter function


_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};

Design tokens

Local token	Default value/Global token linked
`--fs-product-price-gap`	`var(--fs-spacing-1)`

Data attributes

You can target and override ProductPrice styles using the following data attributes:

data-fs-product-price

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`

62.5
Price
Prices are used to display the price of a given product, discount and total values.
See more