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.
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.
A theme would use it inside an order page product row, passing that product's data. It does not render the product name, image or price itself.
It renders nothing when the product has neither options nor sub products.
Use it
In HTML or JSX, use the tag <salla-order-details> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaOrderDetails } from '@salla.sa/twilight-components-react/order-details';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 { SallaOrderDetails } from '@salla.sa/twilight-components-react/order-details';
export function Example() {
return (
<SallaOrderDetails orderDetails='{"id":1,"name":"Shirt","url":"/p1","options":[{"id":10,"name":"Size","value":"L"}],"sub_products":[]}' />
);
}Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
orderDetails | order-details | The order product to describe, as a JSON string (when set as an HTML attribute) or an object (when set from JavaScript). Shape: { id, name, url, quantity?, options?: [{ id, name, value, display_value?, color?, is_image?, is_file?, is_color_picker?, is_map?, latitude?, longitude? }], sub_products?: [same product shape] }. Only options and sub_products are rendered. An invalid JSON string throws an error. | OrderProduct | string |
Related
Renders: <salla-order-details-options>, <salla-order-details-multiple-bundle-product>.