QuoteSummaryList Container

The QuoteSummaryList container displays quote metadata including quote ID, status, dates, buyer information, and shipping details.

Version: 1.0.0

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 the heading displaying the item count. Receives the total quantity and quote ID. Use to add custom branding, icons, or additional quote metadata in the header.
Footer	SlotProps	No	Customize the footer section below individual quote items. Receives the item data. Use to add custom actions like add to cart, remove, or item-specific notes for each line item.
Thumbnail	SlotProps	No	Customize the product image display for each item. Receives the item and default image props. Use to add image overlays, badges for discounted items, or custom image loading behavior.
ProductAttributes	SlotProps	No	Customize how product attributes (size, color) are displayed for each item. Receives the item data. Use to add custom formatting, grouping, or additional attribute information.
QuoteSummaryFooter	SlotProps	No	Customize the View More button and footer actions for the entire quote list. Receives the display state. Use to add additional actions like export to PDF or email quote.
QuoteItem	SlotProps	No	Customize the entire quote item row. Receives comprehensive item data and formatting functions. Use for complete control over item rendering, such as custom layouts for mobile versus desktop.
ItemTitle	SlotProps	No	Customize the product title display for each item. Receives the item data. Use to add product badges, custom linking, or additional product information inline with the title.
ItemPrice	SlotProps	No	Customize the unit price display for each item. Receives the item data. Use to add price comparison, original pricing with strikethrough, or custom currency formatting.
ItemTotal	SlotProps	No	Customize the line total display for each item. Receives the item data. Use to add savings calculations, tax breakdowns, or custom total formatting with discounts highlighted.
ItemSku	SlotProps	No	Customize the SKU display for each item. Receives the item data. Use to add copy-to-clipboard functionality, links to product pages, or custom SKU formatting.

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