← Web Components

Web Components · Global

<mmm-wishlist>

The full wishlist page layout — grid of saved products with remove + add-to-cart actions. Subscribes to commmerce:wishlist-updated so changes from <mmm-product-wishlist> or <mmm-pdp-wishlist> propagate live.

Overview

Standalone page at /wishlist. Each saved item renders a card with media, name, price, and quick-actions. Removing an item dispatches commmerce:wishlist-updated back out so other components stay in sync. The page guards itself behind login — guests are redirected to /login.

Quick start

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

<mmm-wishlist></mmm-wishlist>

Attributes

AttributeTypeDefaultDescription
empty-textstringYour wishlist is emptyMessage shown when the wishlist has no items.
empty-cta-textstringContinue ShoppingLabel for the empty-state CTA button.
empty-cta-urlstring/Destination for the empty-state CTA button.
theme-modestringlightlight or dark — swaps the default palette.
background-colorstringtransparent (light) / #121212 (dark)Host wrapper background.
card-backgroundstring#ffffff (light) / #121212 (dark)Product-row background.
text-primary-colorstringtheme primary text / #111Card primary text colour.
text-secondary-colorstringtheme secondary text / #666Card secondary text colour.
button-colorstringtheme button fill / #000Empty-state CTA background.
border-colorstringtheme border / #e5e7ebRow divider colour.

Events

EventTargetPayload
commmerce:wishlist-updatedwindow{ action: 'remove', productSlug }

Fires whenever a product is added or removed from the wishlist on this page. Other components on the page (product-wishlist hearts on related grids) listen for this and update their state accordingly.

Live preview

store sample-store tag <mmm-wishlist>

Examples

1. Default — account-page wiring

<mmm-wishlist></mmm-wishlist>

2. Accent CTA

<mmm-wishlist
  button-color="#c8a8ff"
  border-color="#2a2e33"
  text-primary-color="#fafafa">
</mmm-wishlist>

3. Track add/remove for analytics

window.addEventListener('commmerce:wishlist-updated', (e) => {
  analytics.track(e.detail.added ? 'wishlist_add' : 'wishlist_remove', {
    productSlug: e.detail.slug
  });
});