← Web Components

Web Components · PDP

<mmm-pdp-quantity>

Quantity stepper for the PDP — minus / display / plus. Writes the selected quantity into PDP_STORE so add-to-cart and buy-now both read from the same source. Enforces min / max bounds.

Overview

The plus / minus buttons disable themselves at the bounds. Every change updates PDP_STORE.quantity, which downstream components subscribe to — <mmm-pdp-add-to-cart-buy-now> reads it on click, and <mmm-pdp-sticky-add-to-cart> uses it to drive the sticky bar.

When to use

  • On PDPs where the shopper can pick more than one of the same SKU.
  • Skip for products where quantity is always 1 (e.g. digital downloads).

Quick start

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

<mmm-pdp-quantity min="1" max="10"></mmm-pdp-quantity>

Attributes

AttributeTypeDefaultDescription
minnumber1Minimum selectable quantity.
maxnumber99Maximum selectable quantity.
section-margin-bottomstring1.5625remSpacing below the block.
label-font-sizestring1rem"Quantity" label font size.
label-font-weightstring600Label font weight.
label-margin-bottomstring0.75remSpacing below the label.
label-displaystringblockSet none to hide the label.
controls-displaystringinline-flexDisplay of the stepper controls container.
controls-borderstring1px solid theme borderContainer border.
controls-border-radiusstring1.875remContainer border-radius.
controls-paddingstring0 0 0.25rem 0Container padding.
controls-align-itemsstringcenterAlign-items inside the container.
btn-widthstring2.5remWidth of plus / minus buttons.
btn-heightstring2.5remHeight of plus / minus buttons.
btn-borderstringnoneButton border.
btn-border-radiusstring1.875remButton border-radius.
btn-backgroundstringtheme button fill / #000Button background.
btn-cursorstringpointerButton cursor.
btn-font-sizestring1.25remButton font size.
btn-displaystringflexButton display.
btn-align-itemsstringcenterButton align-items.
btn-justify-contentstringcenterButton justify-content.
btn-transitionstringbackground 0.3s easeButton transition.
btn-user-selectstringnoneCSS user-select.
btn-hover-backgroundstringtheme button hoverFill / #333Button hover background.
btn-disabled-opacitystring0.4Opacity when button is disabled (at bounds).
btn-disabled-cursorstringnot-allowedCursor when disabled.
display-min-widthstring3.125remMinimum width of the quantity display box.
display-text-alignstringcenterDisplay text-align.
display-paddingstring0.625remDisplay padding.
display-font-weightstring600Display font weight.
display-font-sizestring1remDisplay font size.
custom-cssstring—Extra CSS appended inside the shadow DOM.

Events

EventTargetPayload
quantity:changedhost{ quantity, action: 'increment' | 'decrement' }

Live preview

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

Examples

1. Default

<mmm-pdp-quantity></mmm-pdp-quantity>

2. Bordered pill stepper

<mmm-pdp-quantity
  min="1"
  max="6"
  controls-border-radius="999px"
  controls-border="1px solid #0e1011"
  btn-width="2.25rem"
  btn-height="2.25rem">
</mmm-pdp-quantity>

3. Compact, label hidden

<mmm-pdp-quantity
  label-display="none"
  btn-width="1.75rem"
  btn-height="1.75rem"
  display-min-width="2rem"
  display-font-size="0.875rem">
</mmm-pdp-quantity>