Product Availability
The Product Availability app displays text messages regarding the in-stock quantity for products.
Configuration
- Add the Product Availability app to your theme's dependencies in the
manifest.json
file:
"dependencies": {
+ "vtex.product-availability": "0.x"
}
- Add the
product-availability
block to the desired theme block whose data is fetched from the Product Context, such as the Minicart. For example:
"product-availability": {
"props": {
"threshold": "10",
"lowStockMessage": "Only {quantity} left!",
"highStockMessage": "Item in stock!"
}
}
Prop name | Type | Description | Default value |
---|---|---|---|
threshold | number | Minimum product quantity that makes the low stock message to be displayed (if any message is set in the lowStockMessage prop). | 0 |
lowStockMessage | string | Message text to be displayed when the in-stock quantity is lower than the quantity defined in the threshold prop. This prop value must have {quantity} inside the string text in order to properly display the stock quantity according to the threshold. For example: "Only {quantity} left! . Notice: if this prop's value is left empty, no message will be shown. | "" |
highStockMessage | string | Message text to be displayed when the in-stock quantity is higher or equal than the quantity defined in the threshold prop. Notice: if this prop's value is left empty, no message will be shown. | "" |
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 |
---|
container |
highStockText |
lowStockHighlight |
lowStockText |
Contributors ✨
Thanks goes to these wonderful people:
This project follows the all-contributors specification. Contributions of any kind are welcome!
Updated 3 months ago
Did this page help you?