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



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

Shows a bundle product made of several sections, where the customer picks products from each section.
Use it on a product page for a bundle product; there it renders the per-section product pickers (with checkboxes
named `bundle[<sectionId>][<index>][...]` for the surrounding product form). On the cart page it instead
renders the chosen bundle products for that cart item, with remove buttons.
Pass the sections through `bundle-sections` as a JSON string or, from JavaScript, as an object.
Accepted shapes: a bundle object with `bundle.sections`, an object with a root `sections` array, or an array of sections.

## Use it [#use-it]

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

```tsx
import { SallaMultipleBundleProduct } from '@salla.sa/twilight-components-react/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]

````ts
```html
<salla-multiple-bundle-product bundle-sections='{
  "id": "encoded_product_id",
  "name": "Complete Office Setup Bundle",
  "bundle": {
    "discount_percentage": 15,
    "sections": [
      {
        "id": "encoded_section_1",
        "name": "Office Equipment",
        "obligatory_products": 1,
        "products": [
          {
            "id": "encoded_sub_product_1",
            "name": "Office Desk",
            "image": { "url": "https://cdn.salla.sa/products/desk.jpg", "alt": "Office Desk" },
            "price": { "amount": 500, "currency": "SAR" },
            "sale_price": 450,
            "quantity": 50
          }
        ]
      }
    ]
  }
}'></salla-multiple-bundle-product>
````

## Properties [#properties]

| Property         | Attribute         | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Type     | Default |
| ---------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- |
| `bundleSections` | `bundle-sections` | The bundle's sections, as a JSON string (attribute `bundle-sections`) or a parsed object (property). Accepts `{ bundle: { sections: [...] } }`, `{ sections: [...] }`, or an array of sections. Each section has `id`, `name`, `products`, and optionally `obligatory_products` (minimum picks) and `max_obligatory_products` (maximum picks; empty means no cap beyond the number of products). Invalid JSON is logged and renders no sections. Re-parsed whenever the prop changes. | `string` |         |

## Related [#related]

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