Skip to main content
Version: 3.x

Display prices with or without taxes

Since version 3.9

References​

Why?​

The default theme (Theme Chocolatine) supports an app-wide configuration for how prices are displayed to users all around the application. Technically, this is achieved through the <PriceVariant> component usage. Depending on your project's context, you might want to display all prices:

  • without taxes (B2B contexts)
  • with taxes (B2C contexts)
  • or both This guide explains how to achieve this.

We have included an demo extension which is illustrated in the following sections.

How?​

Define the custom configuration​

import { defineExtension } from "@front-commerce/core";
import type { PublicConfig } from "@front-commerce/core/react";

type PriceDisplayConfig = PublicConfig["theme"]["priceDisplay"];

const priceDisplayConfigProvider = {
  name: "price-variant-demo:public",
  values: {
    public: {
      theme: {
        priceDisplay: {
          variants: ["priceInclTax", "priceExclTax"],
          appearance: "labeled",
        } satisfies PriceDisplayConfig,
      },
    },
  },
};

export default defineExtension({
  name: "price-variant-config",
  meta: import.meta,
  configuration: {
    providers: [priceDisplayConfigProvider],
  },
});

Using the PriceVariant component​

The <PriceVariant> component will automatically display the relevant price based on your configuration. It requires a price props which is an object with the following properties:

import PriceVariant from "theme/components/molecules/PriceVariant";

export default function Example() {
  return (
    <PriceVariant
      price={{
        priceInclTax: { amount: 100, currency: "EUR" },
        priceExclTax: { amount: 80, currency: "EUR" },
      }}
    />
  );
}