Applied Promotions

You can display various applied promotions in composable storefront, such as cart promotions, product promotions, and total promotions, which you enable and manage through Backoffice.

In composable storefront, you can display information about the following types of applied promotions:

  • Cart promotions, which offer a discount on the entire cart - for example, a percentage or fixed discount on the entire order.

  • Product promotions, which offer a discount on specific products or a specific category of products.

  • Total promotions, which combine all promotions to display the total amount the customer has saved.

Enabling Applied Promotions

You can enable applied promotions using Backoffice. For more information, see the following:

Displaying Applied Promotions

In composable storefront, the PromotionService is used to obtain available promotions. The getOrderPromotions method retrieves order promotions, and the getProductPromotion method retrieves product promotions.

Applied promotions elements are available in the following:

  • the add-to-cart modal

  • the cart details page

  • the review submit component

  • the checkout confirmation page

  • the order history page

You can use the following template to display existing order promotions:

<ng-container *ngIf="orderPromotions$ | async as orderPromotions">
    <cx-promotions [promotions]="orderPromotions"></cx-promotions>
</ng-container>

With this template, if there are no promotions available, then no empty promotions elements are shown in the DOM.

The PromotionsComponent can display either product promotions or order promotions.