Product Quantity by vtex

This page is about version 1.4.1 of the app, which is not the most recent version. The latest stable version is 1.10.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

Import the Product Quantity to your dependencies on manifest.json file.


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

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 name	Type	Description	Default Value
`warningQuantityThreshold`	`Number`	Displays 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`
`size`	`NumericSize`	Preset values `font-size` and `padding` to the component	`'small'`
`showLabel`	`boolean`	If it should show a label	`true`

NumericSize

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

Value	Description
`'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`