top of page
Service Page

Service Page

Create a custom service page with related products for sale.

Intermediate.png

Intermediate

4K

Published:

January 1, 2020

Girl Enjoying her Drink

by

Anchor 1
Hire a Developer

Example Description

In this example, a site visitor can book a class from a custom service page, as well as purchase store products related to the class.​​

Example Code

Tab 1

.

Tab 2

.

Tab 3

.

This code solution can be complicated.

How We Built It

The Collection We Added: Extra_Booking_Info

In addition to the standard Bookings and Stores collections, we also created an Extra_Booking_Info collection, which includes the following fields:

  • facility: Name of room class is located in.

  • Service: Reference field with the name of the class (service) from the Bookings/Services collection.

  • Related Products: Multi-item reference field listing all products from the Stores/Products collection related to the class.


Custom Service Page


Each class has its own dynamic page that displays custom service information such as class duration, meeting room, and a schedule. The custom information is pulled from the Bookings/Schedule, Bookings/Services, and Extra_Booking_Info collections. Visitors can navigate between the service pages using Previous and Next buttons.


Related Products


Visitors can also scroll to the bottom of each service page to a related products area. They can purchase store products related to the current class, as defined in the Extra_Booking_Info collection.


Next Steps


  1. Open this example in the Editor to work with the template.

  2. Publish the site and refresh your browser so the Bookings collections appear in the Database.

  3. Learn how to work with examples in Velo.

Hire a Developer

Velo solutions are powerful tools, but building them on your own can be challenging. Let an experienced Velo development shop build it for you, so you can keep working on your site or business.

Related Examples

Did this help?

Yes

|

No

Thanks for your feedback!

Service List

Service List

Filter a list of services and view the next available slot.

Intermediate.png

Intermediate

Replace Bookings Calendar page

Replace Bookings Calendar page

Replace the default Wix Booking Calendar on your site with a tailored version to better suit your needs.

Intermediate.png

Intermediate

Quick Book and Pending Appointments

Quick Book and Pending Appointments

Let customers quickly book appointments, which are then approved or declined.

Intermediate.png

Intermediate

Limit the number of bookings per contact in a week with ECOM Validations SPI

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.png

Intermediate

Custom Book flow on Booking V2

Custom Book flow on Booking V2

Let Customers Experience your swift and customized appointment booking process with Bookings V2 APIs.

Intermediate.png

Intermediate

Round Robin appointment scheduling

Round Robin appointment scheduling

Allow bookings with no staff selection, creating Round Robin scheduling - evenly spread the bookings among staff members

Intermediate.png

Advanced

Anchor 2
bottom of page