Product Summary Quantity by vtex

The specified version of the app (3.x.0) does not exist. This page is about the latest stable version, which is 3.6.4.

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://user-images.githubusercontent.com/67066494/190498359-2418db72-f3a3-4e51-9a70-2d2764f945ce.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": "3.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`