All components (204)

Order summary

Commerce · OrderSummary · .amset-order

What it is and when to use it

The summary of an order or a cart: one row per item with its quantity and its amount, the subtotal, the adjustments (shipping, coupons) and the total.

When to use it

In the cart, in the payment step and in the order confirmation.
lines are the items (name, quantity, unit price and an optional detail for the size or color); the amount of each line is calculated. currency is the currency (EUR by default).
settings for whatever adds to or subtracts from the subtotal: a negative amount is a discount (it is drawn as such) and, with freeText, a zero amount is written with that text ("Free").
total when the calculations are done by the server (taxes, rounding): that number is shown, not the sum that comes out in the browser.
hiddenTitle inside a Card that already carries the title: the table still has a name, but it is not seen twice.

When not to

Standalone pairs of label and value (payment method, address, date): DataList.
A list of orders that is sorted, filtered or selected: Table.
A standalone price: Amount.

Keyboard: nothing in it can be pressed or focused: it is a read-only table.

Accessibility: it is a real <table>. The title ("Order summary" by default) is its <caption>, with the number of items (units, not lines); the headers "Item", "Quantity" and "Amount" are heard even though they are not seen; each line has its row header, and the subtotal, the adjustments and the total go in the <tfoot>. Without lines it does not draw an empty table: it shows the text of empty ("Your cart is empty").

Context: the language of LocaleProvider (or AmsetProvider) decides how amounts are written; without a provider, es-ES.

Fine-tuning: CSS variables --amset-order-*: -detail, -font, -row-padding, -title, -total. The size changes the padding of each line and the font sizes, including that of the total.

What it looks like

Your order3 items
Item	Quantity	Amount
Performance T-shirt	×2	€49.80
Insulated bottle	×1	€18.40
Subtotal		€68.20
Total		€68.20

<OrderSummary
  title="Your order"
  lines={[
    { key: 'a', name: 'Performance T-shirt', quantity: 2, price: 24.9 },
    { key: 'b', name: 'Insulated bottle', quantity: 1, price: 18.4 },
  ]}
/>

Props

Import it with import { OrderSummary } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`lines`required	`readonly OrderLine[]`	—
`className`	`string`	Merged with the library classes; it does not replace them.
`currency`	`string`	—
`empty`	`string`	—
`hiddenTitle`	`boolean`	The title for the screen reader only. For when the summary sits inside a card that already titles it: the table needs its name, but seeing it twice is too much.
`settings`	`readonly OrderAdjustment[]`	—
`size`	`"sm" \| "md" \| "lg"`	—
`title`	`string`	Title of the block. It is what names the table.
`total`	`number`	Total given from outside, when the server calculates it (taxes, rounding).

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-order-row-padding`	`var(--amset-space-2) 0`
`--amset-order-title`	`var(--amset-text-base)`
`--amset-order-font`	`var(--amset-text-sm)`
`--amset-order-detail`	`var(--amset-text-xs)`
`--amset-order-total`	`var(--amset-text-lg)`

How to change it

.amset-order {
  --amset-order-row-padding: ...;
  --amset-order-title: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: