salla-order-summary
Lists the digital items of an order on a thank-you page: gift card codes with a copy button, and downloadable files with a download link.
Lists the digital items of an order on a thank-you page: gift card codes with a copy button, and downloadable files with a download link. It loads the order from the API and shows a placeholder when the order has no code or digital file items. Use it on the order confirmation or order details page.
Use it
In HTML or JSX, use the tag <salla-order-summary> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaOrderSummary } from '@salla.sa/twilight-components-react/order-summary';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 { SallaOrderSummary } from '@salla.sa/twilight-components-react/order-summary';
export function Example() {
return (
<SallaOrderSummary orderId={1234567} />
);
}Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
orderId | order-id | The ID of the order to load. When it is not set, the current page id (salla.config.get('page.id')) is used. | number |
Related
Renders: <salla-placeholder>, <salla-button>.
salla-order-shipments
The salla-order-shipments component renders a per-shipment tracking breakdown on the thank-you page for orders fulfilled as split shipments (2+ shipments).
salla-order-totals-card
A summary card with the order's price breakdown: items total, options total, discounts, cash on delivery cost, shipping, tax, paid and remaining amounts, the final total and a refunded amount when the