← Web Components

Web Components · PDP

<mmm-pdp-wishlist>

Heart-toggle button for the PDP, with hover tooltip and a pulse animation on toggle. Reads the wishlist state from PDP_STORE.productInfo.wishlisted (or the is-wishlisted attribute) and persists via the SDK. Fires commmerce:login-required when guests tap.

Overview

Three visual states — default / hover / active — each with its own border and SVG fill. A subtle pulse animation plays on every toggle to confirm the action. The tooltip can be positioned and styled independently.

When to use

  • Inside the PDP buying area — next to title or sticky-add-to-cart.
  • For shoppers who want to save for later before deciding.

Quick start

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

<mmm-pdp-wishlist btn-active-svg-fill="#ff4d4f"></mmm-pdp-wishlist>

Attributes

AttributeTypeDefaultDescription
is-wishlistedbooleanstore-drivenManual override for the current state. Otherwise reads PDP_STORE.productInfo.wishlisted.
btn-positionstringrelativeCSS position of the button.
btn-border-colorstringtheme button strokeBorder colour (idle).
btn-hover-border-colorstringtheme button hover strokeBorder colour on hover.
btn-transitionstringall 0.3s easeHover transition.
btn-active-border-colorstring#ff0000Border colour when wishlisted.
btn-svg-transitionstringall 0.3s easeTransition applied to the SVG heart.
btn-active-svg-fillstring#ff0000Heart fill colour when wishlisted.
btn-active-svg-strokestring#ff0000Heart stroke colour when wishlisted.
tooltip-positionstringabsoluteCSS position of the tooltip.
tooltip-bottomstring100%CSS bottom anchor for the tooltip.
tooltip-leftstring50%CSS left anchor.
tooltip-transformstringtranslateX(-50%)CSS transform for the tooltip.
tooltip-backgroundstring#000Tooltip background.
tooltip-colorstring#fffTooltip text colour.
tooltip-paddingstring0.375rem 0.75remTooltip padding.
tooltip-border-radiusstring0.25remTooltip border-radius.
tooltip-font-sizestringtheme caption size / 0.75remTooltip font size.
tooltip-white-spacestringnowrapTooltip white-space.
tooltip-margin-bottomstring0.5remSpacing between tooltip and button.
tooltip-opacitynumber0Default opacity (hidden until hover).
tooltip-pointer-eventsstringnonePointer-events when hidden.
tooltip-transitionstringopacity 0.3s easeShow / hide transition.
tooltip-hover-opacitynumber1Opacity when the button is hovered.
pulse-animation-durationstring0.4sToggle pulse animation length.
custom-cssstring—Extra CSS appended inside the shadow DOM.

Events

EventTargetPayload
pdp:wishlist-toggledhost{ isWishlisted, productSlug, productName }
commmerce:login-requiredwindow{ action: 'wishlist' }
commmerce:wishlist-updatedwindow{ action: 'add' | 'remove', productSlug, productName }

Live preview

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

Examples

1. Default red-heart toggle

<mmm-pdp-wishlist></mmm-pdp-wishlist>

2. Accent purple instead of red

<mmm-pdp-wishlist
  btn-active-border-color="#c8a8ff"
  btn-active-svg-fill="#c8a8ff"
  btn-active-svg-stroke="#c8a8ff"
  pulse-animation-duration="0.5s">
</mmm-pdp-wishlist>

3. Hand login redirect for guests

window.addEventListener('commmerce:login-required', (e) => {
  if (e.detail.action === 'wishlist') location.href = '/login?next=' + location.pathname;
});