Twilight
EngineWeb components

salla-multiple-bundle-product-slider

A carousel of the products in one section of a multiple bundle product.

Used inside salla-multiple-bundle-product

<salla-multiple-bundle-product> renders this component for you. You rarely use it directly.

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

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).

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

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" />
  );
}

Properties

PropertyAttributeDescriptionTypeDefault
isSelectionLockedis-selection-lockedWhen true, the selected product cannot be deselected (single-product section with min = 1).booleanfalse
sectionsectionThe data for the current bundle section being rendered in this slider.BundleSection
sectionIndexsection-indexThe zero-based index of this section within the overall bundle.number
selectedProductsselected-productsA 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>; }{}
selectionLimitselection-limitMaximum 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.number0

Events

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

EventDescriptionDetail
productOptionsSelectedEmitted 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; }
productSelectedEmitted 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; }

Renders: <salla-slider>.

Used inside: <salla-multiple-bundle-product-details>.

On this page

Use itExamplePropertiesEventsRelated