shadcn.io is not affiliated with official shadcn/ui
Course Enrollment Checkout Block for Vue
Enrol in a six-week course: pick a cohort by start date and seats open, read five expandable modules totalling 32 hours, choose seats, and see an early price that ends on a fixed date worked out from a plain date compare.
Installation
Overview
Let people choose when to start and see what they are signing up for, with this course-enrollment checkout for Vue with Ark UI. A compact header from Millstream Mercantile, a craft school, names the course. Inside a hairline frame with a plus mark on each corner, three cohorts are radio cards with a start date and the seats open, over an Accordion of five modules that can be open together, each listing its lessons, with the course's hours and lessons added up from the data ("32 hours in all"). The early price is a rule on a fixed date: while "today" is on or before Sunday 25 October the seat costs $210, after that $240, and the page works it out with a plain date compare and says "Early price until Sun 25 Oct". A Native Select sets the seats, capped by the cohort, and Fields take the student's name and email. An agreement Checkbox starts unticked. Enrol is the only Shine Button, pinned to the bottom of the panel at every width. It's built from Accordion, Checkbox, Native Select, Badge, Input, Shine Button and Guides, with a CSS entrance only. For courses, classes and cohorts.
FAQ
How is the early price decided?
By one comparison of two ISO dates in the file: the fixed AS_OF ("today") and EARLY_UNTIL. While AS_OF is on or before EARLY_UNTIL the price per seat is EARLY_CENTS, otherwise REGULAR_CENTS; the badge in the summary, the "until" line and the total all read the same helper. Nothing reads the clock, so the page looks the same whenever it is opened. In your app, take "today" from the server and compare there too.
How do the seats work?
Each cohort has a typed number of seats open, and the seat select offers 1 up to the smaller of that number and four. Choosing a cohort with fewer seats open than you had chosen lowers the count to fit, and the summary shows seats times the price per seat. The numbers are typed in this demo; nothing is held when you press Enrol.
Can I open several modules at once?
Yes. The accordion allows any number of modules to be open, starts with the first one open, and keeps closed modules mounted so their text is findable. Each trigger is a heading with the module's title, its lessons and its hours. The hours in the band's header are the sum of the modules' hours, so editing a module changes the total.
What happens when I press Enrol with something wrong?
The button is never disabled. A press marks an empty name, an email that isn't one, and the unticked agreement, says "Not enrolled" in the polite status line and moves focus to the first in reading order. Each has a reserved problem line, so nothing moves. The agreement box starts unticked because consent should be a choice.
Why is the button always pinned?
This panel is long, with five modules that may be open, so Enrol stays in view at the bottom of the screen at every width instead of ending up several screens away. Its status line sits beside it and says what the last action did.
What stays local in the demo, and how do I wire it up?
Everything. The cohorts, the seats and the price live in the file, nothing is booked, and Enrol waits 700 ms and says that nothing was charged. To connect it, load cohorts and seats from your schedule, hold the seats on your server when Enrol is pressed, and take the payment with your provider's hosted fields.