shadcn.io is not affiliated with official shadcn/ui
Reorder Storefront Block for Vue
A buy-it-again shelf for a pantry: seven staples with today's price against the last price as an arrow, a sign and a word, a quantity stepper, a tick box, select all, and one Add to the bag for the ticked rows.
Installation
Overview
Make the second order quick, with this buy-it-again shelf for Vue with Ark UI. A header names Orchard Gate, a whole-foods pantry, and says what the shelf is. A hairline frame with a plus mark on each corner lists seven staples (oats, chickpeas, olive oil, rice, lentils, almond butter, tahini) with the pack size and the month of your last order. Each row shows today's price beside the price last time and how it moved, written as an arrow, a sign and a word ("Up $0.30", "Down $0.60", "Same price") so colour is never the signal. A quantity stepper runs from 1 to 9 and a tick box chooses the row; a Select all box above is a real three-state checkbox. The action foot adds up the ticked rows in cents and holds the block's one Shine Button, "Add 4 to the bag": pressing it says "Added 4 lines in this demo", unticks them and marks each row In the bag. It's built from Button, Shine Button and Guides, with native checkboxes and a CSS entrance only. For a returning customer's page, an order history or a subscription shop.
FAQ
How do I fill it with my own staples?
Edit STAPLES. Each has an id, a name, a pack phrase, the day of the last order (last), today's price (now) and the price at that order (was) in cents, and the usual qty. The price movement, the "priced differently" count, the total and the item count are worked out from those, and START_TICKED lists the rows ticked when the page opens.
How is the total worked out?
In integer cents: each ticked row's price times its quantity, added up, then formatted once as dollars. The foot says the sum and the number of items (packs), and the button says the number of lines.
What does Add to the bag do?
It adds each ticked row's quantity to that row's In the bag count, unticks the rows and says "Added 4 lines in this demo". With nothing ticked it says to tick an item first. Nothing is bought; connect the handler to your cart and let the response set the In the bag lines.
How does Select all work?
It is a native checkbox. It is ticked when every row is, mixed when only some are, and pressing it ticks everything or clears everything. The mixed state is set through the checkbox's own property after each render, so it works the same on every target.