Product Availability

Description

The Product Availability component shows different messages set by the user, depending on the available quantity of the product.

It is only available to be used on the store.product block, in your product page.

📢 Disclaimer: Don't fork this project; use, contribute, or open issue with your feature request

Table of Contents

Usage

This app uses our store builder with the blocks architecture. To know more about Store Builder click here.

To use this app or override the default CSS you need import it in your dependencies on manifest.json file.

1
2
3
  "dependencies": {
    "vtex.product-availability": "0.x"
  }

Then, add product-availability block to your blocks.json

Now, you can change the behavior of the product-availability block that is in the minicart. See an example of how to configure:

1
2
3
4
5
6
7
"product-availability": {
  "props": {
    "threshold": "10",
    "lowStockMessage": "Only {quantity} left!",
    "highStockMessage": "Item in stock!"
  }
}

Blocks API

When implementing this app as a block, various inner blocks may be available. The following interface lists the available blocks within product-availability and describes if they are required or optional.

1
2
3
4
5
{
  "product-availability": {
    "component": "ProductAvailability"
  }
}

For now this block does not have any required or optional blocks.

Configuration

Through the Storefront, you can change the product-availability's behavior and interface. However, you also can make in your theme app, as Store theme does.

Prop nameTypeDescription
thresholdNumberDefineMinimum quantity that makes low stock message appear (if message is set). Default: 0
lowStockMessageStringString to be shown to user when stock is lower than threshold. Should have {quantity} inside the given string, to be replaced for the threshold property. Example: \"Only {quantity} left!\". Leave empty to not show. Default: ""
highStockMessageStringString to be shown when stock is higher or equal than threshold. If left empty, won\'t show. Default: ""

Styles API

This app provides some CSS classes as an API for style customization.

To use this CSS API, you must add the styles builder and create an app styling CSS file.

  1. Add the styles builder to your manifest.json:
1
2
3
  "builders": {
    "styles": "1.x"
  }
  1. Create a file called vtex.product-availability.css inside the styles/css folder. Add your custom styles:
1
2
3
.container {
  margin-top: 10px;
}

CSS Namespaces

Below, we describe the namespaces that are defined in the product-availability.

Token nameComponentDescription
containerindexThe main container of ProductAvailability
lowStockTextindexNormal text for the low stock message.
lowStockHighlightindexNumber of the low stock message that is supposed to be highlighted.
highStockTextindexText of the hight stock message.

Troubleshooting

You can check if others are passing through similar issues here. Also feel free to open issues or contribute with pull requests.

Tests

To execute our tests go to react/ folder and run yarn test

Travis CI

Build Status
Coverage Status