Price

Overview

The Price component (ProductPrice.vue) is a core element of the Storefront Boilerplate, ensuring consistent price display throughout the entire user journey. It supports various pricing scenarios, including discounted prices, promotional prices, original and final prices, and even free pricing. Designed for flexibility, the component can be customized to meet specific business requirements, maintaining uniformity across different sections of the application.

Usage of the Price Component Across the Application

The Price component is utilized across multiple key areas of the Storefront Boilerplate. Below are the primary locations where it appears:

• Product Detail Page: Displays the main product price.
• Product Subscription: Used for subscription-based pricing.
• Size Selector: Shows the price associated with product variants.
• Product Detail Pop-up: Provides a quick view of product pricing without leaving the current page.
• Product Listing Page: Featured on product cards to showcase individual product prices.

Price Component Variants

The Price component offers multiple configurations to support various pricing strategies within the Storefront Boilerplate. The main elements of the Price component include price amount, currency, and tax details.

Depending on the pricing variant, additional elements may be displayed, such as:

• Final and original price amounts,
• Lowest prior price over the last 30 days,
• Discount percentage,
• Promotion percentage,
• Badges for free products,
• Labels like "from" that indicate price differences across product variants.

Below are the key price variants supported in the Storefront Boilerplate.:

Original Price

The standard product price is displayed if no promotions or sales are applied to a product and the product has the same price for all sizes.

Size-Dependent Pricing

This price variant represents products where the cost varies based on the selected size. The lowest available price is displayed initially.

Before selecting a size:

• The display shows the lowest available price with the "from" label: from 94.90 € incl. VAT.

After selecting a size:

• The price updates to reflect the selected variant: 99.90 € incl. VAT.

Reduced Prices

A reduced price, lowered from its original amount, reflects what the customer will pay after deducting a specific percentage or fixed amount from the original price. You can leverage reduced prices to showcase savings, with the original price displayed for comparison, helping to create urgency or an incentive for customers to complete their purchase.

On top of it, displaying the prior price during price reduction periods is a legal requirement. We fulfill this by showing the 30-Day Best Price, which reflects the lowest price within the past 30 days. Next to it, we also display the percentage difference (in parentheses) between this lowest prior price and the current price. This percentage can be positive, negative, or zero, depending on price fluctuations within the last 30 days.

In our Boilerplate, this functionality is already fully implemented, meaning you can simply configure your sales, campaigns, or promotions without additional development. We support the most common e-commerce scenarios for reduced prices:

• Sales
• Campaigns
• Promotions

Sale & Campaign Price

Both the sale and campaign prices share the same visual representation: a red discount badge showing the percentage reduction, the final price displayed in red, and the original price shown as strikethrough text.

The reduced price is indicated by the appliedReductions. The appliedReductions.category defines the type of reduction —either "sale" or "campaign" — and differentiates between these reductions.

The original price is calculated on the frontend. For instance, if the withTax property from the getProductById response indicates the final price (e.g., 23.92 €), the original price is determined by adding appliedReduction.amount.absoluteWithTax to the final price. In this case:

• Final price: 23.92 €
• Reduction amount: 5.00 €
• Original price: 28.92 €

The discount badge will show the percentage reduction (appliedReduction.amount.relative), which in this SAPI response example would be 14%.

json

Copy

{
  "appliedReductions": [
    {
      "category": "sale",
      "type": "relative",
      "amount": {
        "relative": 0.14,
        "absoluteWithTax": 500
      }
    }
  ],
  "currencyCode": "EUR",
  "recommendedRetailPrice": null,
  "tax": {
    "vat": {
      "amount": 1196,
      "rate": 0.999999
    }
  },
  "withTax": 2392,
  "withoutTax": 1196
}

Promotion Price

Promotion prices represent special discounted prices tied to active promotions. Unlike standard sales or campaign prices, the promotion price is not shown by default. After promotion conditions are satisfied they will be displayed on the Product Detail Page.

Default display: The price displayed by default matches either the original price or the size-dependent price variant (if applicable), such as:

• 119.00 € incl. VAT
• from 94.90 € incl. VAT

Price update upon adding to basket: Once the product variant is added to the basket and the promotion conditions are satisfied, the price is updated to reflect the promotion. This includes:

• A discount badge with the promotion's background color.
• The updated final price displayed in red.
• The original price shown as strikethrough text.

On selecting a size: When a user selects a product size, the system checks whether the selected size is already in the basket:

• If it is, the promotional price will be displayed.
• If it is not, the default price (either original or size-dependent) will continue to be shown until the promotion is applied during the add-to-basket process.

Reductions & Promotions Combinations

Campaign + Sale Price

This variant displays a price with both campaign and sales discounts applied. The calculation process follows a similar approach to the one outlined in the Sale & Campaign Price section. Using the data from the example below, we will show two discount badges, the final price, the price before the first reduction, and the price before the second reduction.

Here’s the process:

1. Discount badges: We start by displaying two discount badges, using appliedReduction.amount.relative. In this case, the values will be 14% and 20%.
2. Final price: The final price, derived from the withTax property, will be displayed next. In this example, the final price is 23.92 €.
3. Price before the first reduction: For the first reduction, labeled as "sale," add the absoluteWithTax from the sale reduction to the final price:
   23.92 € + 5.00 € = 28.92 €.
4. Price before the second reduction: To get the price before both reductions, add the absoluteWithTax from the campaign reduction to the previous price:
   28.92 € + 5.98 € = 34.90 €.

The final display will show both discounts, the original price before reductions, and the final price after the reductions have been applied.

json

Copy

{
  "appliedReductions": [
    {
      "category": "sale",
      "type": "relative",
      "amount": {
        "relative": 0.14,
        "absoluteWithTax": 500
      }
    },
    {
      "category": "campaign",
      "type": "relative",
      "amount": {
        "relative": 0.2,
        "absoluteWithTax": 598
      }
    }
  ],
  "currencyCode": "EUR",
  "recommendedRetailPrice": null,
  "tax": {
    "vat": {
      "amount": 1196,
      "rate": 0.999999
    }
  },
  "withTax": 2392,
  "withoutTax": 1196
}

Sale + Promotion Price or Campaign + Promotion Price

This variant combines a sale or campaign discount with a promotional offer. The display logic follows the same approach outlined in the Sale & Campaign Price and Promotion Price sections. Once the promotional conditions are satisfied, the promotion badge is displayed before the sale or campaign discount badge.

Key steps:

• First, the promotion badge is shown after the promotion is applied.
• Next, the sale or campaign discount badge is displayed.
• The final price and strikethrough original price will reflect the combined reductions.

Sale + Campaign + Promotion Price

This variant integrates both a sale and campaign discount along with a promotional offer. The display logic is similar to the approach used in the Combined Sale & Campaign Price and Promotion Price sections. Once the promotion conditions are met, the promotion badge appears first, followed by the sale or campaign discount badge.

Special Cases

A special pricing configuration is implemented for displaying prices of free gifts and the pricing options available in the size selection modal. For further details on how to customize these settings, please refer to the customization section below.

Customization

For details on how to customize your Pricing component, please review our Customization Guideline.