salla-booking-field
Form field for a booking (appointment) product option.
Form field for a booking (appointment) product option. It shows the booking price, a button that opens the booking
calendar in a modal, and the reservations already chosen. Used inside salla-product-options, which renders it
for booking options on the cart page; a theme rarely places it directly.
The button asks the API for a booking page with salla.booking.add(productId, false), and guests are sent to the
login popup first. The chosen reservations are stored as a JSON string in a hidden input named after option.name,
which is marked required when option.required is true. After a booking is saved in the modal, the page reloads.
Use it
In HTML or JSX, use the tag <salla-booking-field> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaBookingField } from '@salla.sa/twilight-components-react/booking-field';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 { SallaBookingField } from '@salla.sa/twilight-components-react/booking-field';
export function Example() {
return (
<SallaBookingField
productId={123}
option={{ id: 1, name: 'option[1]', required: true, price: 50, details: [] }}
/>
);
}Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
option | option | The booking option configuration. Uses name (name of the hidden input), required, price (shown with the store currency) and details (the existing reservations, each { date, day, from_timestamp?, to_timestamp? }). It is only read when the component loads, so set it before the element is connected. | Option | |
productId | product-id | The ID of the product for which the booking is being made. Used to request the booking page and to ignore booking events that belong to other products. | number |
Events
Listen with addEventListener, or the on prop of the React wrapper (for example onModalBack).
| Event | Description | Detail |
|---|---|---|
invalidInput | Event emitted when the hidden input fails validation, for example when the option is required and no appointment is booked yet. event.detail is the native invalid event of that input. | any |
Related
Renders: <salla-modal>, <salla-button>.
Used inside: <salla-product-options>.
salla-attachments
Renders a horizontal strip of image/video attachment thumbnails with an optional "+N" overflow indicator on the last visible item.
salla-color-picker
A color field: a swatch that opens a popup picker (powered by vanilla-picker) and stores the chosen color in a hidden input, so it submits with the surrounding form.