OrderSummaryLine Container

The OrderSummaryLine container renders individual line items within the order summary such as subtotal, shipping, or tax rows.

Version: 1.1.2

Configuration

The OrderSummaryLine container provides the following configuration options:

Parameter	Type	Req?	Description
label	VNode | string	Yes	Yes | Label text or component for the line item.
price	VNode<HTMLAttributes<HTMLSpanElement>>	Yes	Price component for the line item.
classSuffixes	Array<string>	No	Provides an array of CSS class suffixes for styling variants. Use to apply different visual styles to order summary line items based on their type or context.
labelClassSuffix	string	No	CSS class suffix specifically for the label.
testId	string	No	Test ID for automated testing.
children	any	No	Child elements to render within the container
initialData	object	No	Preloaded data for the model before backend data is fetched. Use for testing, SSR, or improving initial load.

Slots

This container does not expose any customizable slots.

Usage

The following example demonstrates how to use the OrderSummaryLine container:

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

// In updateLineItems or a slot - lineItem from quote prices/order summary data
const label = lineItem.label ?? 'Subtotal';
const price = document.createElement('span');
price.textContent = lineItem.formattedValue ?? String(lineItem.value ?? 0);
await provider.render(OrderSummaryLine, {
  label,
  price,
  classSuffixes: [lineItem.key]
})(block);