order-summary

Order Summary

Order summary card with an item count, product thumbnails with variant and quantity, and a subtotal, shipping, tax and total breakdown.

States: Default

Parts

PartFileDoes
OrderSummaryOrderSummary.vueShows the order's items with subtotal, discounts, shipping, tax and total.

Styling

PartRecipe
OrderSummaryorder-summary-image
OrderSummaryline-title
OrderSummarymeta
OrderSummaryhint
OrderSummarytotal

Install

Writes 3 files into components/sections/order-summary/. For agents, npx @frontic/ui docs order-summary prints this reference as markdown; the MCP server serves the same.

Built from

API reference

OrderSummary OrderSummary.vue

Shows the order's items with subtotal, discounts, shipping, tax and total.

PropTypeDefault
itemsCartLine[][]
currencystring'EUR'
shippingCentsnumber0
shippingNotestring—
discountsAppliedDiscount[][]
taxCentsnumber0
showTaxbooleantrue
showHeaderbooleantrue
showTotalbooleantrue
titlestring'Order Summary'
descriptionstring—
countLabel((count: number) => string)—
quantityLabel((quantity: number) => string)`Qty: ${quantity}`
subtotalLabelstring'Subtotal'
shippingLabelstring'Shipping'
freeShippingLabelstring'Free'
taxLabelstring'Tax'
totalLabelstring'Total'
minusSignstringMINUS_SIGN
totalNotestring—
localestring—
surface'raised' | 'bare''raised'
classClassValue—
SlotSlot props
title—
line{ line: CartLine; }
codes—
Data attributeValues
data-surface'raised' | 'bare'
Recipe order-summary-imageSets
base: order-summary-image 4 properties · 3 inherited
Recipe line-titleSets
base: line-title 2 properties
Recipe metaSets
base: meta 3 properties
Recipe hintSets
base: hint 2 properties
Recipe totalSets
base: total 2 properties
Example