salla-order-details-multiple-bundle-product
The salla-order-details-multiple-bundle-product component renders one sub product of an order bundle as a bordered accordion.
Used inside salla-order-details
<salla-order-details> renders this component for you. You rarely use it directly.
The salla-order-details-multiple-bundle-product component renders one sub product of an order bundle as a bordered accordion.
The header shows the product image, a link with the name and the quantity; the body, when the product has options, shows them through salla-order-details-options.
It is used by salla-order-details for each item in sub_products.
Use it
In HTML or JSX, use the tag <salla-order-details-multiple-bundle-product> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaOrderDetailsMultipleBundleProduct } from '@salla.sa/twilight-components-react/order-details-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
import { SallaOrderDetailsMultipleBundleProduct } from '@salla.sa/twilight-components-react/order-details-multiple-bundle-product';
export function Example() {
return (
<>
<SallaOrderDetailsMultipleBundleProduct id="bundle-item" />
{/* productDetails is an object, so set it from JavaScript: el.productDetails = { id: 1, name: 'Shirt', url: '/p1', quantity: 2, options: [] } */}
</>
);
}Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
collapsible | collapsible | Whether the accordion can be collapsed. When not set, it is collapsible only if the product has options. | boolean | |
placeholderImage | placeholder-image | Image URL used when the product has no image. Defaults to the store CDN empty-image placeholder. | string | salla.url.cdn('images/s-empty.png') |
productDetails | product-details | The sub product to display: { id, name, url, quantity?, image?: string | { url, alt? }, options? }. It is an object, so set it as a property from JavaScript. The HTML attribute is product-details. | OrderProduct |
Related
Renders: <salla-accordion-body>, <salla-order-details-options>, <salla-accordion>, <salla-accordion-head>.
Used inside: <salla-order-details>.