OrderSummary container
The OrderSummary
container displays a detailed summary of the shopper’s order. It includes the subtotal, taxes, shipping costs, and total amount due. It optionally applies discounts or coupons.
OrderSummary container
This container supports the Coupon and EstimatedShipping slots.
Configurations
The OrderSummary
container provides the following configuration options:
The CartModel
object has the following shape:
export interface CartModel { id: string; totalQuantity: number; errors?: ItemError[]; items: Item[]; miniCartMaxItems: Item[]; total: { includingTax: Price; excludingTax: Price; }; discount?: Price; subtotal: { excludingTax: Price; includingTax: Price; includingDiscountOnly: Price; }; appliedTaxes: TotalPriceModifier[]; totalTax?: Price; appliedDiscounts: TotalPriceModifier[]; shipping?: Price; isVirtual?: boolean; addresses: { shipping?: { countryCode: string; zipCode?: string; regionCode?: string; }[]; }; isGuestCart?: boolean; hasOutOfStockItems?: boolean; hasFullyOutOfStockItems?: boolean; appliedCoupons?: Coupon[];}
interface TotalPriceModifier { amount: Price; label: string; coupon?: Coupon;}
interface FixedProductTax { amount: Price; label: string;}
export interface Item { taxedPrice: Price; rowTotal: Price; rowTotalIncludingTax: Price; itemType: string; uid: string; url: ItemURL; quantity: number; sku: string; name: string; image: ItemImage; links?: ItemLinks; price: Price; total: Price; discountedTotal?: Price; discount?: Price; regularPrice: Price; discounted: boolean; bundleOptions?: { [key: string]: any }; selectedOptions?: { [key: string]: any }; customizableOptions?: { [key: string]: any }; message?: string; recipient?: string; recipientEmail?: string; sender?: string; senderEmail?: string; lowInventory?: boolean; insufficientQuantity?: boolean; onlyXLeftInStock?: number | null; outOfStock?: boolean; notAvailableMessage?: string; stockLevel?: String; discountPercentage?: number; savingsAmount?: Price; productAttributes?: Attribute[]; fixedProductTaxes?: FixedProductTax[];}
interface ItemError { id: string; text: string;}
interface ItemImage { src: string; alt: string;}
export interface Price { value: number; currency: string;}
interface ItemURL { urlKey: string; categories: string[];}
interface ItemLinks { count: number; result: string;}
interface AttributeOption { value: string; label: string;}
interface Attribute { code: string; value?: string; selected_options?: AttributeOption[];}
interface Coupon { code: string;}
Supported slots
The OrderSummary
container supports the Coupons and EstimateShipping slots.
Example configuration
The following example demonstrates how to render the OrderSummary
container with the EstimateShipping
and Coupons
slots:
provider.render(OrderSummary, { routeCheckout: () => '#checkout', errors: ctx.hasErrors, slots: { EstimateShipping: (ctx) => { const estimateShippingForm = document.createElement('div'); provider.render(EstimateShipping, { showDefaultEstimatedShippingCost: true })(estimateShippingForm); ctx.appendChild(estimateShippingForm); }, Coupons: (ctx) => { const coupons = document.createElement('div'); provider.render(Coupons)(coupons); ctx.appendChild(coupons); }, }, showTotalSaved: true})(orderSummary);