salla-add-product-button
The add-to-cart button for a product.
The add-to-cart button for a product. Use it on product pages and product cards. It adds the product to the cart on click and emits success or failed.
Depending on the props it also shows a pre-order or booking label, a "notify me" availability control when the product is out of stock, a quick buy button and an Apple Pay button.
Any text placed inside the element replaces the default label (except on narrow screens when support-sticky-bar is set).
Extra attributes on the element, such as width="wide", are copied to the inner salla-button.
When a salla-product-options element with the same product-id is on the page, its options are validated before the product is added, and the add is skipped if validation fails.
Booking products call the booking API instead of the cart, and guests are sent to the login flow first.
Use it
In HTML or JSX, use the tag <salla-add-product-button> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaAddProductButton } from '@salla.sa/twilight-components-react/add-product-button';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 { SallaAddProductButton } from '@salla.sa/twilight-components-react/add-product-button';
export function Example() {
return (
<SallaAddProductButton productId="123456" productStatus="sale" productType="product" quantity={1} quickBuy />
);
}import { SallaAddProductButton } from '@salla.sa/twilight-components-react/add-product-button';
export function Example() {
return (
<SallaAddProductButton productId="123456" width="wide">Add to bag</SallaAddProductButton>
);
}Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
channels | channels | Notification channels offered for the out-of-stock "notify me" control, used when product-status is out-and-notify. When empty, the store's configured availability channels are used. | string | |
donatingAmount | donating-amount | Amount to donate, sent as the donation amount. Used for donating products. | number | |
hasPreOrder | has-pre-order | When true, the button label is the pre-order label instead of the add-to-cart label. | boolean | false |
notifyOptionsAvailability | notify-options-availability | When true, listens to product-options::change events and switches to the availability ("notify me") control when a selected option is out of stock. Requires a salla-product-options element with the same product-id. | boolean | |
productId | product-id | The id of the product to add. It is also used to find the matching salla-product-options element. | any | |
productStatus | product-status | Availability of the product. sale makes the button active, out shows a disabled out-of-stock button and out-and-notify shows the availability ("notify me") control when notification channels exist. Defaults to sale. | "out" | "out-and-notify" | "sale" | 'sale' |
productType | product-type | The kind of product. Affects the label and the flow: booking uses the booking flow, donating and financial_support never show the fast checkout widget. Defaults to product. | "booking" | "codes" | "digital" | "donating" | "financial_support" | "food" | "group_products" | "product" | "service" | 'product' |
quantity | quantity | Quantity to add to the cart. A falsy value is left out of the request. | number | |
quickBuy | quick-buy | When true, shows the quick buy (buy now) button next to the add-to-cart button. It also requires the store's buy-now setting to be on, product-status to be sale, and product-type not to be booking. | boolean | |
subscribedOptions | subscribed-options | JSON string of option-id groups the current user is already subscribed to for back-in-stock notification, for example "[[139487,2394739],[1212,1544]]". Only used together with notify-options-availability. | string | |
supportStickyBar | support-sticky-bar | Set to true when the button is used in a mobile sticky bar. On narrow screens (under 768px) the button may collapse to a cart icon with a hidden accessible label when quick buy and Apple Pay are both shown. | boolean |
Events
Listen with addEventListener, or the on prop of the React wrapper (for example onModalBack).
| Event | Description | Detail |
|---|---|---|
failed | Fires when adding the product to the cart (or booking it) fails. event.detail is the error. | any |
success | Fires after the product is added to the cart (or booked). event.detail is the API response. | any |
Slots
| Slot | Description |
|---|---|
| (default) | Optional custom label for the button. |
Related
Renders: <salla-product-availability>, <salla-button>, <salla-quick-buy>.
Used inside: <salla-basket-gap>, <salla-product-card>, <salla-search-product-card>.