salla-order-details-options
The salla-order-details-options component renders the selected options of an order product as a name and value list.
Used inside salla-order-details
<salla-order-details> renders this component for you. You rarely use it directly.
The salla-order-details-options component renders the selected options of an order product as a name and value list.
Each value is shown according to its type: an image (linked), a color swatch, a file link, a color picker value with a copy button, a map with a "show location" button, or plain text.
It is used by salla-order-details and can be used on its own. It renders nothing when the list is empty.
Use it
In HTML or JSX, use the tag <salla-order-details-options> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaOrderDetailsOptions } from '@salla.sa/twilight-components-react/order-details-options';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 { SallaOrderDetailsOptions } from '@salla.sa/twilight-components-react/order-details-options';
export function Example() {
return (
<SallaOrderDetailsOptions options='[{"id":1,"name":"Size","value":"L"},{"id":2,"name":"Color","value":"Red","color":"#ff0000"}]' />
);
}Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
bordered | bordered | When true (the default), the list is shown inside a bordered container. | boolean | true |
options | options | The options to display, as an array or a JSON string of an array. Each item is { id, name, value, display_value?, color?, is_image?, is_file?, is_color_picker?, is_map?, latitude?, longitude? }. Invalid JSON is treated as an empty list. | ProductOption[] | string | |
placeholderImage | placeholder-image | Image URL used when an image option has an empty value. | string | 'images/placeholder.png' |
Related
Renders: <salla-button>, <salla-map>.
Used inside: <salla-order-details>, <salla-order-details-multiple-bundle-product>.