ProductQuantity

The ProductQuantity container manages and displays the quantity of a product that a shopper wants to purchase on the product details page.

The container receives initial product data during initialization to preload the component and, being event-driven, updates with data emitted to pdp/data within the event scope.

ProductQuantity configurations

The ProductQuantity container provides the following configuration options:

Option	Type	Req?	Description
onValue	function	No	Callback function to handle changes in the quantity.
scope	string	No	Unique identifier for the PDP context. Only containers rendered with this scope will respond to product events.

Example

The following example demonstrates how to configure the ProductQuantity container:

import { render as provider } from '@dropins/storefront-pdp/render.js';
import ProductQuantity from '@dropins/storefront-pdp/containers/ProductQuantity.js';

await provider.render(ProductQuantity, {
  onValue: (value) => console.log(value),
})(mountElement);

Replace mountElement with the DOM node where the quantity control should appear.