← Web Components

Web Components · Cart & Checkout

<mmm-checkout-cart-info>

The cart-summary panel at the top of the checkout page. Renders the current items with quantity badges, product attributes, a shipping banner, and an "Add notes" link. Subscribes to window.CheckoutStore; no inline attributes.

Overview

Renders via React inside the shadow DOM, driven by the shared CheckoutStore state. Reading from the store keeps all <mmm-checkout-*> children in sync — change the cart in one place, every panel reflects it.

Each cart row shows the product image, a positioned quantity badge, the product name and variant attributes, and the line price. A shipping banner above the list surfaces free-shipping thresholds; clicking the "Add notes" pill fires the checkout:add-notes event.

When to use

  • At the top of the /checkout layout to remind shoppers what they're buying.
  • Pair with <mmm-checkout-price-summary> for a complete order summary.

Quick start

<script src="https://v2-api-production.commmerce.com/api/v1/web-component/commmerce-sdk.js?store=sample-store"></script>

<mmm-checkout-cart-info></mmm-checkout-cart-info>

Attributes

No theming attributes — this component renders with hard-coded styles tuned for the standard checkout layout. Use standard HTML attributes (id, class, hidden) only.

Events

EventTargetPayload
checkout:add-noteswindow{}

Fires when the "Add notes" pill is clicked. Listen on window to open your own notes dialog.

Live preview

store sample-store tag <mmm-checkout-cart-info>

Examples

1. Drop into the checkout column

<mmm-checkout-cart-info></mmm-checkout-cart-info>

2. Open a notes dialog on click

window.addEventListener('checkout:add-notes', () => {
  document.querySelector('#notes-dialog').showModal();
});

3. Standard checkout column wiring

<section class="checkout-right">
  <mmm-checkout-cart-info></mmm-checkout-cart-info>
  <mmm-checkout-coupon></mmm-checkout-coupon>
  <mmm-checkout-price-summary></mmm-checkout-price-summary>
</section>