Documentation
Feedback
Guides

Quantity Selector

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-2-0.gif"}}

Configuration

  1. Import the vtex.list app to your theme's peer dependencies in the manifest.json file as in the following example:
  "peerDependencies": {
    "vtex.list": "2.x"
  }
  1. Add the quantity-selector block to other theme block using a product context, such as the product-summary.shelf. For example:
  "product-summary.shelf":{
    "children":[
      "flex-layout.col"
    ]
  },
  
  "flex-layout.col": {
    "children": [      
      "product-summary-price#desktopPriceGuest",
+     "quantity-selector-shelf-guest",
    ]
  }

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
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page