Skip to content

Search is only available in production builds. Try building and previewing the site to test it out locally.

OrderSummaryLine container

The OrderSummaryLine container displays a line item in the order summary. The OrderSummaryLine container behaves like a wrapper for the OrderSummaryLine component. The component ultimately decides how to render the line item, based on the children attribute.

OrderSummaryLine container

OrderSummaryLine container

Configurations

The OrderSummaryLine container provides the following configuration options:

Option Type Req? Description
labelstringYes The label for the order summary line.
priceVNodeYes The price for the order summary line.
classSuffixesstring[]No An array of class suffixes to apply to the order summary line.
labelClassSuffixstringNo The class suffix to apply to the label.
testIdstringNo The test ID for the order summary line.
childrenVNode[]No The child elements to be rendered inside the order summary.

Example configuration

The following example adds the Fixed Product Tax (PDT) line to the order summary:

updateLineItems: (lineItems) => {
const totalFpt = ctx.data.items.reduce((allItemsFpt, item) => {
const itemFpt = item.fixedProductTaxes.reduce((accumulator, fpt) => {
accumulator.labels.push(fpt.label);
accumulator.total += fpt.amount.value;
return accumulator;
}, {
labels: [],
total: 0
});
allItemsFpt.labels = [...allItemsFpt.labels, ...itemFpt.labels];
allItemsFpt.total += itemFpt.total;
return allItemsFpt;
}, {
labels: [],
total: 0
});
lineItems.push({
key: 'fpt',
sortOrder: 350,
title: 'Fixed Product Tax',
content: OrderSummaryLine({label: "FPT(" + totalFpt.labels.join(',') + ')', price: Price({amount: totalFpt.total}), classSuffix: 'fpt'})
})
return lineItems;
};