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

Configurations

The MiniCart container provides the following configuration options:

children	VNode[]	No	The child elements to be rendered inside the mini cart.
initialData	CartModel | null	No	The initial data for the mini cart. Defaults to null.
hideFooter	boolean	No	Flag to hide the footer in the mini cart. Defaults to true.
slots	{ ProductList?: SlotProps }	No	Slot props for customizing the product list display.
routeProduct	function	No	Function to generate the URL for a product.
routeCart	function	No	Function to generate the URL for the cart page.
routeCheckout	function	No	Function to generate the URL for the checkout page.
routeEmptyCartCTA	function	No	Function to generate the URL for the empty cart call-to-action.
displayAllItems	boolean	No	Flag to show all items.
showDiscount	boolean	No	Flag to show discounts in the mini cart.
showSavings	boolean	No	Flag to show savings in the mini cart.
enableItemRemoval	boolean	Yes	Flag 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.
enableQuantityUpdate	boolean	No	Flag to enable updating item quantities in the mini cart. When set to true, users can adjust product quantities directly in the mini cart interface.
hideHeading	boolean	No	Flag 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;
}

Copy

Supported slots

The MiniCart container supports the following slots:

• ProductList
• ProductListFooter
• PreCheckoutSection
• Thumbnail
• Heading
• EmptyCart
• Footer
• ProductAttributes
• CartSummaryFooter
• CartItem
• UndoBanner
• ItemTitle
• ItemPrice
• ItemQuantity
• ItemTotal
• ItemSku
• ItemRemoveAction

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