Cart SummaryReference
CSS Classes
Host Element State Classes
Applied to the data-next-cart-summary host element on every render. Use these in CSS to show or hide rows without JavaScript.
| Class | Condition |
|---|---|
next-cart-empty | Cart has no items |
next-cart-has-items | Cart has one or more items |
next-has-discounts | Total discount amount > 0 |
next-no-discounts | Total discount amount = 0 |
next-has-shipping | Shipping cost > 0 |
next-free-shipping | Shipping cost = 0 |
next-has-shipping-discount | A shipping discount is applied |
next-no-shipping-discount | No shipping discount |
next-calculating | Totals recalculation is in progress |
next-not-calculating | Totals are up to date |
Common patterns:
/* Hide discount row when no discount is active */
.next-no-discounts .discount-row { display: none; }
/* Hide shipping row when shipping is free */
.next-free-shipping .shipping-row { display: none; }
/* Hide the strikethrough shipping original when no shipping discount */
.next-no-shipping-discount .original-shipping { display: none; }
/* Show a loading indicator while recalculating */
.next-calculating .spinner { display: block; }
.next-not-calculating .spinner { display: none; }Default Layout Row Classes
When no <template> child is present, the built-in layout renders rows with these classes:
| Class | Applied to |
|---|---|
next-summary-row | Every row wrapper |
next-summary-label | Label cell in each row |
next-summary-value | Value cell in each row |
next-row-subtotal | Subtotal row |
next-row-discounts | Discounts row (only rendered when discounts are non-zero) |
next-row-shipping | Shipping row |
next-row-total | Total row |
List Container State Classes
Applied to data-summary-lines, data-summary-offer-discounts, data-summary-voucher-discounts, and data-line-discounts containers after each render.
| Class | Condition |
|---|---|
next-summary-empty | No items in the list |
next-summary-has-items | One or more items in the list |
/* Hide an empty discount section */
.next-summary-empty { display: none; }