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



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

Lists the products chosen inside a multiple-bundle product on the cart page, one collapsible row per product
with its image, name, price, quantity and a remove button. Rows for products that have options expand to show
`salla-product-options` for editing them.
Place it inside the cart item's `<form id="item-<cart item id>">`. Removing a product reads the cart item id from that form id,
and does nothing when the component is not inside such a form.

## Use it [#use-it]

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

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

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

export function Example() {
  useEffect(() => {
    document.querySelector('#bundle-cart').sections = [
      { id: 1, name: 'Choose a drink', sort: 1, products: [{ id: 10, name: 'Cola', price: 5, quantity: 1, quantity_in_group: 2, image: { url: '/cola.jpg', alt: 'Cola' } }] }
    ];
  }, []);

  return (
    <form id="item-123">
      <SallaMultipleBundleProductCart id="bundle-cart" />
    </form>
  );
}
```

```html
<form id="item-123">
  <salla-multiple-bundle-product-cart id="bundle-cart"></salla-multiple-bundle-product-cart>
</form>
<script>
  document.querySelector('#bundle-cart').sections = [
    { id: 1, name: 'Choose a drink', sort: 1, products: [{ id: 10, name: 'Cola', price: 5, quantity: 1, quantity_in_group: 2, image: { url: '/cola.jpg', alt: 'Cola' } }] }
  ];
</script>
```

## Properties [#properties]

| Property   | Attribute  | Description                                                                                                                                                                                                | Type              | Default |
| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | ------- |
| `sections` | `sections` | The sections of the bundle. Each is `{ id, name, sort, products }`, where each product has `id`, `name`, `image`, `price`, optional `sale_price`, `quantity_in_group` and `options`. Set as a JS property. | `BundleSection[]` | `[]`    |

## Related [#related]

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

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