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



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

<Callout title="Used inside salla-order-details">
  [`<salla-order-details>`](https://docs.salla.dev/twilight/react/web-components/salla-order-details) renders this component for you. You rarely use it directly.
</Callout>

The `salla-order-details-multiple-bundle-product` component renders one sub product of an order bundle as a bordered accordion.
The header shows the product image, a link with the name and the quantity; the body, when the product has options, shows them through `salla-order-details-options`.
It is used by `salla-order-details` for each item in `sub_products`.

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-order-details-multiple-bundle-product>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

```tsx
import { SallaOrderDetailsMultipleBundleProduct } from '@salla.sa/twilight-components-react/order-details-multiple-bundle-product';
```

**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 { SallaOrderDetailsMultipleBundleProduct } from '@salla.sa/twilight-components-react/order-details-multiple-bundle-product';

export function Example() {
  return (
    <>
      <SallaOrderDetailsMultipleBundleProduct id="bundle-item" />
      {/* productDetails is an object, so set it from JavaScript: el.productDetails = { id: 1, name: 'Shirt', url: '/p1', quantity: 2, options: [] } */}
    </>
  );
}
```

```html
<salla-order-details-multiple-bundle-product id="bundle-item"></salla-order-details-multiple-bundle-product>
<!-- productDetails is an object, so set it from JavaScript: el.productDetails = { id: 1, name: 'Shirt', url: '/p1', quantity: 2, options: [] } -->
```

## Properties [#properties]

| Property           | Attribute           | Description                                                                                                                                                                                               | Type           | Default                               |
| ------------------ | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ------------------------------------- |
| `collapsible`      | `collapsible`       | Whether the accordion can be collapsed. When not set, it is collapsible only if the product has options.                                                                                                  | `boolean`      |                                       |
| `placeholderImage` | `placeholder-image` | Image URL used when the product has no image. Defaults to the store CDN empty-image placeholder.                                                                                                          | `string`       | `salla.url.cdn('images/s-empty.png')` |
| `productDetails`   | `product-details`   | The sub product to display: `{ id, name, url, quantity?, image?: string \| { url, alt? }, options? }`. It is an object, so set it as a property from JavaScript. The HTML attribute is `product-details`. | `OrderProduct` |                                       |

## Related [#related]

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

Used inside: [`<salla-order-details>`](https://docs.salla.dev/twilight/react/web-components/salla-order-details).