Product Summary Quantity

The quantity selector is made up of three blocks quantity-selector-minicart, quantity-selector-shelf-guest and quantity-selector-shelf-owner-list and each of them represents a quantity selector for different contexts which are use in mini-cart, guest shelf, list owner shelf and selection modal on search page.

{"base64":" ","img":{"width":1712,"height":666,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":441941,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-list-quantity-selector-0.gif"}}

Configuration

Import the vtex.list app to your theme's peer dependencies in the manifest.json file as in the following example:


_10  "peerDependencies": {
_10    "vtex.list": "2.x"
_10  }

Add the quantity-selector block to other theme block using a product context, such as the product-summary.shelf. For example:


_12  "product-summary.shelf":{
_12    "children":[
_12      "flex-layout.col"
_12    ]
_12  },
_12  
_12  "flex-layout.col": {
_12    "children": [      
_12      "product-summary-price#desktopPriceGuest",
_12+     "quantity-selector-shelf-guest",
_12    ]
_12  }

Customization - "quantity-selector-minicart"

To apply CSS customizations in this and other blocks, follow the Using CSS handles for store customization guide.

CSS Handles
`quantitySelectorWrapper`
`quantitySelectorButton`
`quantitySelectorDecrease`
`quantitySelectorIncrease`

Customization - "quantity-selector-shelf-guest"

To apply CSS customizations in this and other blocks, follow the Using CSS handles for store customization guide.

CSS Handles
`quantitySelectorContainer`
`quantitySelectorTitle`
`availableQuantityContainer`

Customization - "quantity-selector-shelf-owner-list"

To apply CSS customizations in this and other blocks, follow the Using CSS handles for store customization guide.

CSS Handles
`summaryContainer`
`quantitySelectorContainer`
`quantitySelectorTitle`
`availableQuantityContainer`
`quantitySelectorStepper`