Cart Line Item

Demo & usage

More examples

When to use

• Rows in the cart page and the mini-cart drawer.
• A read-only line in order details / confirmation (set `editable`/`removable` to false).
• You want the line total to track quantity automatically.

Async states

• error

Server writes

Writes

• quantityCommit

Each payload carries a requestKey — send it with the request so a retry cannot apply the same change twice.

Rollback

Call event.rollback() when the save fails — the change is already on screen, and this is what puts it back.

While saving

Bind saving — with two writes outstanding there is no single state to roll back to, so the action stays locked until the first one lands.

On failure

Pass the failure to error to show it in place — without taking away what the user was working on.

Outputs

Customization & theming

• Default and compact densities.
• Editable quantity stepper or a static quantity.
• Optional remove and save-for-later actions.
• `commitDelayMs` tunes how long a burst of clicks settles; `0` reports every step.
• `unavailableText` for why a variant can no longer be bought.
• `stock` caps the stepper; `previousUnitPrice` turns on the repricing note, with the direction and old figure formatted in the row's own currency and locale.
• Any ISO currency + locale, with minor-unit support.

Best practices

• Do: Bind `[(quantity)]` for display and persist from `(quantityCommit)`. The model moves on every click; the commit fires once the clicking stops.
• Do: Call `rollback()` from the commit payload when the write is rejected. It restores `previousQuantity` — the value the server last agreed to, not the value one click ago.
• Do: Send `requestKey` with the write and ignore a key you have already applied, so a retry cannot charge for a quantity twice.
• Do: Bind `[saving]` while a write for the row is in flight. It freezes the stepper and both actions, which is what keeps `rollback()` unambiguous.
• Do: Pass `stock`. It is a cap, not a hint: the stepper stops at `min(max, stock)`, a low-stock note appears near the limit, and `0` makes the row unbuyable without a separate `[unavailable]`.
• Do: Bind `previousUnitPrice` when a fresh quote changed the price. Otherwise the line total silently redraws and asks the shopper to pay a figure they never agreed to.
• Do: Own the undo window yourself: soft-remove on `(remove)`, set `[removed]="true"`, and restore on `(undoRemove)`. The row will not start a timer and commit a deletion on your behalf.
• Don't: Don't fire a request from `(quantityChange)` — three taps on `+` become three requests for 2, 3 and 4 against a server free to apply them in any order.
• Don't: Don't compute the line total yourself — it is derived from unit price × quantity.
• Don't: Don't expect the row to fix an over-stock quantity. It reports the conflict; clamping the cart is a write, and writes belong to you.
• Tip: Call `commitNow()` from a Checkout button so a still-settling edit is not lost on navigation.

Accessibility

• Remove, undo and save actions are real buttons with descriptive labels naming the product.
• The quantity stepper is named after its line, so a five-item cart does not announce "Number input" five times — and its + / – buttons are named after the line too, not "Increase value".
• Whichever note the row is showing describes the stepper via `aria-describedby`, with a per-instance id so one row is never described by another's. A quantity that outruns the stock, or a write that failed, also sets `aria-invalid` — so the red border and the announced state agree.
• A write in flight sets `aria-busy` on the row and disables its controls.
• A failed write is text in a `role="alert"`, never colour alone; removed and unavailable rows say so in words as well as by dimming the image. The repricing note names the direction in words, so up and down are not told apart by colour.
• Image links and titles are keyboard-reachable; line total is tabular-nums text.