CartSummary
Cart line-item summary with totals, promo handling, and optional quantity editing.
Best for
Import
import { CartSummary } from "@enadhq/enad-react-sdk/client/storefront"When to use it
Use CartSummary when the page needs a clear itemized view of what the customer is buying plus the financial breakdown around it. It works in drawers, cart pages, and checkout review steps.
Choose read-only mode for review surfaces. Add handlers only when the summary truly needs to act like an editing surface.
Composition notes
The component combines three concerns: line items, pricing totals, and optional cart actions. Keep all three connected to the same cart state so quantity, promo discounts, shipping, and totals never drift apart.
If the layout already has a dedicated promo-code area or quantity editor, avoid duplicating those controls inside the summary.
Behavior and theming guidance
Use this component to reduce decision friction, not add more. Keep totals easy to scan and make any discount state obvious.
The summary already has a strong structural treatment, so prefer tuning spacing and container placement around it before rewriting the internal sections.
Examples
Live examples you can edit directly in the sandbox.
Read-only summary
Use the read-only mode for confirmation and review steps where the visitor should inspect the cart but not edit it inline.
Interactive summary
Wire the handlers when the summary should support promo application, quantity changes, and item removal.
Component Sets
Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | CartLineItem[] | — | Line items to render in the summary, including quantity and any optional image or variant copy |
| subtotal | number | — | Merchandise subtotal before shipping, tax, and discounts are applied |
| tax | number | — | Optional tax amount shown between subtotal and total |
| shipping | number | — | Optional shipping amount; pass 0 to render the free-shipping label instead of a price |
| total | number | — | Final payable amount after shipping, tax, and discounts are accounted for |
| currency | string | SEK | ISO 4217 currency code used for every price row in the summary |
| locale | string | — | BCP 47 locale string used when formatting prices |
| onQuantityChange | string | — | Enables inline quantity editing and receives the updated quantity for the affected line item |
| onRemoveItem | string | — | Enables inline remove actions for each line item |
| onPromoApply | string | — | Enables the promo-code input and receives the submitted promo code |
| promoCode | string | Initial promo code shown in the promo input when the summary first renders | |
| promoError | string | — | Validation or apply error shown underneath the promo input |
| promoDiscount | number | — | Positive discount amount rendered as a separate totals row |
| className | string | — | Additional classes applied to the root wrapper around the summary |
| labels | string | {} | Override strings for totals labels, promo controls, free-shipping copy, and remove actions |