Blocks
v1.0.0Added in 1.0.0
The Summit Market shop from the cart to Order placed: an editable cart, four checkout steps and the order confirmation.
A slim three step bar under the header shows where you are (Cart, Delivery and payment, Confirmation). In the cart the steppers change quantities (hold to repeat, a stock hint at the limit, the trash at 1), the × or a swipe left on touch removes a line and leaves an undo row that counts down for 5 seconds, and Save for later moves a line to a saved list below with Move to cart and Delete. The free delivery bar fills as the cart grows and turns green at the threshold. Have a coupon? opens the code field: FALL15, FREESHIP, SAVE50 and BIG200 apply after a short check with a popping tick, EXPIRED is rejected with its date, and a code that stops applying after a quantity change is removed with a note. The summary, the savings badge and the total follow every change. Continue to delivery (or the phone bar with the total, shown while the summary button is off screen) opens the checkout: saved addresses or a new one with the state picker (Romanian counties and localities under a ro locale), a company invoice with the tax ID check, the delivery methods with the locker list, the payment methods, and the review with the terms. Back to cart returns with everything kept. Place order places it; the card ending 0002 is refused with the bank's message on the review step. The button turns into a check, the confirmation slides in with a bouncy tick, the thank you, the email, Track order, Continue shopping, an account hint for guests and the order tracker. You might also like is a swipeable rail whose Add to cart buttons add to the cart. Every stage change moves focus to its heading and is announced; stages slide in the direction you go, a fade under reduced motion. On phones the cart is one column, the checkout is a full screen app with its own footer and the confirmation buttons are full width.
npx wingo-ui@latest add checkout-pagePro item: the CLI needs a Pro account. See plans