Skip to content
Adobe Commerce Storefront

MiniCart container

The MiniCart container displays a summary of the shopper’s shopping cart. It shows a list of products currently in the cart and subtotal amounts. It also provides call-to-action buttons for proceeding to checkout or updating the cart.

MiniCart container

MiniCart container

Configurations

The MiniCart container provides the following configuration options:

childrenVNode[]NoThe child elements to be rendered inside the mini cart.
initialDataCartModel | nullNoThe initial data for the mini cart. Defaults to null.
hideFooterbooleanNoFlag to hide the footer in the mini cart. Defaults to true.
slots{ ProductList?: SlotProps }NoSlot props for customizing the product list display.
routeProductfunctionNoFunction to generate the URL for a product.
routeCartfunctionNoFunction to generate the URL for the cart page.
routeCheckoutfunctionNoFunction to generate the URL for the checkout page.
routeEmptyCartCTAfunctionNoFunction to generate the URL for the empty cart call-to-action.
displayAllItemsbooleanNoFlag to show all items.
showDiscountbooleanNoFlag to show discounts in the mini cart.
showSavingsbooleanNoFlag to show savings in the mini cart.
enableItemRemovalbooleanYesFlag to enable removing items from the mini cart. When set to true, users can remove products from the cart directly in the mini cart interface.
enableQuantityUpdatebooleanNoFlag to enable updating item quantities in the mini cart. When set to true, users can adjust product quantities directly in the mini cart interface.
hideHeadingbooleanNoFlag to hide the heading in the mini cart. When set to true, the mini cart header will not be displayed.

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 MiniCart container supports the ProductList slot.

Example configuration

The following example demonstrates how to render the MiniCart container:

provider.render(MiniCart, {
  routeProduct: (item) => {
      return `${item.url.categories.join('/')}/${item.url.urlKey}`;
  },
  routeEmptyCartCTA: () => '#empty-cart',
  routeCart: () => '#cart',
  routeCheckout: () => '#checkout',
  showDiscount: true,
  // showSavings: true,
  // enableItemRemoval: true,
  // enableQuantityUpdate: true,
  // hideHeading: true,
})($miniCart);