← Web Components

Web Components · Order

<mmm-order-list>

Paginated order-history list for the signed-in customer. Each card surfaces the order number, date, delivery status, total, plus inline product thumbnails with variant tags. Clicking an order navigates to the order-detail page and broadcasts order:clicked.

Overview

Reads orders from window.OrderStore (fetched via the SDK). Each card shows the order header (number / date / status / total), shipping address, and a horizontal strip of product thumbnails with quantity badges and variant tags. Loading + empty + error states are built-in.

theme-mode is the master switch — light (default, matches the original v1 design) or dark. Every individual colour can still be overridden via an attribute even after picking a theme mode.

When to use

  • On /account/orders as the canonical order-history view.
  • Inside a customer-portal layout.

Quick start

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

<mmm-order-list theme-mode="light"></mmm-order-list>

Attributes

AttributeTypeDefaultDescription
theme-modestringlightOne of light or dark — flips every default colour to the matching palette.
text-primary-colorstringtheme primary text / paletteOrder-number, product-name colour.
text-secondary-colorstringtheme secondary text / paletteDate, status, helper-text colour.
button-colorstringtheme button fill / palettePrimary CTA background (e.g. "Reorder").
button-color-hoverstringtheme button hover fill / palettePrimary CTA hover.
button-text-colorstringpalettePrimary CTA text colour.
border-colorstringtheme border / paletteCard border.
wrapper-bgstringpaletteOuter page-section background.
card-bgstringpaletteOrder-card background.
order-address-colorstringpaletteShipping-address line colour.
item-separator-colorstringpaletteHairline between inline product items.
image-placeholder-bgstringpaletteBackground for missing product images.
variant-tag-bgstringpaletteVariant-tag pill background.
qty-badge-bgstringpaletteQuantity-badge background.
qty-badge-colorstringpaletteQuantity-badge text colour.
state-bgstringpaletteEmpty / loading / error panel background.
spinner-track-colorstringpaletteLoading-spinner track colour.
status-placed-colorstringpaletteColour of the "placed" status icon stroke.

Events

EventTargetPayload
order:clickedwindow{ orderNo }

Fires when an order card is clicked, just before navigation. Useful for analytics or pre-navigation guards.

Live preview

store sample-store tag <mmm-order-list>

Examples

1. Default — light mode

<mmm-order-list></mmm-order-list>

2. Dark mode with accent CTAs

<mmm-order-list
  theme-mode="dark"
  button-color="#c8a8ff"
  button-color-hover="#b990ff"
  button-text-color="#0e1011">
</mmm-order-list>

3. Track order-click analytics

window.addEventListener('order:clicked', (e) => {
  analytics.track('order_open', { orderNo: e.detail.orderNo });
});