Book a Seat

Allow visitors to select and book available theater seats.

Introduction Last updated: 22 Apr 2025

Open Example Preview

About

In this example, we create a theater reservation system to demonstrate how to read and write data in a Wix collection with the Wix Data API. We retrieve and display seat data, allowing visitors to select an available seat by visual representation, and then update the collection based on the visitor’s selection.

APIs

• $w.Text API
• $w.Button API
• $w.Repeater API
• Data
• Web Methods

How we built it

We added the following to our site:

Page Elements

Home

• A repeater with containers to display the available theater seats for selection.
• Text elements to show and hide success and error messages.
• A button for reserving seats.

Collections

Theater Seats: A collection containing the theater’s seat numbers, price, and availability.

Frontend Code

Home

The code in this file handles the retrieving, displaying, and reserving of theater seats.

In this file, we:

• Define constants to visually indicate seat availability by color.
• Declare variables to hold seat data and the visitor’s seat selections.
• Set the initial states for text and button elements on the page.
• Retrieve the seat data from the Theater Seats collection and populate the repeater.
• Implement an event handler to manage visitor interactions when selecting or deselecting seats.
• Implement an event handler to send selected seat data to the backend when the button is clicked.
• Hide or show messages based on the success of the seat selection.
• Refresh the repeater by re-querying the seat data so that it reflects the latest updates.

Backend Code

reserveSeats.web.js

The code in this file manages the seat reservation process in the backend by updating the Theater Seats collection.

We defined the following method:

• reserve(): This method accepts an array of the visitor’s selected seats, updates the Theater Seats collection, and then returns a confirmation message or an error to the frontend. Elevation is necessary to allow updates to the seat availability in the collection during the reservation process, without requiring individual permissions for each visitor.

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.