shadcn.io is not affiliated with official shadcn/ui
Wishlist to Cart Checkout Block for Solid
A jewellery wishlist as a table you select from: a select-all checkbox with a mixed state, price when saved against price now with an arrow and a signed difference, availability in words, a sort and a sticky bar that adds the ticked pieces.
Installation
Overview
Move the pieces someone has been waiting for into their cart in one go, with this wishlist for Solid with Ark UI. A compact header from Gildersleeve, a handmade jewellery shop, holds the title, one sentence and a Native Select that sorts by price drops or by name. Inside a hairline frame with a plus mark on each corner, a native table gives each saved piece a Checkbox, its name and variant, the price when you saved it, the price now with an arrow and a signed difference ("−$6.00", "+$4.00", "No change"), and its availability in words with a glyph: In stock, Only 2 remain, Sold out. The box in the head ticks every piece that can be bought and shows a bar while only some are ticked; sold-out pieces and pieces already in the cart have no box and are skipped. The bar pinned under the table reads "Add 3 to cart: $114.00" from the ticked rows, in a polite status line and the only Shine Button. Below the medium breakpoint each row folds into a card and the saved price drops out. It's built from Checkbox, Native Select, Button, Shine Button and Guides, with a CSS entrance only. For wishlists, favourites, saved lists and any selection that ends in a bulk add.
FAQ
How do I fill it with my own wishlist?
Edit PIECES at the top. Each has an id, a name, a variant, the price saved and the price now in whole cents, a stock of in, low or out and, for low, how many remaining. The difference, its sign and arrow, the availability words, the ticked total and the counts are all worked out from those. Sorting is a pure function over the same list, so a new sort is one more branch in sortRows.
How does select all work with sold-out pieces?
The head checkbox looks only at pieces that can be bought: in stock or low, and not yet in the cart. It is ticked when all of them are, shows a bar when some are, and ticking it ticks them all; pressing it when all are ticked clears them. Sold-out rows have no checkbox, only a dash that a screen reader reads as "Sold out, cannot be selected", and their row is marked aria-disabled.
How is a price change shown without colour?
With an arrow, a sign and words, all in the same foreground colour: a down arrow and "−$6.00" for a drop, an up arrow and "+$4.00" for a rise, a bar and "No change" otherwise. A screen reader hears the amount followed by "since you saved it". Nothing relies on green or red, and the minus is a real minus sign, not a hyphen.
What does Add to cart do?
It moves the ticked pieces into a cart that exists only on the page: their boxes are replaced by a dash read as "In your cart", their variant line says so, the selection is cleared and the polite status line says how many were added, for how much, and that nothing was ordered. With nothing ticked it says to tick a piece instead. The bar is pinned to the bottom of the panel at every width, so the button stays in reach however long the table is.
Is the table accessible?
It is a native table with a caption, column headers and a row header for each piece, so a screen reader announces the name, the saved price, the new price and the availability as you move across a row. Each checkbox is named by the piece's name. The sort is a labelled select, and a change of order is announced. On a phone the table and the card list are two views of the same state, and only one is in the page at a time.
What stays local, and how do I wire it up?
Everything: the wishlist is typed in this file, sorting and ticking change only state, and Add to cart moves rows between two local lists. In your app load the wishlist from the account with each piece's current price and stock, send the ticked ids to your cart API in add, and leave failures in the same status line.