# salla-order-details (https://docs.salla.dev/twilight/react/web-components/salla-order-details)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

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 [#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).

```tsx
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 [#example]

```tsx
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":[]}' />
  );
}
```

```html
<salla-order-details order-details='{"id":1,"name":"Shirt","url":"/p1","options":[{"id":10,"name":"Size","value":"L"}],"sub_products":[]}'></salla-order-details>
```

## Properties [#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 [#related]

Renders: [`<salla-order-details-options>`](https://docs.salla.dev/twilight/react/web-components/salla-order-details-options), [`<salla-order-details-multiple-bundle-product>`](https://docs.salla.dev/twilight/react/web-components/salla-order-details-multiple-bundle-product).