Twilight
GuideEngineRoutesAPIsLocal developmentRecipes

salla-gifting

"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 need

"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

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

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

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

export function Example() {
  return (
    <SallaGifting productId={123456} widgetTitle="Send it as a gift" physicalProducts />
  );
}
import { SallaGifting } from '@salla.sa/twilight-components-react/gifting';

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

Properties

PropertyAttributeDescriptionTypeDefault
formSelectorform-selectorCSS 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'
physicalphysicalAlias of physicalProducts, for themes that pass physical.boolean
physicalProductsphysical-productsSet to true when the gifted product is physical. The form then also asks for the receiver country, region (for Saudi Arabia) and city.boolean
productIdproduct-idId 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
verticalverticalShows the widget in its vertical layout, with the gift icon next to the title. The default is the horizontal layout.boolean
widgetSubtitlewidget-subtitleSubtitle of the gifting widget. Defaults to the store translation of the gift message.string
widgetTitlewidget-titleTitle of the gifting widget. Defaults to the store translation of "gift the one you love".string

Methods

Call these on the element or a React ref.

close() => Promise<HTMLElement>

Closes the gifting modal.

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

goToStep2(withValidation?: boolean) => Promise<void>

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

ParameterTypeDescription
withValidationbooleanSet to false to skip checking that a gift message was chosen. Defaults to true.

open() => Promise<any>

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

SlotDescription
footerContent shown at the bottom of the gifting modal.
headerContent shown at the top of the gifting modal.
widget-btn-contentUsed to customize widget button content.

Renders: <salla-order-options-modal>, <salla-list-tile>, <salla-button>, <salla-modal>, <salla-skeleton>, <salla-placeholder>, <salla-file-upload>, <salla-slider>, <salla-tel-input>, <salla-searchable-dropdown>, <salla-datetime-picker>.

salla-gift-card-redeem

Gift card redemption box for the customer wallet page: a card with an "add gift card" button that lets a signed-in customer type a gift card code and add its value to their wallet balance.

salla-installment

Shows the "pay in installments" promo widgets of the installment providers the store has enabled (Tamara, Tabby, Spotii, Mispay, Emkan, Madfu, Mokafaa Alrajhi points and Klarna) for a given price.

On this page

Use itExamplePropertiesMethodsclose() => Promise<HTMLElement>goToStep2(withValidation?: boolean) => Promise<void>open() => Promise<any>SlotsRelated