Availability Notifier Btn¶

The <availability-notifier-btn> webcomponent allows users to subscribe to notifications for product availability. When the product becomes available, subscribers are notified automatically.

Usage requires adding two HTML elements, one with slot="subscribe" attribute and the other with slot="unsubscribe" attribute. In those elements you can provide any valid HTML template to render under those conditions.

Attributes¶

Attribute name	Type	Default	Description
`product-name`	`string`	''	Name of the product associated with the availability notifier button
`product-image`	`string`	''	URL of the product image, displayed in subscription modals for visual context
`product-id`	`number`	null	Id of the product associated with the availability notifier button
`product-variant-id`	`number`	null	Id of the product variant associated with the availability notifier button

Event Bus events¶

This webcomponent listens to the following events with the Event Bus:

product.stockChanged

Webcomponents reference¶

Example¶

In this example we render a basic availability-notifier-btn

HTML

<availability-notifier-btn
    product-name="Awesome Widget"
    product-image="https://example.com/images/awesome-widget.jpg"
    product-id="12345"
    product-variant-id="67890"
>
    <button slot="subscribe">Notify Me When Available</button>
    <button slot="unsubscribe" hidden>Unsubscribe from Notifications</button>
</availability-notifier-btn>