shadcn.io is not affiliated with official shadcn/ui
Order Summary Checkout Block for Vue
An order summary that explains each price: a native table of three menswear lines with drawn thumbnails and struck list prices, a Why this price popover per line showing the sale and its cent-exact share of a code, totals in cents, and a copy-as-text button.
Installation
Overview
Show people why the total is what it is, with this order summary for Vue with Ark UI. A compact header from Weaverhall, a menswear shop, has an Edit cart link at its end, over a hairline frame with a plus mark on each corner. A native table with a hidden caption lists three lines: a drawn thumbnail, the name, size and colour, the quantity and the price you pay, with the list price struck through when the line was on sale. Every line has a "Why this price?" button that opens a Popover (it opens from the keyboard, unlike a hover card) with the working: the list price, the sale discount and that line's share of the TEN8 code, an $8.00 order discount shared across the lines in proportion to what they cost and split to the cent with the largest-remainder rule, so the shares always add up to $8.00. The table's foot shows the subtotal at list prices, the sale and code savings, shipping, a tax at a typed 8.00% example rate and the total, all worked out in whole cents. Copy Button puts the same summary on the clipboard as plain text, and Place order, the only Shine Button, says nothing was charged. For the last look before paying, and for receipts.
FAQ
How is an order-level code shared across the lines?
In proportion to each line's sale price, in whole cents. Each line first gets the rounded-down share, then the cents still missing are given, one each, to the lines with the largest remainders (ties go to the earlier line). So $8.00 over $42.00, $65.00 and $36.00 becomes $2.35, $3.64 and $2.01 and always totals exactly $8.00. The helper is sharesOf and takes any list of weights and any amount.
Why are prices in cents, and where is the tax?
Floating-point dollars drift (0.1 + 0.2), so every price is an integer number of cents and usd is the only place that writes them. Tax is a typed example rate (8.00%, in hundredths of a percent) applied to the goods after the code and rounded half up; shipping is outside it. The foot's rows are all derived from the lines, so no figure is typed twice. A real shop takes the tax from its tax service, as the tax calculator block does.
Why a popover and not a hover card?
A hover card opens on pointer hover and cannot be reached with Tab, so keyboard and touch users would never see the working. The popover opens from the button with Enter or Space, a tap or a click, holds a short list of terms, and closes with Escape or a click outside, returning focus to its button.
What does Copy summary copy?
The same lines as plain text, one per line: each item with its size, quantity and price, the list subtotal, the sale and code savings, shipping, tax and the total. The button's label does not change; the polite status line says "Copied the order summary as text." In the demo that text is a constant built from the same data as the table.
How is the Edit cart link built?
asChild around an a element.Point href at your cart page.What stays local in the demo, and how do I wire it up?
Everything: the order is typed in LINES, the code is constant and nothing is placed or charged. In your app render the lines your cart API returns, take the discount allocation, shipping and tax from the same response so the page and the charge agree, and make Place order submit the order.