salla-multiple-bundle-product
Shows a bundle product made of several sections, where the customer picks products from each section.
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
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).
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
```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
| 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
Renders: <salla-multiple-bundle-product-cart>, <salla-multiple-bundle-product-details>.