shadcn.io is not affiliated with official shadcn/ui
Gift Card Storefront Block for Vue
A gift card page for a book and tea shop: a card redrawn for three greyscale designs and the chosen amount, amount choices with any whole amount from 10 to 500, a bonus ladder, a Someone else or Myself choice, and an Email or Print choice.
Installation
Overview
Make buying a gift card a small pleasure, with this gift card page for Vue with Ark UI. A header names the page and says what Eider & Elm is. A hairline frame with a plus mark on each corner holds two cells: the card, drawn in a greyscale pattern with the shop's name and the amount, over a radio group of three designs; and four amount choices, a field for any whole amount from $10 to $500 that refuses the rest with the reason, and a bonus ladder (give $50 and get a $5 bonus card, $100 for $12, $200 for $30) with the reached step marked. A band under them picks Someone else or Myself and Email or Print with two Segment Groups, and the address it goes to. The Shine Button adds the card and says nothing is sent. It's built from Segment Group, Field, Input and Guides, with a CSS entrance only. For a gift card page, a holiday offer or a shop's gifts section.
FAQ
How is the bonus worked out?
The ladder in LADDER has an amount and a bonus in dollars for each step. The bonus is the one for the highest step the amount reaches, and the line and the ladder both read from it. Below the first step the line says what to give to earn one.
What amounts are accepted?
The four choices, or any whole number of dollars from 10 to 500 typed in the field. Anything else shows the reason and leaves the card at the last good amount. Choosing an amount clears the field, and choosing a design never changes the amount.
What does the address field do?
For Someone else by Email it is required, and the Shine Button refuses a malformed address. For Myself, or for Print, the field is disabled and shows where the card goes instead.
What stays local, and how do I wire it to real cards?
The card is drawn, the bonus is a typed ladder and Add to bag only updates the status line. To wire it, create the card on your server when the order is paid, email it to the recipient or give a printable page, and credit the bonus card to the buyer.