All ContributorsAll Contributors

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

product-availabilityproduct-availability

Configuration

  1. Add the Product Availability app to your theme's dependencies in the manifest.json file:
 "dependencies": {
+  "vtex.product-availability": "0.x"
 }
  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:
"product-availability": {
  "props": {
    "threshold": "10",
    "lowStockMessage": "Only {quantity} left!",
    "highStockMessage": "Item in stock!"
  }
}
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

Contributors ✨

Thanks goes to these wonderful people:

This project follows the all-contributors specification. Contributions of any kind are welcome!


Did this page help you?