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:

Parameter	Type	Required	Description
children	CartModel	Yes	Child elements to be rendered inside the container.
routeProduct	function	No	Callback function that returns a product.
routeEmptyCartCTA	function	No	Callback function that returns an empty cart.
initialData	string	Yes	Initial cart data to preload the component. Defaults to null.
hideHeading	boolean	No	Whether to hide the heading of the cart.
hideFooter	boolean	No	Whether to hide the footer of the cart.
routeCart	function	No	Callback function that navigates to the cart.
onItemUpdate	function	No	Callback function that updates the item.
onItemRemove	function	No	Callback function that removes the item.
maxItems	number	No	Maximum number of items to display.
slots	function	No	Allows passing a container or custom component.
attributesToHide	string[]	No	Attributes to hide.
enableRemoveItem	boolean	No	Enable remove item.
enableUpdateItemQuantity	boolean | { removeOnZero?: boolean }	No	Enables the quantity stepper. Pass { removeOnZero: true } to also remove the item when the quantity reaches 0; defaults to false.
onItemsErrorsChange	function	No	Callback function that changes the items errors.
accordion	boolean	No	Toggle accordion view.
variant	primary | secondary	No	Cart variant.
isLoading	boolean	No	Toggle loading state.
showMaxItems	boolean	No	Toggle show max items.
showDiscount	boolean	No	Toggle show discount.
showSavings	boolean	No	Toggle show savings.
quantityType	stepper | dropdown	No	Display quantity changes as a stepper or in a dropdown menu.
dropdownOptions	string[]	No	An array of items to display in a dropdown menu.
undo	boolean	No	Enables the undo banner to restore recently removed items to the cart.
includeOutOfStockItems	boolean	No	Display out-of-stock and insufficient-quantity items in the main cart item list alongside in-stock items. Default: false.
confirmBeforeDelete	boolean	No	Enables the confirmation banner when an item is removed from the cart. When set to true, clicking the remove button shows an inline confirmation banner instead of immediately deleting the item.

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;
}

Copy

Supported slots

The CartSummaryList container supports the following slots:

• Heading
• EmptyCart
• Footer
• Thumbnail
• ProductAttributes
• CartSummaryFooter
• CartItem
• UndoBanner
• ConfirmDeleteBanner
• 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,
  // confirmBeforeDelete: true,
  // accordion: true,
  // includeOutOfStockItems: 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);