Cart Summary
Cart Summary
The Cart Summary renders a reactive price breakdown block that stays in sync with the cart automatically. Drop in a single element for a built-in totals layout, or write your own template with token substitution, conditional CSS classes, and repeating list containers for per-item and discount breakdowns.
How It Works
- Add
data-next-cart-summaryto any container element — no further configuration required - The block subscribes to the cart and re-renders whenever totals change
- Use a
<template>child to control the layout; omit it to use the built-in rows - Apply CSS rules against state classes (
next-has-discounts,next-free-shipping, etc.) to show or hide rows without JavaScript
Get Started
Activate the cart summary and render your first totals block.
Custom Template
Control the layout with your own markup using token substitution and state CSS classes.
Cart Lines & Discounts
Render cart line items, offer discounts, voucher discounts, and per-line discount breakdowns.
Cart Display
Bind a single live cart value to any element — no container or template needed.
Reference
Full attribute reference — template tokens, list containers, state classes, and CartDisplay properties.