salla-multiple-bundle-product-details
Renders the sections of a bundle product as accordions, one per section, each with a slider of the section's products.
Used inside salla-multiple-bundle-product
<salla-multiple-bundle-product> renders this component for you. You rarely use it directly.
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
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).
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
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" />
);
}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
Call these on the element or a React ref.
canSelectBundleProduct(sectionId: string | number, productId: string | number) => Promise<boolean>
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
Renders: <salla-accordion>, <salla-accordion-head>, <salla-accordion-body>, <salla-multiple-bundle-product-slider>, <salla-multiple-bundle-product-options-modal>.
Used inside: <salla-multiple-bundle-product>.