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.

Configurations

The CartSummaryList container provides the following configuration options:

Option	Type	Req?	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.
routeProduct	function	No	Callback function that returns a product.
routeEmptyCartCTA	function	No	Callback function that returns an empty 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	No	Enable update item quantity.
onItemsErrorsChange	function	No	Callback function that changes the items errors.
accordion	boolean	No	Toggle accordion view.
variant	0	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	0	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.

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