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



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

A "quick order" box for a product page that lets a visitor order a product without going through the cart.
It renders only when the store has the quick order setting enabled, and the store's settings (texts, style, email and agreement requirements) override the matching props on load, so most props are only fallbacks.
Guests see a form with name, phone and email fields (and an agreement checkbox if the store requires it). Logged-in users with an email and no required agreement order with a single confirm click.
After a successful order it shows the thank-you message and fires `quickOrderSubmited`.
Inputs use native validation and the form fields are labelled by placeholders.

## Use it [#use-it]

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

```tsx
import { SallaQuickOrder } from '@salla.sa/twilight-components-react/quick-order';
```

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

export function Example() {
  return (
    <SallaQuickOrder productId="123456" />
  );
}
```

```html
<salla-quick-order product-id="123456"></salla-quick-order>
```

## Properties [#properties]

| Property                | Attribute                  | Description                                                                                                                                                                                                              | Type                             | Default                                                  |
| ----------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------------------------------------------- |
| `agreementText`         | `agreement-text`           | Agreement text (HTML) shown next to the terms checkbox, truncated to 150 characters with a link to the full text. Only shown when the store requires agreement. Overwritten by the store's quick order settings on load. | `string`                         | `salla.lang.get( 'pages.checkout.show_full_agreement' )` |
| `confirmPayButtonTitle` | `confirm-pay-button-title` | Label of the main button that opens the form, or confirms the order for one-click users. Overwritten by the store's quick order settings on load.                                                                        | `string`                         | `'اشتر الآن'`                                            |
| `isEmailRequired`       | `is-email-required`        | Whether the email field is required for guests. It is set to false when the logged-in user has an email. Overwritten by the store's quick order settings on load.                                                        | `boolean`                        | `false`                                                  |
| `payButtonTitle`        | `pay-button-title`         | Label of the form submit button. Overwritten by the store's quick order settings on load.                                                                                                                                | `string`                         | `'اطلب المنتج'`                                          |
| `productId`             | `product-id`               | The id of the product to order. When not set, it defaults to the page id from the Salla config (`page.id`).                                                                                                              | `string`                         |                                                          |
| `quickOrderStyle`       | `quick-order-style`        | Visual style of the box: `default` (uses the theme primary color), `gray` or `white`. Overwritten by the store's quick order settings on load.                                                                           | `"default" \| "gray" \| "white"` | `'default'`                                              |
| `quickOrderTitle`       | `quick-order-title`        | Heading of the box. Overwritten by the store's quick order settings on load.                                                                                                                                             | `string`                         | `'ليش تنتظر؟'`                                           |
| `subTitle`              | `sub-title`                | Text under the heading. Overwritten by the store's quick order settings on load.                                                                                                                                         | `string`                         | `'احصل على المنتج مباشرة الآن'`                          |
| `thanksMessage`         | `thanks-message`           | Message shown after the order is submitted successfully. Overwritten by the store's quick order settings on load.                                                                                                        | `string`                         |                                                          |

## Events [#events]

Listen with `addEventListener`, or the `on` prop of the React wrapper (for example `onModalBack`).

| Event                | Description                                                                        | Detail |
| -------------------- | ---------------------------------------------------------------------------------- | ------ |
| `quickOrderSubmited` | Fires after the quick order is created successfully. It carries no `event.detail`. | `any`  |

## Related [#related]

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