Product Availability

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

product-availability

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!