← Web Components

Web Components · Order

<mmm-track-order>

Guest order-tracking form — email or phone (with country code) plus order number. On success, redirects to the order-detail page. Uses <mmm-phone-input> internally for phone entry so the country picker is consistent across the site.

Overview

Designed for guest shoppers who placed an order without an account and want to check its status. The form has a tab toggle for email vs phone, an input for the order number, and a "Track order" submit button. The SDK looks up the order by (contact + order-number) — on match, the customer is redirected to /orders/{orderNo}/{accessToken}; on mismatch, an inline error is shown.

When to use

  • On a public /track page for guest order lookups.
  • Inside a "Help" footer link as a quick lookup widget.

Quick start

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

<mmm-track-order></mmm-track-order>

Attributes

AttributeTypeDefaultDescription
theme-modestringlightOne of light or dark. In dark mode the component skips colour-critical store-theme settings (text + button fill) so a light-tuned palette doesn't disappear on a dark surface.
background-colorstringtransparent (light) / #121212 (dark)Outer wrapper background colour.
panel-backgroundstring#ffffff (light) / #1f1f1f (dark)Card / panel background colour.
text-primary-colorstringtheme primary textTitle and primary text colour.
text-secondary-colorstringtheme secondary textSubtitle and helper-text colour.
button-colorstringtheme button fillTrack-order button background.
button-color-hoverstringtheme button hover fillTrack-order button hover.
input-stroke-colorstringtheme input strokeInput border colour.
link-colorstringtheme hyperlink defaultEmail/phone toggle link colour.
link-color-hoverstringtheme hyperlink hoverToggle link hover colour.

Live preview

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

Examples

1. Default — theme-driven

<mmm-track-order></mmm-track-order>

2. Accent-branded

<mmm-track-order
  button-color="#c8a8ff"
  button-color-hover="#b990ff"
  link-color="#c8a8ff"
  link-color-hover="#b990ff">
</mmm-track-order>

3. Dark-mode card

<mmm-track-order
  text-primary-color="#fafafa"
  text-secondary-color="#9ca3af"
  input-stroke-color="#2a2e33">
</mmm-track-order>