Price

There are several ways to customize the price component, with the most common methods being through props and slots.

Slots Overview

The price component offers three slots that you can use for customization:

1. Default Slot: This slot allows you to override the entire price section of the component, including badges, the price itself, and any reduction details. The following properties are available within this slot:
   • classes: Text classes that are determined by the size and type props.
   • showPriceFrom: A boolean indicating whether to display "price from."
   • appliedReductions: An array of applied reductions (AppliedReduction[]).
   • formatCurrency: The currency formatting string.
   • price: The Price object.
   • totalPrice: The total price as a string.
   • promotionStyle: The style for promotions (PromotionStyle).
2. Relative Reduction (Badges) Slot: This slot is designed for displaying reductions in percentage form (badges). The available slot property is:
   • relativeReductions: An array of relative reductions (RelativeReductions[]).
3. Tax Information Slot: This slot is intended for showing tax information as translated by i18n (internationalization) with the key price.including_vat.

Props Overview

The component accepts the following props to control its behavior and appearance:

1. price (Price - Required):
   The primary price object that includes details about the product's price.
2. promotion (Promotion | null - Optional):
   Represents any active promotion associated with the product. It can be null or omitted if there is no promotion.
3. showTaxInfo (boolean - Default: false):
   Determines whether the tax information should be displayed.
4. showPriceFrom (boolean - Default: false):
   Indicates if the label "starting from" (i18n: price.starting_from) should be displayed before the price. This is useful when the price shown is a starting price.
5. showBadges (boolean - Default: true):
   Controls the visibility of reduction badges that display percentage reductions.
6. size (Size - Default: Size.MD):
   Defines the size of the text used for the price display. Possible values are Size.XS, Size.SM, Size.MD, Size.LG, and Size.XL.
7. type ('normal' | 'whisper' | 'loud' - Default: 'normal'):
   Specifies the font style for the price text:
   • 'normal': Uses a variable font weight.
   • 'whisper': Uses a semi-bold font style.
   • 'loud': Uses a bold font style.

Price Customization Function

For more advanced price customization at an object level, you can use the createCustomPrice function from the product.ts utility. This function allows you to modify the price object according to your requirements.

The createCustomPrice function is designed to take two parameters:

1. A Price object, which serves as the base price.
2. A second parameter consists of partial overrides, which selectively modify the properties of the original Price object.

The function then merges these inputs and returns a new Price object that incorporates the specified changes.

Example Use Case: Free Gifts

typescript

Copy

const price = computed(() => {
  const nonGiftPrice = activeVariant.value
    ? getPrice(activeVariant.value)
    : variantWithLowestPrice.value?.price

  if (!nonGiftPrice) {
    return
  }

  return createCustomPrice(nonGiftPrice, {
    withTax: 0 as CentAmount,
    appliedReductions: [
      {
        amount: {
          absoluteWithTax: nonGiftPrice.withTax as CentAmount,
          relative: 1,
        },
        type: 'relative',
        category: 'promotion',
      },
    ],
  })
})

In this example:

• The original price (nonGiftPrice) is modified to display 0 as the price.
• An applied reduction is added to indicate a 100% discount, categorized as a 'promotion'.

By using createCustomPrice, the price component will now show 0 as the price and reflect the single applied reduction. This functionality is particularly useful when the price object needs dynamic adjustments, such as handling promotions.