Example Description
In this example, a site visitor chooses a category, which filters a list of classes available for booking. The date of the next available time slot for each class is displayed.
How We Built It
The Collection We Added: Categories
In addition to the standard Bookings collections, we also created a Categories collection with the following fields:
Category: Category names used to divide all services (classes) into three groups: Breathe, Move, and Nourish.
services: A multiple-item reference field listing the service names from the Bookings/Services collection associated with the specified category.
Page Elements
At the top of our Classes page, three categories of classes are displayed in a column strip.
Under the column strip, another strip contains title text and a repeater. The repeater displays a list of available classes. Users can click a button to view more information about a class, or click a different button to book.
Displaying the Services
When a visitor selects one of the categories at the top of the page, the following happens:
The page scrolls to the strip containing the repeater.
The title changes to the selected category.
The data loaded into the repeater is filtered to include only services associated with the selected category.
When the filtered list of classes loads into the repeater, the Bookings API retrieves the available time slots for each class. The date of the first available slot for each class is displayed.
Next Steps
Open this example in the Editor to work with the template.
Publish the site and refresh your browser so the Bookings collections appear in the Database.
Learn how to work with examples in Velo.
Related Examples
Did this help?
|
Thanks for your feedback!
Service Page
Create a custom service page with related products for sale.
Intermediate
Replace Bookings Calendar page
Replace the default Wix Booking Calendar on your site with a tailored version to better suit your needs.
Intermediate
Quick Book and Pending Appointments
Let customers quickly book appointments, which are then approved or declined.
Intermediate
Limit the number of bookings per contact in a week with ECOM Validations SPI
Limit each site member’s bookings to no more than three per week.
Intermediate
Custom Book flow on Booking V2
Let Customers Experience your swift and customized appointment booking process with Bookings V2 APIs.
Intermediate
Round Robin appointment scheduling
Allow bookings with no staff selection, creating Round Robin scheduling - evenly spread the bookings among staff members
Advanced