salla-quick-order
A "quick order" box for a product page that lets a visitor order a product without going through the cart.
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
In HTML or JSX, use the tag <salla-quick-order> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
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
import { SallaQuickOrder } from '@salla.sa/twilight-components-react/quick-order';
export function Example() {
return (
<SallaQuickOrder productId="123456" />
);
}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
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
Renders: <salla-button>, <salla-tel-input>, <salla-modal>.