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.

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