shadcn.io is not affiliated with official shadcn/ui
Quantity Breaks Checkout Block for Svelte
A mix-and-match offer counted across four sticker and label products: any three for $21.00, a meter that reads 2 of 3, a sentence that says what to add, and a cent-exact allocation that gives the bundle price to the cheapest units first.
Installation
Overview
Reward people for filling a set, with these quantity breaks for Svelte with Ark UI. A compact header from Pickwell Paper, a small shop for custom stickers and labels, promises "Any 3 for $21.00" over a hairline frame with a plus mark on each corner. The first band is a figure: a Progress meter that reads "2 of 3" and fills across all four products, and one sentence worked out from the bag ("Add 1 more to pay $21.00 for three."). Four rows follow, each with a drawn thumbnail, a quantity stepper from 0 to 9, a note that says how many of its units are in a set and how many are at full price, and the line total with the list price struck through when a set applies. Every full set of three takes the bundle price, made up of the three cheapest units in the bag, and the saving is shown against list price; a fourth unit goes back to full price and its line says so. Continue to shipping is the only Shine Button. For stickers, tees, candles and any shop that sells "any N for a price".
FAQ
How is the count worked out across lines?
Every unit in the bag becomes an entry with its line and its price, and the entries are sorted cheapest first. groupsOf cuts the sorted list into full sets of three; whatever is left over (up to two units) stays at full price. The meter shows how many of the current three are filled, and a full set reads "3 of 3" rather than "0 of 3".
Why does the bundle take the cheapest units?
It is the usual rule for "any three" offers and the one that keeps the saving honest: the shop never gives away a dearer unit for the bundle price. The order is stable, so units with the same price keep their line order. If your rule differs, change unitsOf and nothing else; the allocation, notes and totals follow.
How is the bundle price shared to the cent?
Each full set is $21.00 over its three units, split in proportion to their list prices with sharesOf: every unit gets the rounded-down share and the cents still missing go one each to the largest remainders. So the three line totals always add up to exactly the bundle price. Money is whole cents throughout and usd is the only place that writes dollars.
What happens with a fourth unit?
The first three (the cheapest) are a set; the fourth is at full price. Its line reads "1 in a set, 1 at full price" or "1 at full price", the sentence under the meter says "1 at full price. Add 2 more to pay $21.00 for three.", and the saving stays at the one set's. Adding two more makes a second set.
Is the offer clear to screen readers?
Each stepper is a labelled group ("Quantity of Round vinyl stickers") with Fewer and More buttons that stay pressable at their limits and answer through one polite status line. That line repeats the new quantity, the item count, the amount due and the next step of the offer, so the whole change is heard at once.
What stays local in the demo, and how do I wire it up?
Everything: the four products, the bundle size and the price are typed constants and nothing is ordered. In your app take the offer from your pricing rules (a size and a price), let the cart API return the allocation per line, and render it, so a rule change does not need a front-end deploy.