QuoteSummaryList Container

Displays quote items in a summary list format with accordion support.

Version: 1.0.0-beta5

Configuration

The QuoteSummaryList container provides the following configuration options:

Parameter	Type	Req?	Description
hideHeading	boolean	No	Hides the list heading when true.
hideFooter	boolean	No	Hides item footers when true.
routeProduct	function	No	Generates product detail URLs. Receives item data as a parameter and returns a URL string. Use to create links to product pages, add query parameters, or integrate with your application’s product routing system.
showMaxItems	boolean	No	Shows maximum item count indicator when true.
attributesToHide	SwitchableAttributes[]	No	Specifies an array of product attributes to hide from display. Use to customize which product attributes are visible in the quote summary, reducing visual clutter or focusing on specific attribute types.
accordion	boolean	No	Enables accordion-style collapsible items when true.
variant	'primary' | 'secondary'	No	Visual variant (primary or secondary).
showDiscount	boolean	No	Shows discount information when true.
showSavings	boolean	No	Shows savings amount when true.

Slots

This container exposes the following slots for customization:

Slot	Type	Required	Description
Heading	SlotProps	No	Customize list heading.
Footer	SlotProps	No	Customize item footer.
Thumbnail	SlotProps	No	Customize product thumbnail.
ProductAttributes	SlotProps	No	Customize product attributes display.
QuoteSummaryFooter	SlotProps	No	Customize summary footer.
QuoteItem	SlotProps	No	Customize entire quote item display.
ItemTitle	SlotProps	No	Customize item title.
ItemPrice	SlotProps	No	Customize item price display.
ItemTotal	SlotProps	No	Customize item total display.
ItemSku	SlotProps	No	Customize SKU display.

Usage

The following example demonstrates how to use the QuoteSummaryList container:

import { render as provider } from '@dropins/storefront-quote-management/render.js';
import { QuoteSummaryList } from '@dropins/storefront-quote-management/containers/QuoteSummaryList.js';

await provider.render(QuoteSummaryList, {
  hideHeading: true,
  hideFooter: true,
  routeProduct: routeProduct,
  slots: {
    // Add custom slot implementations here
  }
})(block);