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



{/* 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>

A carousel of the products in one section of a multiple bundle product. Each card has a checkbox
(named `bundle[<sectionId>][<index>][id]` so the product form submits it), the image, name, price,
and an options button for products that have options. Used inside salla-multiple-bundle-product
(through its details view); a theme rarely places it directly.

The component does not keep the selection itself: it shows what `selectedProducts` says and reports
clicks through `productSelected` and `productOptionsSelected`. Out-of-stock products (`quantity` of 0) are disabled.

## Use it [#use-it]

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

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

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

export function Example() {
  useEffect(() => {
    const slider = document.getElementById('slider');
    slider.section = { id: 's1', name: 'Office Equipment', sort: 1, products: [] };
    slider.sectionIndex = 0;
    slider.selectionLimit = 2;
    slider.addEventListener('productSelected', e => console.log(e.detail.product.id));
  }, []);

  return (
    <SallaMultipleBundleProductSlider id="slider" />
  );
}
```

```html
<salla-multiple-bundle-product-slider id="slider"></salla-multiple-bundle-product-slider>
<script>
  const slider = document.getElementById('slider');
  slider.section = { id: 's1', name: 'Office Equipment', sort: 1, products: [] };
  slider.sectionIndex = 0;
  slider.selectionLimit = 2;
  slider.addEventListener('productSelected', e => console.log(e.detail.product.id));
</script>
```

## Properties [#properties]

| Property            | Attribute             | Description                                                                                                                                                                                                      | Type                                              | Default |
| ------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- | ------- |
| `isSelectionLocked` | `is-selection-locked` | When true, the selected product cannot be deselected (single-product section with min = 1).                                                                                                                      | `boolean`                                         | `false` |
| `section`           | `section`             | The data for the current bundle section being rendered in this slider.                                                                                                                                           | `BundleSection`                                   |         |
| `sectionIndex`      | `section-index`       | The zero-based index of this section within the overall bundle.                                                                                                                                                  | `number`                                          |         |
| `selectedProducts`  | `selected-products`   | A dictionary tracking which product IDs are currently selected per section, as `{ [sectionId]: Set<productId> }`. Set it as a JavaScript property.                                                               | `{ [sectionId: string]: Set<string \| number>; }` | `{}`    |
| `selectionLimit`    | `selection-limit`     | Maximum number of products the customer can select in this section. Once it is reached, the unselected products are disabled. `1` makes a click replace the current selection, and `0` (default) means no limit. | `number`                                          | `0`     |

## Events [#events]

Listen with `addEventListener`, or the `on` prop of the React wrapper (for example `onModalBack`).

| Event                    | Description                                                                                                                                                         | Detail                                                     |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- |
| `productOptionsSelected` | Emitted when the user clicks the options button on a product card. `event.detail` is `{ product, sectionId }` with the `BundleProduct` and the id of this section.  | `{ product: BundleProduct; sectionId: string \| number; }` |
| `productSelected`        | Emitted when a product is clicked to select or deselect it. `event.detail` is `{ product, sectionId }` with the clicked `BundleProduct` and the id of this section. | `{ product: BundleProduct; sectionId: string \| number; }` |

## Related [#related]

Renders: [`<salla-slider>`](https://docs.salla.dev/twilight/react/web-components/salla-slider).

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