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



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

"Buy as a gift" widget: a card with a button that opens a modal where the customer picks a gift image and message, then enters the sender and receiver details (and a delivery date or address when needed) and adds the gift to the cart. Use it on the product page (with `product-id`) or the cart page (without it).
The customer must be logged in; guests are asked to log in first. It can also be opened from anywhere by dispatching the `gifting:open` event.

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-gifting>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

```tsx
import { SallaGifting } from '@salla.sa/twilight-components-react/gifting';
```

**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 { SallaGifting } from '@salla.sa/twilight-components-react/gifting';

export function Example() {
  return (
    <SallaGifting productId={123456} widgetTitle="Send it as a gift" physicalProducts />
  );
}
```

```html
<salla-gifting product-id="123456" widget-title="Send it as a gift" physical-products></salla-gifting>
```

```tsx
import { SallaGifting } from '@salla.sa/twilight-components-react/gifting';

export function Example() {
  return (
    <SallaGifting vertical />
  );
}
```

```html
<salla-gifting vertical></salla-gifting>
```

## Properties [#properties]

| Property           | Attribute           | Description                                                                                                                                                                                                                                                                     | Type      | Default                                           |
| ------------------ | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------------------------------------------------- |
| `formSelector`     | `form-selector`     | CSS selector of the product form on the page. On a product page (with `product-id`), the form is validated before the gift modal opens and its fields (quantity, options) are sent together with the gift details. Defaults to `form.product-form, form.form--product-options`. | `string`  | `'form.product-form, form.form--product-options'` |
| `physical`         | `physical`          | Alias of `physicalProducts`, for themes that pass `physical`.                                                                                                                                                                                                                   | `boolean` |                                                   |
| `physicalProducts` | `physical-products` | Set to true when the gifted product is physical. The form then also asks for the receiver country, region (for Saudi Arabia) and city.                                                                                                                                          | `boolean` |                                                   |
| `productId`        | `product-id`        | Id of the product to gift. When set (product page), the gift is added to the cart for this product. When omitted (cart page), the gift details apply to the whole cart.                                                                                                         | `number`  |                                                   |
| `vertical`         | `vertical`          | Shows the widget in its vertical layout, with the gift icon next to the title. The default is the horizontal layout.                                                                                                                                                            | `boolean` |                                                   |
| `widgetSubtitle`   | `widget-subtitle`   | Subtitle of the gifting widget. Defaults to the store translation of the gift message.                                                                                                                                                                                          | `string`  |                                                   |
| `widgetTitle`      | `widget-title`      | Title of the gifting widget. Defaults to the store translation of "gift the one you love".                                                                                                                                                                                      | `string`  |                                                   |

## Methods [#methods]

Call these on the element or a React ref.

### `close() => Promise<HTMLElement>` [#close--promisehtmlelement]

Closes the gifting modal.

Returns `Promise<HTMLElement>`: A Promise that resolves when the modal has closed.

### `goToStep2(withValidation?: boolean) => Promise<void>` [#gotostep2withvalidation-boolean--promisevoid]

Moves from the first step (choose image and message) to the second step (sender and receiver details).

| Parameter        | Type      | Description                                                                         |
| ---------------- | --------- | ----------------------------------------------------------------------------------- |
| `withValidation` | `boolean` | Set to `false` to skip checking that a gift message was chosen. Defaults to `true`. |

### `open() => Promise<any>` [#open--promiseany]

Opens the gifting modal. A guest customer is sent to the login modal first and the modal opens again after login. Order options required by the product are collected before the modal opens. The modal loads the gift options (images, messages, delivery settings) for the product or the cart.

Returns `Promise<any>`: A Promise that resolves when the gift options have loaded; if the customer must log in or an order option form was dismissed, it resolves without opening the modal.

## Slots [#slots]

| Slot                 | Description                                       |
| -------------------- | ------------------------------------------------- |
| `footer`             | Content shown at the bottom of the gifting modal. |
| `header`             | Content shown at the top of the gifting modal.    |
| `widget-btn-content` | Used to customize widget button content.          |

## Related [#related]

Renders: [`<salla-order-options-modal>`](https://docs.salla.dev/twilight/react/web-components/salla-order-options-modal), [`<salla-list-tile>`](https://docs.salla.dev/twilight/react/web-components/salla-list-tile), [`<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-skeleton>`](https://docs.salla.dev/twilight/react/web-components/salla-skeleton), [`<salla-placeholder>`](https://docs.salla.dev/twilight/react/web-components/salla-placeholder), [`<salla-file-upload>`](https://docs.salla.dev/twilight/react/web-components/salla-file-upload), [`<salla-slider>`](https://docs.salla.dev/twilight/react/web-components/salla-slider), [`<salla-tel-input>`](https://docs.salla.dev/twilight/react/web-components/salla-tel-input), [`<salla-searchable-dropdown>`](https://docs.salla.dev/twilight/react/web-components/salla-searchable-dropdown), [`<salla-datetime-picker>`](https://docs.salla.dev/twilight/react/web-components/salla-datetime-picker).