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



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

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

Renders the sections of a bundle product as accordions, one per section, each with a slider of
the section's products. It tracks which products the customer selected and enforces each section's
minimum (`obligatory_products`) and maximum (`max_obligatory_products`) limits.
Used inside salla-multiple-bundle-product; a theme rarely places it directly.
Selecting a product dispatches the `on-bundle-product-selected` Salla event, and it opens
the options modal through the `multiple-bundle-product-modal::open` Salla event.

## Use it [#use-it]

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

```tsx
import { SallaMultipleBundleProductDetails } from '@salla.sa/twilight-components-react/multiple-bundle-product-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 { useEffect } from 'react';
import { SallaMultipleBundleProductDetails } from '@salla.sa/twilight-components-react/multiple-bundle-product-details';

export function Example() {
  useEffect(() => {
    document.getElementById('details').sections = [
      { id: 1, name: 'Choose a drink', sort: 1, obligatory_products: 1, max_obligatory_products: 2, products: [] }
    ];
  }, []);

  return (
    <SallaMultipleBundleProductDetails id="details" />
  );
}
```

```html
<salla-multiple-bundle-product-details id="details"></salla-multiple-bundle-product-details>
<script>
  document.getElementById('details').sections = [
    { id: 1, name: 'Choose a drink', sort: 1, obligatory_products: 1, max_obligatory_products: 2, products: [] }
  ];
</script>
```

## Properties [#properties]

| Property   | Attribute  | Description                                                                                                                                                                                                                                       | Type              | Default |
| ---------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | ------- |
| `sections` | `sections` | The list of sections belonging to a bundle product. Each section is `{ id, name, sort, obligatory_products?, max_obligatory_products?, products? }`. An empty `max_obligatory_products` means the limit is the number of products in the section. | `BundleSection[]` | `[]`    |

## Methods [#methods]

Call these on the element or a React ref.

### `canSelectBundleProduct(sectionId: string | number, productId: string | number) => Promise<boolean>` [#canselectbundleproductsectionid-string--number-productid-string--number--promiseboolean]

Checks whether a product can be selected in a section without going over the section's maximum.

| Parameter   | Type               | Description              |
| ----------- | ------------------ | ------------------------ |
| `sectionId` | `string \| number` | The `id` of the section. |
| `productId` | `string \| number` | The `id` of the product. |

Returns `Promise<boolean>`: Resolves to `true` if the product is already selected, the section allows only one product (selecting replaces the current one), or the section has room, and `false` if the section is full or not found.

## Related [#related]

Renders: [`<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), [`<salla-accordion-body>`](https://docs.salla.dev/twilight/react/web-components/salla-accordion-body), [`<salla-multiple-bundle-product-slider>`](https://docs.salla.dev/twilight/react/web-components/salla-multiple-bundle-product-slider), [`<salla-multiple-bundle-product-options-modal>`](https://docs.salla.dev/twilight/react/web-components/salla-multiple-bundle-product-options-modal).

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