Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Basic components
Product Quantity
Official extension
Version: 1.9.0
Latest version: 1.9.0

{"base64":"  ","img":{"width":110,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square"}}

The Product Quantity allows users to a add a chosen amount of the displayed product in their cart.

{"base64":"  ","img":{"width":2856,"height":1472,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":373243,"url":"https://user-images.githubusercontent.com/52087100/70237475-0f4bd900-1746-11ea-9af2-38f794f4a3dd.png"}}

Configuration

  1. Add the Product Quantity app to your dependencies in the theme's manifest.json file:

_10
"dependencies": {
_10
"vtex.product-quantity": "1.x"
_10
}

You are now able to use all blocks that are exported by the Product Quantity app. Check out the full list below:

Block nameDescription
product-quantityDisplays a quantity selector on the product details page. This block must be declared in the theme's store.product page template.
product-summary-quantityDisplays a quantity selector on Product Summary's blocks. This block must be declared as a children of the product-summary.shelf block.
  1. According to your desired scenario, add the product-quantity/product-summary-quantity blocks to your theme. For example:

_23
"flex-layout.col#product-price": {
_23
"props": {
_23
"preventVerticalStretch": true,
_23
"rowGap": 0
_23
},
_23
"children": [
_23
"product-name",
_23
"product-price#product-details",
_23
"product-separator",
_23
+ "product-quantity",
_23
"sku-selector",
_23
"flex-layout.row#buy-button",
_23
"availability-subscriber",
_23
"shipping-simulator",
_23
"share"
_23
]
_23
},
_23
"product-quantity": {
_23
"props": {
_23
"warningQuantityThreshold": 9999999,
_23
"showUnit": true
_23
}
_23
},

In the example above a Product Details Page is built using Flex Layout and the product-quantity block.

product-quantity and product-summary-quantity props

Prop nameTypeDescriptionDefault Value
warningQuantityThresholdnumberDisplays the quantity of remaining items in stock if the available quantity is less than or equal to the value given to this property.0 (the quantity is not displayed)
showUnitbooleanWhether the unit of measurement should be displayed (true) or not (false).true
sizeenumPreset size values for font-size and padding. You can check these value measures by accessing the VTEX Styleguide. Possible values are: small, regular, and large.small
showLabelbooleanWhether a label should be displayed (true) or not (false).true
selectorTypeenumDefines how the quantity selector should initially behave. Possible values are: stepper (displays an input field where the quantity can be directly defined, in addition to side buttons to increase or decrease the value) and dropdown (shows a list of predefined-quantity options. In case the last quantity option is selected by users, the component is replaced with an input).stepper
quantitySelectorStepenumDefines how the number of products that have unitMultiplier will works. Possible values are: singleUnit (the quantity will be not affected with the unitMultiplier) and unitMultiplier (the quantity will be affected with the unitMultiplier).unitMultiplier

Customization

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.

CSS Handles
availableQuantityContainer
quantitySelectorContainer
quantitySelectorDropdownContainer
quantitySelectorDropdownMobileContainer
quantitySelectorInputContainer
quantitySelectorInputMobileContainer
quantitySelectorStepper
quantitySelectorTitle
summaryContainer
See also
VTEX App Store
VTEX IO Apps