salla-orders
The logged-in customer's orders page: a table of orders (number, status, total, date) that loads more rows with a "load more" button.
The logged-in customer's orders page: a table of orders (number, status, total, date) that loads more rows with a "load more" button. Use it on the customer orders page of a theme.
It also shows filter buttons (all, awaiting review, and archived orders when the store has the show-external-orders
feature), a banner when some orders are waiting for a review, and a "leave review" button per eligible order that opens
a salla-rating-modal. The active filter is kept in the page URL as ?tab=waiting or ?tab=archived.
Each row links to the order page, and the order number has a copy-to-clipboard button.
Use it
In HTML or JSX, use the tag <salla-orders> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaOrders } from '@salla.sa/twilight-components-react/orders';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 { SallaOrders } from '@salla.sa/twilight-components-react/orders';
export function Example() {
return (
<SallaOrders />
);
}Filter by status ids
```html
<salla-orders params='{"status":[1,2]}' load-more-text="Show more"></salla-orders>
## Properties
| Property | Attribute | Description | Type | Default |
| --- | --- | --- | --- | --- |
| `loadMoreText` | `load-more-text` | Label of the "load more" button. Defaults to the translated `common.elements.load_more` text. | `string` | |
| `params` | `params` | Extra query parameters sent with the orders request, as an object (or a JSON string in HTML) with the shape of `OrderQueryParameters`, for example `{ "status": [1, 2], "from_date": "2024-01-01", "per_page": 10 }`. Supported keys include `status` (array of status ids), `from_date`, `to_date`, `keyword`, `reference_id`, `payment_method`, `page` and `per_page`. The component always sets `format` to `light` and overrides `types`, `feedback_status` and (on the archived tab) `external_orders` itself. | `OrderQueryParameters` | |
## Related
Renders: [`<salla-button>`](/web-components/salla-button), [`<salla-skeleton>`](/web-components/salla-skeleton), [`<salla-rating-modal>`](/web-components/salla-rating-modal).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
salla-comment-form
A form for a customer to post a comment on a page, blog post or product.