⚠️ After March 18, 2024, the FastStore documentation will be migrated to the Developer Portal. For more information, access the official release note.

Product Price

The ProductPrice component displays product's listing and spot price. It wraps two Price components.

Import

Import the component from @faststore/ui

import { ProductPrice } from '@faststore/ui'

Import Styles

import '@faststore/ui/src/components/atoms/Price/styles.scss'
import '@faststore/ui/src/components/molecules/ProductPrice/styles.scss'

Usage

Original price:$999Price:$950.04
<ProductPrice value={950.04} listPrice={999} formatter={useFormattedPrice} />
// Example of formatter
interface PriceFormatterOptions {
  decimals?: boolean
}
 
export const usePriceFormatter = ({ decimals }: PriceFormatterOptions = {}) => {
  return useCallback(
    (price: number) =>
      Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: decimals ? 2 : 0,
      }).format(price),
    [decimals]
  )
}
 
export const useFormattedPrice = (price: number) => {
  const formatter = usePriceFormatter()
 
  return useMemo(() => formatter(price), [formatter, price])
}

Props

NameTypeDescriptionDefault
value*numberSpecifies product's raw price value.
listPrice*numberSpecifies product's listing price.
formatterPriceFormatterFormatter function that transforms the raw price value and render the result.
testIdstringID to find this component in testing tools (e.g.: cypress, testing-library, and jest).fs-product-price

Design Tokens

Local tokenDefault value/Global token linked
--fs-product-price-gapvar(--fs-spacing-1)

Use Cases

The ProductPrice component wraps two instances of the Price component, representing the prices with the spot and listing variants.

  • In cases where both prices are identical, only the spot price will be presented.
  • If the listing price is set to 0, only the spot price will be shown.

Customization

For further customization, you can use the following data attributes:

data-fs-product-price


Related components

  • 62.5

    Price

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

    See more