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
  • Blocks API
    • Configuration
  • Styles API
    • CSS Namespaces
• Troubleshooting
• Tests

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.

  "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 without showing availability:

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

See an example of how to configure showing availability:

  "product-availability": {
    "props": {
      "showAvailability": "stock",
      "showAvailabilityMessage": "There are {quantity} available!"
    }
  }

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.

{
  "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 name	Type	Description
threshold	Number	DefineMinimum quantity that makes low stock message appear (if message is set). Default: 0
lowStockMessage	String	String 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: ""
highStockMessage	String	String to be shown when stock is higher or equal than threshold. If left empty, won't show. Default: ""
showAvailability	'disabled' \ 'stock'	Enables the possibility to show the available items instead of lowStockMessage or highStockMessage. Default 'disabled'. To enable it, string should be 'stock'
showAvailabilityMessage	String	String to be shown when show available option is true. Should have {quantity} inside the given string, to be replaced for the available property. Example: "There are {quantity} available!". Leave empty to not 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:

  "builders": {
    "styles": "1.x"
  }

2. Create a file called vtex.product-availability.css inside the styles/css folder. Add your custom styles:

.container {
  margin-top: 10px;
}

CSS Namespaces

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

Token name	Component	Description
container	index	The main container of ProductAvailability
lowStockText	index	Normal text for the low stock message.
lowStockHighlight	index	Number of the low stock message that is supposed to be highlighted.
highStockText	index	Text of the hight stock message.
showAvailableText	index	Text of the show available message.
showAvailableTextHighlight	index	Number of the available items that is supposed to be highlighted.

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