CartSummaryList container
The CartSummaryList
container displays a summary of the items in the shopping cart by rendering a list of CartItem
components. Each CartItem
represents an individual item in the cart.
CartSummaryList container
Configurations
The CartSummaryList
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 CartSummaryList
container supports the following slots:
- Heading
- EmptyCart
- Footer
- Thumbnail
- ProductAttributes
- CartSummaryFooter
Example configuration
The following example demonstrates how to render the CartSummaryList
container with the routeProduct
and routeEmptyCartCTA
callbacks:
provider.render(CartSummaryList, { enableRemoveItem: true, enableUpdateItemQuantity: true, showDiscount: true, // accordion: true, // showMaxItems: false, // maxItems: 6, // routeCart: () => '#cart', // showSavings: true, // quantityType: 'dropdown', // dropdownOptions: [ // { value: '1', text: '1' }, // { value: '2', text: '2' }, // { value: '3', text: '3' }, // ], routeProduct: (item) => { return `${item.url.categories.join('/')}/${item.url.urlKey}`; }, routeEmptyCartCTA: () => '#empty-cart', slots: { Footer: (ctx) => { // Runs on mount const wrapper = document.createElement('div'); ctx.appendChild(wrapper);
// Append Product Promotions on every update ctx.onChange((next) => { wrapper.innerHTML = '';
next.item?.discount?.label?.forEach((label) => { const discount = document.createElement('div'); discount.style.color = '#3d3d3d'; discount.innerText = label; wrapper.appendChild(discount); }); });},