Documentation
Feedback
Guides
VTEX IO Apps

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

This page is about version 1.4.1 of the app, which is not the most recent version. The latest stable version is 1.9.0.

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. Import the Product Quantity to your dependencies on manifest.json file.

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

  1. Add the Product Quantity block to your theme. If you want to display it on a Product Page, you should declare the product-quantity in the store.product block. In order to display it in a Product Summary block, i.e. in blocks that use Product Summary, declare the product-summary-quantity in the product-summary.shelf block.

Check an example of a Product Details Page built using Flex Layout with the product-quantity below:


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

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. Default: 0 (does not appear).0
sizeNumericSizePreset values font-size and padding to the component'small'
showLabelbooleanIf it should show a labeltrue

NumericSize

You can check how big these values are and what classes it aplies by going to the styleguide docs.

ValueDescription
'small'Small size
'regular'Medium size
'large'Large size

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
quantitySelectorContainer
availableQuantityContainer
quantitySelectorTitle
quantitySelectorStepper
summaryContainer
See also
VTEX App Store
VTEX IO Apps