salla-product-availability
A "Notify me when available" button for a product that is out of stock.
A "Notify me when available" button for a product that is out of stock. Use it on the product page
where the add to cart button is not available. A logged-in customer is subscribed with one click.
A guest gets a modal that asks for an email, a mobile number or both, depending on channels. After
subscribing, the button is replaced by a confirmation message. The modal title is taken from the
element's title attribute when set.
With notify-options-availability, the subscription is for the options currently selected in the
salla-product-options element of the same product, and the customer must select them first.
Use it
In HTML or JSX, use the tag <salla-product-availability> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaProductAvailability } from '@salla.sa/twilight-components-react/product-availability';Client-only. On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.
Example
import { SallaProductAvailability } from '@salla.sa/twilight-components-react/product-availability';
export function Example() {
return (
<SallaProductAvailability productId={123456} channels="sms,email" />
);
}Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
channels | channels | Notification channels, one of sms, email, sms,email, whatsapp or sms,whatsapp. They decide which fields the guest modal shows (email, or a mobile number for sms and whatsapp). When not set, the store's configured channels are used. | "email" | "sms" | "sms,email" | "sms,whatsapp" | "whatsapp" | |
isSubscribed | is-subscribed | When true, shows the "you will be notified" message instead of the subscribe button. It is set to true by the component after a successful subscription, and it can be set to true up front when the customer is already subscribed. | boolean | false |
notifyOptionsAvailability | notify-options-availability | When true, the subscription is for the combination of options currently selected in the salla-product-options element with the same product-id, instead of the whole product. The customer must select the options before subscribing. | boolean | false |
productId | product-id | Id of the product the visitor subscribes to. Falls back to the page.id store config value when not set. | number |
Related
Renders: <salla-button>, <salla-modal>, <salla-tel-input>.
Used inside: <salla-add-product-button>.