Twilight
EngineWeb components

salla-multiple-bundle-product-cart

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.

Used inside salla-multiple-bundle-product

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

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

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

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

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

Properties

PropertyAttributeDescriptionTypeDefault
sectionssectionsThe 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[][]

Renders: <salla-button>, <salla-accordion>, <salla-accordion-head>, <salla-accordion-body>, <salla-product-options>.

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

On this page

Use itExamplePropertiesRelated