shadcn.io is not affiliated with official shadcn/ui
Locker Delivery Checkout Block for Vue
A drawn street map with four locker pins as real buttons beside a list of the same four with distance, hours and free compartments, three compartment sizes matched to a typed parcel, and the arrival and last day to collect.
Installation
Overview
Let shoppers collect an order from a locker, with this locker delivery for Vue with Ark UI. A compact header from Goldcrest Co, a shop for phone and laptop accessories, holds the title and one sentence. Inside a hairline frame with a plus mark on each corner, a stage shows a greyscale street map drawn from shapes with four locker pins as real buttons, each with its two letters. Beside it a list holds the same four with distance, hours and the free compartments left. Choosing a pin or a row chooses both: they stay in step, and a polite line says what the locker has free. Under the map, a compartment size picker matches the typed parcel (38 x 28 x 6 cm) to three sizes and marks the smallest that fits with "Fits your parcel"; a size that is too small or full at that locker stays visible, says why and cannot be picked, and a locker where nothing fits says so and the one Shine Button answers with that reason instead of continuing. A list of facts gives the locker, the compartment, the arrival and the last day to collect, counted in weekdays from a fixed date, the delivery price and the total in whole cents. It's built from Badge, Shine Button and Guides, with native radios and a CSS entrance only. For parcel lockers, pick-up points and collection shelves.
FAQ
How do I use my own lockers and parcel?
Edit LOCKERS, SIZES and PARCEL at the top. A locker has a name, a two-letter mark, its distance and hours, where its pin sits on the map in percent and the free compartments per size in the same order as SIZES. A size has its inside length, width and height in centimetres. Which sizes fit, which is free and which is recommended are worked out from those.
Is the map real?
No, it is drawn from a few lines and shapes in greyscale, so the block carries no map tiles, keys or network calls. The pins are positioned over it in percent. To use a real map, replace StreetMap with your map component and keep the pins and the list reading the same locker state.
How do the map and the list stay in step?
Both read one chosen-locker state, and a pin or a row simply sets it. The chosen one is marked in both (a filled pin and a tinted row with a bar) and carries aria-current, so a screen reader hears which is chosen in either place. Both are real buttons, reachable by Tab.
What if the compartment I want is full?
It stays in the list with "Full" or "Too small" instead of disappearing, and it cannot be chosen. Changing locker picks the smallest size that fits and is free there; if none is, the compartment line reads "None fits here" and the status line suggests another locker.
How does it look on a phone?
The map is a shorter band above the list, and the pins stay large enough to tap. The compartment picker and the pick-up facts stack under the list, and the foot is pinned to the bottom of the screen while you scroll.
What stays local, and how do I wire it up?
Everything: no compartment is reserved and Continue to payment only says that payment comes next. In your app read the lockers and their free compartments from your carrier's API, reserve one when the order is paid, and send the shopper the collection code it returns. Parcelnook is an invented network.