Book a Hike

Allows visitors to book a hike with the Wix Bookings API.

Intermediate Last updated: 22 Apr 2025

Open Example Preview

About

In this example, we demonstrate how to create a customized booking experience using the Wix Bookings API. Visitors can select a hike, enter their contact details, and proceed to checkout easily.

Before you begin

To use this example:

• You must have at least one Bookings service set up.
• Your site must have a payment provider connected.

APIs

• $w.Button API
• $w.Text API
• Bookings
• Ecom
• Web Methods

How we built it

We added the following to our site:

Page Elements

Home Page

• A repeater for displaying hike options available for booking.
• Buttons for navigating to the booking form.

Services page (dynamic)

• Text elements for displaying hike details, such as name, cost, and description.
• A date picker element for visitors to select a date for booking the hike.
• Text input elements for visitors to enter their contact details, such as name, email, phone number, and number of participants..
• A button for initiating the checkout process when creating the booking.

Frontend Code

Home Page

On the home page, the repeater is populated with hike options to book by connecting it to the Wix Bookings Services app collection. The “Book Now” buttons direct the visitor to a dynamic page with the relevant hike’s details.

Services page (dynamic)

The code in this file initializes the page’s elements and retrieves availability data for the selected hike from the backend.

In this file, we:

• Load the relevant details of the selected hike.
• Set event handlers to collect the contact details from the form’s user input elements.
• Retrieve the dates and times available for the hike from the backend, and then populate the date picker element with those options.
• Handle errors for cases where the booking process fails and display error messages.

Backend Code

wixBookings.web.js

The code in this file manages the booking process using the Wix Bookings API. We defined the following methods:

• queryAvailability(): This method queries and returns the available booking slots for the specified hike.
• createBooking(): This method accepts booking details collected from the booking form and creates a booking. It then returns the result to confirm that the booking was successful.

wixEcom.web.js

The code in this file handles the checkout process using the Wix Ecom API. We defined the following methods:

• createCheckout(): This method begins the checkout process, allowing visitors to complete their payment for the booking.
• getCheckoutUrl(): This method retrieves the checkout URL for the booking transaction, which directs visitors to pay for their booking.

Code Snippets

Get Help

Join the community

Join the Wix Studio community on Discord, where experienced developers and fellow creators come together to share tips, troubleshoot issues, and collaborate.

Hire a developer

Building a coded solution on your own can be challenging. Let an experienced Wix developer build it for you, so you can keep working on your site or business. Visit the Wix Marketplace to find a trusted developer.