Skip to content

Search is only available in production builds. Try building and previewing the site to test it out locally.

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

CartSummaryList container

Configurations

The CartSummaryList container provides the following configuration options:

Option Type Req? Description
childrenCartModelYes Child elements to be rendered inside the container.
routeProductfunctionNo Callback function that returns a product.
routeEmptyCartCTAfunctionNo Callback function that returns an empty cart.
initialDatastringYes Initial cart data to preload the component. Defaults to null.
hideHeadingbooleanNo Whether to hide the heading of the cart.
hideFooterbooleanNo Whether to hide the footer of the cart.
routeProductfunctionNo Callback function that returns a product.
routeEmptyCartCTAfunctionNo Callback function that returns an empty cart.
routeCartfunctionNo Callback function that navigates to the cart.
onItemUpdatefunctionNo Callback function that updates the item.
onItemRemovefunctionNo Callback function that removes the item.
maxItemsnumberNo Maximum number of items to display.
slotsfunctionNo Allows passing a container or custom component.
attributesToHidestring[]No Attributes to hide.
enableRemoveItembooleanNo Enable remove item.
enableUpdateItemQuantitybooleanNo Enable update item quantity.
onItemsErrorsChangefunctionNo Callback function that changes the items errors.
accordionbooleanNo Toggle accordion view.
variant0No Cart variant.
isLoadingbooleanNo Toggle loading state.
showMaxItemsbooleanNo Toggle show max items.
showDiscountbooleanNo Toggle show discount.
showSavingsbooleanNo Toggle show savings.
quantityType0No Display quantity changes as a stepper or in a dropdown menu.
dropdownOptionsstring[]No An array of items to display in a dropdown menu.
undobooleanNo Enables the undo banner to restore recently removed items to the cart.

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
  • CartItem
  • UndoBanner
  • ItemTitle
  • ItemPrice
  • ItemQuantity
  • ItemTotal
  • ItemSku
  • ItemRemoveAction

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);
});
});
},
},
})($cartSummaryList);