shadcn.io is not affiliated with official shadcn/ui
Weight Based Shipping Checkout Block for Svelte
Three pet food products with steppers, a switch for one parcel or one per product, the box and dimensional weight behind each parcel, a native table of five rate bands that marks Your parcel, and shipping, goods and total in whole cents.
Installation
Overview
Show how a parcel's weight sets its shipping price, with this weight based shipping for Svelte with Ark UI. A compact header from Ottercombe, a pet food shop, holds the title and one sentence. Inside a hairline frame with a plus mark on each corner, a main cell lists three products with a weight, a price and a quantity stepper from 0 to 9, and the basket's total weight. A Switch chooses one parcel or a parcel per product; over 10 kg, one parcel ships as two and both are priced, and a line says so. A native table of five rate bands (up to 0.5 kg, 2 kg, 5 kg, 10 kg, and over 10 kg) marks "Your parcel" on the row each parcel lands in. A side cell shows what is billed for every parcel: the real weight, the box's length times width times height divided by 5000, and the greater of the two as the billed weight, then goods, shipping and the total in whole cents. A polite line says the quote in words. Continue to payment is the only Shine Button. It's built from Badge, Button, Shine Button, Switch and Guides, with a CSS entrance only. For heavy goods, food and any shop that prices shipping by the kilo.
FAQ
How do I use my own rate card, boxes and products?
Edit BANDS, BOXES and LINES at the top. A band has its price in cents and the heaviest billed weight it covers in grams; a box has its length, width and height in centimetres and the heaviest real weight it is used for; a line has a weight in grams and a price in cents. Weights, bands, boxes and totals are all worked out by small helpers, so no figure is typed twice.
What is dimensional weight and why is it shown?
Carriers bill the greater of the real weight and the space a parcel takes, which is length times width times height in centimetres divided by 5000. A light parcel in a big box is billed for the box. The side cell shows both numbers and marks the greater as billed, so a surprise in the rate band is explained rather than hidden.
What does the Switch do, and what happens over 10 kg?
On, everything goes in one parcel up to 10 kg; over that it ships as two parcels of half the weight each (the line under the switch gives both weights) and both are priced from the table. Off, each product line ships in its own parcel and is priced on its own. The status line says the new quote in either case.
Does it work in right-to-left languages?
Yes. Weights, counts and names sit in bdi, prices and box sizes are fixed left-to-right, and the layout uses logical classes, so the side cell moves to the start in Arabic or Hebrew while the numbers read correctly.