shadcn.io is not affiliated with official shadcn/ui
Shipping Zones Storefront Block for Vue
A weight slider over a shipping rate table: parcels from 0.5 to 20 kg priced for five zones by Standard and Express from typed weight tiers, with the zones where Standard is free at the basket marked in words.
Installation
Overview
Show what shipping costs by weight and by place in one glance, with this rate table for Vue with Ark UI. A header names the page and says what Plumb & Rule sells. In a hairline frame with a plus mark on each corner, the first band holds a Slider for the parcel weight, from 0.5 to 20 kg in half kilos, with the weight, the tier it falls in and the basket total beside it. Under it a table lists five zones, each with Standard and Express prices and its days. The prices are typed per zone for five weight tiers in integer cents, and the slider only picks the tier, so moving it re-prices every cell. Standard is free in a zone when the basket reaches that zone's threshold and the parcel is 10 kg or less, and the zone says "Free at this basket" in words and shows the old price struck through. On a phone a zone is a row with both prices under its name. It's built from Slider, a native table and Guides, with a CSS entrance only. For a shop with parcel, freight or timber rates.
FAQ
How do I fill it with my own rates?
Edit TIERS for the weight limits in half kilos, and ZONES for each zone's name, places, days, free threshold in cents and the Standard and Express price in cents for each tier. The basket is BASKET, and FREE_MAX is the heaviest parcel that can ship free. Everything on the page is looked up from those.
How does the slider pick a price?
The slider steps in half kilos, from 1 to 40 half kilos. The first tier whose limit holds the weight is the tier, and each zone has a price for it, so 4.5 kg falls in tier 3 (over 3 up to 5 kg). Dragging only changes which price is read; nothing is calculated from the weight itself.
When is Standard free?
When the basket, $142.00 in the sample, is at or above the zone's threshold, and the parcel is 10 kg or less. So at 4.5 kg Standard is free in Local, Regional and National, and not in Islands, which starts at $200, or in Europe, which is never free. The status line counts them.
What stays local, and how do I wire it to real rates?
The carriers, Halyard Parcel and Swiftwater Dispatch, are made up, and so are the prices; nothing is looked up or shipped. To wire it up, load your carrier's rate card into ZONES and TIERS, and feed BASKET from the cart. Any rate that depends on dimensions or a surcharge belongs in the same tables.