Commmerce Docs
← Web Components

Web Components · Product

<mmm-product-wishlist>

A heart toggle on a product card. Click to save / unsave; the SDK persists the state per-user and the icon reflects it. Dispatches commmerce:login-required for guests and commmerce:wishlist-updated after a successful toggle.

Overview

Reads the active/inactive state from the per-product store; the store keeps it in sync with the SDK's wishlist. Clicking when logged out fires commmerce:login-required so your login flow can intercept — clicking when logged in calls the wishlist SDK and then fires commmerce:wishlist-updated.

When to use

  • Inside <mmm-product-card> overlaid on the media area.
  • Anywhere a "save for later" affordance is appropriate.

Quick start

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

<mmm-product-card data-product='{"slug":"classic-tee"}'>
  <mmm-product-wishlist icon-size="1.25rem" active-color="#ff4d4f"></mmm-product-wishlist>
</mmm-product-card>

Attributes

AttributeTypeDefaultDescription
icon-sizestring1.25remWidth & height of the heart icon.
active-colorstring#ff4d4fHeart colour when the item is in the wishlist.
inactive-colorstring#9ca3afHeart colour when not in the wishlist.
backgroundstringtransparentBackground of the icon button.
border-radiusstring50%Border-radius — keep 50% for a circular hit area.
paddingstring0.375remPadding around the icon (drives the clickable hit area).
custom-cssstring—Extra CSS appended inside the shadow DOM.
classstring—Standard HTML class list.

Events

EventTargetPayload
commmerce:login-requiredwindow{ source: 'wishlist', slug: string }
commmerce:wishlist-updatedwindow{ slug: string, added: boolean }

Live preview

store sample-store tag <mmm-product-wishlist>

Examples

1. Inside a card overlaid on the media

<mmm-product-card data-product="{{item}}">
  <mmm-product-media></mmm-product-media>
  <mmm-product-wishlist
    custom-css="position:absolute;top:0.75rem;right:0.75rem;background:rgba(255,255,255,0.9);">
  </mmm-product-wishlist>
</mmm-product-card>

2. Open your login modal when guests click

window.addEventListener('commmerce:login-required', (e) => {
  if (e.detail.source === 'wishlist') openLoginModal();
});

3. Track wishlist adds in analytics

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