Availability Subscriber


AvailabilitySubscriber is a VTEX Component that shows the availability subscriber form that is shown when the product isn't available. This Component can be imported and used by any VTEX App.

Attention: This component only creates a list of the users that subscribe to this product. Currently it doesn't send an automatic email to these users when the product becomes available. It only collects the emails of the users that show interest on the products.

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

Table of Contents


You should follow the usage instruction in the main README.

Then, add availability-subscriber block into your app theme, as we do in our Product Details app.

In order to collect the emails correctly, this feature needs a special configurantion on Master Data as it is detailed below:

The form is submitted to Master Data on the Entity: AS

Prop nameTypeDescription
skuIdStringThe id of the product sku to which will be watched for changes in the product quantity
nameStringThe name of the user
emailStringThe email of the user
notificationSendStringIf the notification has been sent already, use "true" or "false".
createdAtString - ISO formatWhen the document was created Ex.: ISO (2011-10-05T14:48:00.000Z)
sendAtString - ISO formatWhen the user was notificated Ex.: ISO (2011-10-05T14:48:00.000Z)

Blocks API

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

  "availability-subscriber": {
    "component": "AvailabilitySubscriber"

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


🚧 🚧 🚧

Styles API

You should follow the Styles API instruction in the main README.

CSS Namespaces

Below, we describe the namespace that are defined in the AvailabilitySubscriber.

Class nameDescriptionComponent Source
subscriberContainerAvailabilitySubscriber containerindex
titleAvailabilitySubscriber titleindex
subscribeLabelAvailabilitySubscriber subscribe labelindex
formAvailabilitySubscriber form containerindex
contentAvailabilitySubscriber form content containerindex
inputAvailabilitySubscriber form input containterindex
inputNameAvailabilitySubscriber form input nameindex
inputEmailAvailabilitySubscriber form input emailindex
submitAvailabilitySubscriber form submit buttonindex
successAvailabilitySubscriber success feedback messageindex
errorAvailabilitySubscriber error feedback messageindex