salla-order-edit
The order editing screen of the customer account.
The order editing screen of the customer account. It lists the order items with quantity controls and editable product options, lets the customer remove items or add products from the store (a side panel on desktop, a modal on mobile), and shows a countdown while the edit session is open. Use it once on the order edit page, passing the order data you already loaded.
Changes are kept locally until the customer presses Save. Saving sends them to the order edit API, then shows a summary modal with the new totals, where the customer either confirms (and is sent to the payment page when a payment is required) or goes back to the order. The last item cannot be removed. When the edit session time ends, the edit form is replaced by an "edit session expired" message. The product search and the Add product list use salla-products-list.
Use it
In HTML or JSX, use the tag <salla-order-edit> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaOrderEdit } from '@salla.sa/twilight-components-react/order-edit';Example
import { SallaOrderEdit } from '@salla.sa/twilight-components-react/order-edit';
export function Example() {
return (
<SallaOrderEdit
orderId="123456"
orderData='{"id":123456,"customer_editing_session":{"ends_at":"2025-01-01 12:30:00"},"items":[{"id":1,"quantity":2,"product":{"id":10,"name":"T-shirt","price":120,"image":{"url":"/t.jpg"}}}]}'
excludedCategories="[12,15]" />
);
}Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
excludedCategories | excluded-categories | JSON-encoded array of category IDs to exclude from the products list (e.g. "[1,2,3]"). Only positive integers are used. | string | |
orderData | order-data | The order to edit, as a JSON string (or a parsed object when set from JavaScript). It must have an items array, where each item has id, quantity and a product (id, name, price, image, options, url, max_quantity_per_order). An optional customer_editing_session.ends_at (YYYY-MM-DD HH:mm:ss, read as UTC+3) sets the edit countdown and the expiry. The order is not fetched by order-id, so this is required; without it, or with invalid JSON, an "order not found" message is shown. | string | |
orderId | order-id | The order ID to edit. Sent to the order edit API when saving or cancelling the edit session. | number | string |
Related
Renders: <salla-products-list>, <salla-modal>, <salla-loading>, <salla-quantity-input>, <salla-product-options>, <salla-button>, <salla-count-down>, <salla-order-edit-item>.
salla-order-details
The salla-order-details component renders the extra details of one order line item: its selected product options and, for bundle products, its sub products.
salla-order-options-modal
Imperative modal that collects a product's order options (the store-level options a shopper must pick before checkout) and, when an offer grants free products, the options of each free product.