Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Advanced components
Product Availability
Official extension
Version: 0.3.1
Latest version: 0.3.1

{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFUlEQVR4nGPg4+Mz1Nfjl5T7f2c+AAzxA3lptuDWAAAAAElFTkSuQmCC","img":{"src":"https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square","width":110,"height":20,"type":"svg"}}

The Product Availability app displays text messages regarding the in-stock quantity for products.

{"base64":"  ","img":{"width":2406,"height":1124,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":515402,"url":"https://user-images.githubusercontent.com/52087100/99307082-c8f76900-2834-11eb-96f2-df5e9d2bc49a.png"}}

Configuration

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

_10
"dependencies": {
_10
+ "vtex.product-availability": "0.x"
_10
}

  1. Add the product-availability block to the desired theme block whose data is fetched from the Product Context, such as the Minicart. For example:

_10
"product-availability": {
_10
"props": {
_10
"threshold": "10",
_10
"lowStockMessage": "Only {quantity} left!",
_10
"highStockMessage": "Item in stock!"
_10
}
_10
}

Prop nameTypeDescriptionDefault value
thresholdnumberMinimum product quantity that makes the low stock message to be displayed (if any message is set in the lowStockMessage prop).0
lowStockMessagestringMessage 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.""
highStockMessagestringMessage 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
See also
VTEX App Store
VTEX IO Apps