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.

Recommendation Slider

The ProductRecommendation component offers great flexibility when it comes to displaying recommendations. While it currently utilizes the combineWith attribute to showcase products, this is just one of many possibilities. The component itself is designed to handle any list of product IDs you provide, meaning you could easily integrate personalized recommendations driven by a user's viewing history or past purchases.

Diverse Ways to Utilize the ProductRecommendation Component

• Recently Viewed Products: Enhance the user experience by displaying a list of recently viewed products. This can help users quickly revisit items they have shown interest in, improving the likelihood of conversion.
• Frequently Bought Together: Leverage the component to showcase products that are often purchased together with the currently viewed item. This can encourage additional purchases and enhance the average order value.
• Similar Products: Implement a feature that displays similar products based on attributes such as brand, category, or price range. This provides users with alternative options and helps them find products that meet their preferences.
• Personalized Recommendations: Integrate personalized recommendations based on the user's browsing history or past purchases. This tailored approach can increase engagement and drive conversions by presenting items that align with the user's interests.
• Seasonal Promotions: Highlight seasonal products or promotions using the slider. For example, during holiday seasons, showcase relevant gift items or discounts to encourage timely purchases.
• Trending Products or Best Sellers: Use the slider to highlight trending or popular products within a specific category. This feature can attract user attention to items that are currently in demand.

You might also want to filter out certain products from the recommendation slider (e.g. sold-out products). This is possible by applying any filter you might want to the products list inside ProductRecomendations.vue.

html

Copy

Similar Products Recommendation

The "Similar Products Recommendation" feature enhances the shopping experience by suggesting items related to the current product. This feature can increase conversion rates, improve user retention, and boost the average order value by presenting users with alternatives based on category and color, especially when the desired size is unavailable.

Use Case

This feature recommends products that share the same primary category and color as the main product on the PDP, helping users explore alternatives.

Technical Overview

To implement this feature, we will create a new component. Here’s how:

1. Create the Component
   Create a .vue file in the components/product folder, naming it SimilarProductsRecommendation.vue.\
   typescript

   Copy
2. Define Inputs
   Define a product prop to pass the current product to the component.\
   typescript

   Copy
3. Get Product Information
   Use the useProductBaseInfo composable to get the primary category and color.
   typescript

   Copy
4. Fetch Similar Products
   Use the useProducts composable to fetch products with matching category and color.\
   typescript

   Copy
5. Render the Products
   Display the recommended products using the SFItemsSlider component.\
   typescript

   Copy

Outcome

The final implementation will show a slider of similar products based on the current product’s category and color, providing users with alternative options that may meet their needs.

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.