Coupons container

The Coupons container manages the application of coupons to the shopping cart. It provides a text box for users to enter coupon codes. The container uses the applyCouponsToCart function to apply the coupon to the cart.

Coupons container

Configurations

The Coupons container provides the following configuration options:

Parameter	Type	Required	Description
couponCodeField	VNode	No	Coupon code input field.
applyCouponsButton	VNode	No	The button used to apply a coupon.
appliedCoupons	VNode	No	List of applied coupon codes.
error	VNode	No	An error message.
onApplyCoupon	function	No	Callback when applying a coupon code.

Example configuration

The following example demonstrates how to render the Coupons container as part of the OrderSummary slot:

{
  provider.render(OrderSummary, {
    routeCheckout: () => '#checkout',
    slots: {
      Coupons: (ctx) => {
        const coupons = document.createElement('div');

        provider.render(Coupons)(coupons);

        ctx.appendChild(coupons);
      },
    },
    showTotalSaved: true,
  })('.cart__order-summary'),
}