← Web Components

Web Components · PDP

<mmm-pdp-add-to-cart-buy-now>

The PDP's primary CTA pair — Add to cart + Buy now — plus a stock indicator above them. Reads the active variant + quantity from PDP_STORE, calls the cart SDK, and dispatches commmerce:cart-updated. Buy-now adds the item and then navigates to checkout.

Overview

Each of the two buttons can be hidden independently via add-to-cart-status / buy-now-status. The stock indicator sits above the buttons and reflects the current variant's stock state with full theming (success / out-of-stock / low-stock colours).

When to use

  • On every PDP — the primary conversion surface.
  • For express-checkout themes — enable buy-now-status="true".
  • For B2B or quote-only catalogs — set both statuses to false and use a custom contact button.

Quick start

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

<mmm-pdp-add-to-cart-buy-now add-to-cart-text="Add to bag" buy-now-text="Buy now"></mmm-pdp-add-to-cart-buy-now>

Attributes

41 inline attributes — visibility + layout + stock indicator + per-button typography.

AttributeTypeDefaultDescription
add-to-cart-statusbooleantrueRender the Add-to-cart button.
buy-now-statusbooleantrueRender the Buy-now button.
add-to-cart-textstringAdd to CartAdd-to-cart button label.
buy-now-textstringBuy it NowBuy-now button label.
buttons-displaystringflexContainer display for the two buttons.
buttons-gapstring0.625remGap between the buttons.
buttons-margin-bottomstring1.25remSpacing below the buttons row.
buttons-white-spacestringnowrapButton label white-space.
stock-paddingstring1rem 2remOut-of-stock banner padding.
stock-text-alignstringcenterStock banner text-align.
stock-colorstring#ff0000Out-of-stock label colour.
stock-font-weightstring700Stock font weight.
stock-font-sizestring1.125remStock font size.
stock-borderstring2px solid #ff0000Stock banner border.
stock-border-radiusstring0.25remStock border-radius.
stock-backgroundstring#fff5f5Stock background.
stock-margin-bottomstring1.25remSpacing below the stock banner.
stock-text-transformstringuppercaseStock text-transform.
add-to-cart-backgroundstringtheme addToCart fill / #000Add-to-cart background.
add-to-cart-colorstringtheme addToCart text / #fffAdd-to-cart text colour.
add-to-cart-borderstringtheme addToCart stroke / transparentAdd-to-cart border.
add-to-cart-hover-backgroundstringtheme addToCart hoverFill / #333Hover background.
add-to-cart-hover-colorstringtheme addToCart hoverText / #fffHover text colour.
add-to-cart-hover-borderstringtheme addToCart hoverStroke / transparentHover border.
add-to-cart-font-familystringtheme addToCart font / inheritFont family.
add-to-cart-font-sizestringtheme addToCart size / 0.875remFont size.
add-to-cart-font-weightstringtheme addToCart weight / 600Font weight.
add-to-cart-letter-spacingstringtheme addToCart letterSpacing / normalLetter-spacing.
add-to-cart-text-transformstringtheme addToCart transform / noneText-transform.
buy-now-backgroundstringtheme variant fill / #000Buy-now background (uses seeOrSelectVariantButton theme).
buy-now-colorstringtheme variant text / #fffBuy-now text colour.
buy-now-borderstringtheme variant stroke / transparentBuy-now border.
buy-now-hover-backgroundstringtheme variant hoverFill / #333Hover background.
buy-now-hover-colorstringtheme variant hoverText / #fffHover text colour.
buy-now-hover-borderstringtheme variant hoverStroke / transparentHover border.
buy-now-font-familystringtheme variant font / inheritFont family.
buy-now-font-sizestringtheme variant size / 0.875remFont size.
buy-now-font-weightstringtheme variant weight / 600Font weight.
buy-now-letter-spacingstringtheme variant letterSpacing / normalLetter-spacing.
buy-now-text-transformstringtheme variant transform / noneText-transform.
custom-cssstring—Extra CSS appended inside the shadow DOM.

Events

EventTargetPayload
cart:addedhost{ productSlug, quantity, cartData }
cart:quantity-updatedhost{ action: 'increment' | 'decrement', quantity, cartData }
cart:removedhost{ cartItemCode }
buy-now:clickedhost{ product: { slug, variants, quantity } }
commmerce:cart-updatedwindow{ action: 'add', productSlug, cartData }

Live preview

store sample-store tag <mmm-pdp-add-to-cart-buy-now>

Examples

1. Both buttons, default styling

<mmm-pdp-add-to-cart-buy-now></mmm-pdp-add-to-cart-buy-now>

2. Filled primary + ghost secondary

<mmm-pdp-add-to-cart-buy-now
  add-to-cart-text="Add to bag"
  buy-now-text="Buy now"
  buttons-gap="0.75rem"
  add-to-cart-background="#0e1011"
  add-to-cart-color="#fff"
  buy-now-background="transparent"
  buy-now-color="#0e1011"
  buy-now-border="1px solid #0e1011"
  buy-now-hover-background="#0e1011"
  buy-now-hover-color="#fff">
</mmm-pdp-add-to-cart-buy-now>

3. Add-to-cart only (no express checkout)

<mmm-pdp-add-to-cart-buy-now
  buy-now-status="false"
  add-to-cart-text="Add to cart">
</mmm-pdp-add-to-cart-buy-now>