Price

The Price component includes a basic implementation for displaying product pricing.

If you'd like to customise the display of pricing, we recommend using the usePrice() hook.

import { Playground } from 'docz';

import Price from '@jetshop/ui/Price'

import Price from './Price'; import ChannelContext from '@jetshop/core/components/ChannelContext/ChannelContext';

Props

price: { exVat: number; incVat: number; vat: number } The product Price object. This matches the shape of the data returned from the API for products.

previousPrice?: { exVat: number; incVat: number; vat: number } The previous price (i.e. this will be higher than price if the product is discounted).

currency?: { code: string; culture: string } By default, the price will be displayed using the currently selected channel. To override the currency, provide the currencyOverride object.

formatter?(price: number, currencyCode?: string, culture?: string): string By default the currency will be formatted using the browser's Intl.NumberFormat API. If you'd like to use your own formatting, you can provide a function with which to format.

hidePrice: boolean If true, the price will not be displayed.

OnHidePriceComponent: React.ElementType<any> If hidePrice is true and you'd like to render a custom component instead.

Example usage

<Playground>
  {/* Note - the ChannelContext.Provider wraps the entire store by default, so you do not have to include it manually. It is included here for demonstration purposes. Try changing the currency.name, currency.format.culture, or pricesIncVat values to see how the price is formatted when the settings change */}
  <ChannelContext.Provider
    value={{
      selectedChannel: {
        settings: {
          pricesIncVat: true,
        },
        currency: {
          id: "USD",
          name: "USD",
          format: {
            culture: "en-US",
          },
        },
        language: {
          culture: "en-US",
          name: "English",
          isDefault: true,
        },
      },
    }}
  >
    <Price
      price={{ exVat: 50, incVat: 80, vat: 30 }}
      previousPrice={{ exVat: 60, incVat: 90, vat: 40 }}
    />
  </ChannelContext.Provider>
</Playground>

Using custom price formatter

You may want to use a different format for your currency than what is provided by default. By passing a formatter props to the Price component, you can override this behaviour.

Example formatter

Let's say your website is using Swedish Krone and you want to change the default format 123 456,79 kr to 123.456,79 SEK. By providing a formatter function we have access to the value and the currency.

function formatter(price, currencyCode) {
  // If the number is a decimal, the decimal point is a dot.
  // We detach it for now to make our work easier.
  const priceStringFragments = price.toString().split('.');

  // We will work with price as an array, where at each index there is a single digit.
  const priceArray = priceStringFragments[0].split('');

  let newPrice = [...priceArray];

  // This loop adds dots to the number, starting from the end.
  // This loop only runs if the number has more than 3 digits.
  for (let x = 3; x < priceStringFragments[0].length; x = x + 3) {
    newPrice.splice(priceArray.length - x, 0, '.');
  }

  // We join our array to make it a string again.
  newPrice = newPrice.join('');

  // This scenario attaches a decimal value only if there is any.
  // In case of a round number, no decimals will be shown.
  if (priceStringFragments[1])
    newPrice = `${newPrice},${priceStringFragments[1]}`;

  return `${newPrice} ${currencyCode}`;
}

<Playground>
  <Price
    price={{ exVat: 50, incVat: 80, vat: 30 }}
    previousPrice={{ exVat: 60, incVat: 90, vat: 40 }}
    formatter={(price, currencyCode) => {
      const priceStringFragments = price.toString().split(".");

      const priceArray = priceStringFragments[0].split("");
      let newPrice = [...priceArray];

      for (let x = 3; x < priceStringFragments[0].length; x = x + 3) {
        newPrice.splice(priceArray.length - x, 0, ".");
      }

      newPrice = newPrice.join("");

      if (priceStringFragments[1])
        newPrice = `${newPrice},${priceStringFragments[1]}`;

      return `${newPrice} ${currencyCode}`;
    }}
  />
</Playground>

Important to keep in mind that your site may use different channels for different languages and you may want the currency to be displayed differently for each language.