Price
There are several ways to customize the price component, with the most common methods being through props and slots.
If you haven't already, please start by reading our General Overview of the Price Component.
Slots Overview
The price component offers three slots that you can use for customization:
- 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 thesize
andtype
props.showPriceFrom
: A boolean indicating whether to display "price from."appliedReductions
: An array of applied reductions (AppliedReduction[]
).formatCurrency
: The currency formatting string.price
: ThePrice
object.totalPrice
: The total price as a string.promotionStyle
: The style for promotions (PromotionStyle
).
- 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[]
).
- Tax Information Slot: This slot is intended for showing tax information as translated by
i18n
(internationalization) with the keyprice.including_vat
.
Props Overview
The component accepts the following props to control its behavior and appearance:
price
(Price
- Required):
The primary price object that includes details about the product's price.promotion
(Promotion | null
- Optional):
Represents any active promotion associated with the product. It can benull
or omitted if there is no promotion.showTaxInfo
(boolean
- Default:false
):
Determines whether the tax information should be displayed.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.showBadges
(boolean
- Default:true
):
Controls the visibility of reduction badges that display percentage reductions.size
(Size
- Default:Size.MD
):
Defines the size of the text used for the price display. Possible values areSize.XS
,Size.SM
,Size.MD
,Size.LG
, andSize.XL
.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:
- A
Price
object, which serves as the base price. - 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
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 display0
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.