shadcn.io is not affiliated with official shadcn/ui
Bundle Builder Checkout Block for Vue
A spice box built at checkout: a drawn box with three compartments beside six jars, jars that go into the next empty slot and come out again, a box price against the jars bought one by one, and an Add the box button that waits until the box is full.
Installation
Overview
Let people fill a box themselves, with this bundle builder for Vue with Ark UI. A compact header from Sorrel and Sage, a small shop for spice kits, sits over a hairline frame with a plus mark on each corner. In a split layout a drawn box with three compartments shows the jars in it, with a count under it ("2 of 3 filled") and a list of the three slots, each with a Take out that names its jar. Beside it six jars are pressable tiles with a drawn thumbnail, a size and a price: pressing one puts it in the next empty compartment, pressing it again takes it out, and a full box says to take one out to swap. The box has one price, $42.00; the jars bought one by one are summed from the ones you picked and, once the box is full, the saving is the difference. Add the box is the only Shine Button and stays aria-disabled until the box is full, naming how many jars are missing. For spice kits, hampers, sample boxes and anything sold as a set you assemble.
FAQ
How do the compartments fill?
The box is an array of three slots holding a jar's id or an empty string. placed puts a jar in the first empty slot and taken empties the slot that holds it, so jars never move around by themselves and the drawing, the slot list and the sums all read the same array.
Where does the saving come from?
It is derived, never typed: the picked jars' prices are summed (singlesOf) and the box price is subtracted once the box is full. With fewer than three jars the line reads "Fill the box" instead of a figure, because a partial box can cost less than the box price. Money is whole cents and usd is the only place that writes dollars.
Is the drawing part of the accessible content?
No. The box is hidden from assistive technology and everything it shows is also text: the "2 of 3 filled" caption, the slot list ("Slot 1 Smoked paprika") and each tile's pressed state. Tiles are native buttons with aria-pressed, so they work with Space, Enter and any screen reader.
What happens when the box is full and I press another jar?
Nothing moves: the status line says the box is full and to take a jar out to swap it. Tiles that cannot be added are marked aria-disabled, not disabled, so they stay in the tab order and still explain themselves.
What changes on a phone?
The drawn box comes first, then the slots, then the six jars in one column. The foot with Add the box stays pinned to the bottom of the screen and its status line says what is missing.
What stays local in the demo, and how do I wire it up?
Everything: the jars, the box price and the starting picks are typed constants and nothing is added to a cart. In your app load the box's rules (size, price, eligible items) from your catalog, and make Add the box post the chosen item ids as one cart line with the box price.