# salla-product-availability (https://docs.salla.dev/twilight/react/web-components/salla-product-availability)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

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 [#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).

```tsx
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 [#example]

```tsx
import { SallaProductAvailability } from '@salla.sa/twilight-components-react/product-availability';

export function Example() {
  return (
    <SallaProductAvailability productId={123456} channels="sms,email" />
  );
}
```

```html
<salla-product-availability product-id="123456" channels="sms,email"></salla-product-availability>
```

## Properties [#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 [#related]

Renders: [`<salla-button>`](https://docs.salla.dev/twilight/react/web-components/salla-button), [`<salla-modal>`](https://docs.salla.dev/twilight/react/web-components/salla-modal), [`<salla-tel-input>`](https://docs.salla.dev/twilight/react/web-components/salla-tel-input).

Used inside: [`<salla-add-product-button>`](https://docs.salla.dev/twilight/react/web-components/salla-add-product-button).