Customization

The Product Detail Page (PDP) offers a versatile framework that allows you to modify its layout and functionalities to suit your specific business objectives. Below, you will find key areas where customization is possible, whether through our SCAYLE Panel or by editing the source code directly.

Product Detail Pop-Up

The Product Detail Pop-up offers a seamless way for users to preview products and add them to their basket without disrupting their shopping experience or navigating away from the current page. Initially implemented for Free Gift products, this versatile pop-up can be easily integrated into other product cards throughout the application.

For instance, you can implement the pop-up for product cards within the Recommendation Slider, allowing users to quickly view product details and add items to their cart directly from the recommendations. Additionally, the pop-up can be utilized on product cards displayed on the Product Listing Page, enhancing user interaction and streamlining the purchasing process.

Low Stock Urgency

To let a user know that there are only a few items of a variant left, you can check the current stock of the variant using activeVariant.value?.stock.quantity. Once the current stock is below a certain threshold and activeVariant.value?.stock.isSellableWithoutStock is set to false, you could display a hint on the PDP to create more urgency to buy the item.

Price

The Price component can be customized through several methods, with the most common being props and slots. This flexibility allows for easy adjustments to how prices and reductions are displayed.

Slots Overview

The Price component provides three customizable slots:

1. Default Slot
   Use this slot to fully override the price section, including the price, badges, and reduction details. Available properties:
   • 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:
   Displays percentage reductions as badges. The property available:
   • relativeReductions: An array of relative reductions (RelativeReductions[]).
3. Tax Information Slot
   Displays tax information (i18n translation of price.including_vat).

Props Overview

The component accepts several 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.
8. lowestPriorPrice (LowestPriorPrice | undefined Default: undefined):
   Specifies the lowest prior price.

Lowest Prior Price

In the EU, when offering a discount, traders are required to indicate the lowest price in the 30 days before the reduction. To display this, the lowest prior price needs to be passed with the withTax and relativeDifferenceToPrice set. This can be requested as part of the product/variant details via parameters defined in /constants/withParams.ts.

Price Customization Function

For more advanced customizations, use the createCustomPrice function from the product.ts utility. This function allows you to modify the price object to suit your needs. It takes two parameters:

1. The base Price object.
2. Partial overrides to modify specific properties.

The function merges the base price and overrides to return a customized Price object.

Example: Customizing for Free Gifts

typescript

Copy

In this example:

• The original price (nonGiftPrice) is set to 0 (indicating a free gift).
• A 100% discount (relative: 1) is applied, categorized as a promotion.

By using createCustomPrice, the component will display 0 as the price and reflect the applied reduction, making it ideal for dynamic price adjustments, such as promotions.