← Web Components

Web Components · Cart & Checkout

<mmm-cart>

The full-page cart. Renders items from window.CommmerceCartManager — the same singleton store the slider and header-cart subscribe to — with a live-updating order summary and a checkout CTA. Theme-aware by default with ~30 inline overrides.

Overview

Distinct from <commmerce-cart-slider> — this is the full-screen cart at /cart instead of a slide-in drawer. Both wrap the same CommmerceCartManager so they stay in sync. The manager exposes load(), updateQuantity(itemCode, action), removeItem(itemCode), and a subscribe(fn) hook.

All visible typography and button styling falls back to CommmerceThemeSettings.themeColour + typography — set an inline attribute to override per instance.

When to use

  • On a dedicated /cart page when shoppers click the cart icon and prefer a full page over the slider.
  • For checkout-heavy flows where the cart needs more breathing room than a drawer.

Quick start

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

<mmm-cart></mmm-cart>

Palette

AttributeTypeDefaultDescription
theme-modestring—light (default), dark, or auto. Swaps the CSS-variable palette via :host([theme-mode]) rules.
text-primary-colorstringtheme primary textPrimary text colour.
text-secondary-colorstringtheme secondary textSecondary text colour.
border-colorstringtheme borderBorder colour.
border-radiusstringtheme border radiusBorder-radius.

Heading attributes

AttributeTypeDefaultDescription
heading-font-familystringtheme heading fontFont family for the "Cart" / page heading.
heading-font-weightstringtheme heading weightHeading font weight.

Item attributes

AttributeTypeDefaultDescription
item-name-font-familystringtheme description fontProduct-name font family.
item-name-font-weightstringtheme description weightProduct-name weight.
item-name-font-sizestringtheme description sizeProduct-name size.
item-name-colorstringtheme primary textProduct-name colour.
item-price-font-familystringtheme sellingPrice fontCurrent-price font family.
item-price-font-weightstringtheme sellingPrice weightCurrent-price weight.
item-price-font-sizestringtheme sellingPrice sizeCurrent-price size.
item-price-colorstringtheme primary textCurrent-price colour.
item-original-price-font-familystringtheme originalPrice fontCompare-at font family.
item-original-price-font-sizestringtheme originalPrice sizeCompare-at size.
item-original-price-colorstringtheme secondary textCompare-at colour.
quantity-border-colorstringtheme borderBorder of the quantity stepper.
quantity-border-radiusstringtheme border radiusQuantity stepper border-radius.
AttributeTypeDefaultDescription
button-colorstringtheme button fillCheckout CTA background.
button-hover-colorstringtheme button hover fillCTA hover background.
button-text-colorstringtheme add-to-cart textCTA text colour.
button-hover-text-colorstringtheme add-to-cart hover textCTA hover text colour.
button-stroke-colorstringtheme button strokeCTA border colour.
button-hover-stroke-colorstringtheme button hover strokeCTA hover border colour.
button-font-familystringtheme button fontCTA font family.
button-font-weightstringtheme button weightCTA font weight.
button-font-sizestringtheme button sizeCTA font size.
button-letter-spacingstringtheme button letter-spacingCTA letter-spacing.
button-text-transformstringtheme button transformCTA text-transform.

Events

<mmm-cart> is bound to window.CommmerceCartManager, which dispatches the events below on window:

EventTargetPayload
commmerce:cart-state-changedwindow{ cart_count: number }
commmerce:update-quantitywindow{ itemCode, action: 'inc'|'dec', response }
commmerce:remove-itemwindow{ itemCode, response }
commmerce:checkoutwindow{ items }

Listens on window: commmerce:cart-updated (triggers a fresh manager.load()).

Manager API

MethodReturnsDescriptionNotes
CommmerceCartManager.getState(){ items, cartInfo, isLoading, isUpdating }—Read-only snapshot.
CommmerceCartManager.subscribe(fn)() => unsubscribe—Subscribe to state changes. Returns an unsubscribe function.
CommmerceCartManager.load()Promise<void>—Refresh cart from the SDK. Auto-called on commmerce:cart-updated.
CommmerceCartManager.updateQuantity(itemCode, action)Promise<void>—action is 'inc' or 'dec' for +1 / -1.
CommmerceCartManager.removeItem(itemCode)Promise<void>—Remove an item entirely.

Live preview

store sample-store tag <mmm-cart>

Examples

1. Default — theme-driven

<mmm-cart></mmm-cart>

2. Pill-style checkout CTA

<mmm-cart
  checkout-btn-background="#0e1011"
  checkout-btn-color="#ffffff"
  checkout-btn-hover-background="#c8a8ff"
  checkout-btn-hover-color="#0e1011"
  checkout-btn-text-transform="uppercase"
  checkout-btn-letter-spacing="0.1em">
</mmm-cart>

3. Subscribe to cart-state changes

const unsub = window.CommmerceCartManager.subscribe((state) => {
  console.log('Cart now has', state.items.length, 'distinct items');
  if (state.cartInfo) console.log('Subtotal:', state.cartInfo.subtotal);
});
/* … later …  */
unsub();