Velo: Ideas for Working with Your Wix Bookings App Collections

This article presents some ideas for how you can enhance your Bookings site with Velo.

Throughout this article we refer to this site to illustrate the process. It is a travel site that offers tours in different locations. It features a page that lists all the services at each location as well as a customized booking page for each service.

Specifically, we'll describe:

• The collections we created and how we connected them to our Wix Bookings App Services collection.
• The customized pages we designed to showcase our services using information from our collections, and how we linked them to existing pages from the Bookings app.
• The form we built to get reviews from our customers and how we displayed those reviews on our page.

Most of the ideas in this article do not require any code. The page that displays the reviews and the form that lets visitors add reviews, however, do require some simple code that we include here in the article. You'll be able to copy and paste the code onto your page and make some minor adjustments to get it to work.

New Collections

The first thing we did was to create new collections to store the information we wanted to showcase on our site. We used reference fields to connect our new collections to the Services collection that comes from the Wix Bookings app. Later in this article, you'll see how we filtered datasets based on these reference fields so that our pages display only relevant information each time.

Locations collection

This collection stores the locations where our services take place. It includes images, various descriptions, and a field for the dynamic page URL. We'll use this collection to create a dynamic item page for our locations.

Service_Locations collection

This collection maps each of our services to its location using two reference fields, one pointing to the Services collection and the other to the Locations collection we just created. Later in this article, you'll see how we used this collection when we created the Locations dynamic item page to display the services available at each location.

Extra_Service_Info collection

This collection contains additional information about each of our services, including the pickup point, target audience, time of day, and additional images. Here again we used a reference field to connect this information to each service in the Services collection. Later in this article we'll use this collection when we create our customized booking page.

Service_Reviews collection

This collection stores the reviews left by users for each service. This collection also has a reference field pointing to the Services collection as well as fields for storing the date the review was submitted, text of the review and information about the reviewer.

We made sure to set this collection's permissions so that visitors can create content for it.

Master/Detail Pages

Our demo site has 2 master/detail pages, both of which are also dynamic item pages. Both pages use multiple datasets that are filtered by reference fields. See this article for more information.

• The first page is connected to the Locations collection and displays information about our locations and the services offered at each one. 
• The second page is a customized booking form connected to the Services collection. It lists additional information for each service as well as user feedback for each service. 

Locations Page with Details about the Services

To view this page, from the home page of the demo site, click the "Explore" button in the "Portland Metro Area" item. This page you are now viewing is a dynamic item page connected to the Locations collection. Note how in addition to displaying information about the Portland location, it also lists the services offered there. Let's see how we set this page up.

1. Starting from our Locations collection, we created and designed the dynamic item page, using text elements and images connected to the fields in the collection.
2. We added a second dataset to the page, connected it to the Service_Locations collection, and then filtered it by its "Location" reference field. This causes the dataset to only display those items whose location matches the current location on our dynamic page, in this case Portland Metro Area. (See here for details on how to set up this filter.)
3. We connected a repeater to this filtered dataset. Because the reference field in the Services_Locations collection points to the Services collection, we can connect elements to fields in the Services collection. This is true even though our page doesn't have a dataset connected directly to that collection. In other words, the image, service name, and price information in the repeater come directly from the information we added in our Bookings app. 
4. The "Book It" button in the repeater links to our customized booking page. 

This is what our page looks like in the Editor. Elements connected to the "Locations" dataset are marked in red. The repeater and all its elements are connected to the filtered "Services_Locations" dataset and are marked in blue. 

Customized Booking Page with Feedback

From the Portland Metro Area page, click the "Book It" button under "Food Cart Tastings" to go to the customized booking page for that service. This is also a master/detail dynamic item page, but with a twist: it displays 2 sets of details

• The first set of details is the additional information displayed at the top of the page.
• The second set of details is the reviews displayed at the bottom of the page.

Additional Service Information Details

The top part of the Services dynamic item page displays the information we stored in the Extra_Service_Info collection. We built it much the same way as the previous page.

1. Starting from the Wix App Services collection, we created and designed the dynamic item page. The "Book It" button is linked to the "Booking Flow Entry URL" field in the Services collection. This means that when our visitors click "Book It," they end up at our regular Wix Bookings App calendar page.

2. We added another dataset to the page and connected it to the Extra_Service_Info collection. We filtered this dataset by its "Service" reference field. Then we connected elements to this filtered dataset. The elements under "When," "For Who," and "Pickup" are connected directly to our Extra_Service_Info collection, as are the images at the bottom of the page.

   

Review Display Section

The review section of the customized booking page is connected to the Service_Reviews collection. It displays the reviews received for this service and a form for getting reviews. This part of the page requires some code to make it work.

1. We added a third dataset to the page, connected it to the Service_Reviews collection, and then filtered it by its "Service" reference field. Because we will end up adding 2 datasets that point to the same collection, we renamed this first one to "Display Reviews" to make it meaningful.
2. In order to display the total number of reviews we've received, we added a text element to our page and wrote the following code to get the total count and then display it in the element.

1
$w("#displayReviews").onReady(() => {
2
    let count = $w("#displayReviews").getTotalCount(); 
3
    $w('#reviewsCount').text = (count + " Reviews")
4
});

1. We connected a repeater to this dataset, attached text elements to it, and connected them to the same dataset in order to display the text of the review and name of the reviewer. 
2. In order to display a formatted version of the date, we attached a text element to the repeater and used the following code. 

1
$w('#reviewRepeater').onItemReady(($item, itemData, index) => {
2
   $item('#dateDisplay').text = itemData.review_date.toLocaleDateString("en-US");
3
})

1. The "Book It" button links to the Wix Bookings App calendar page. In its Connect Panel, it appears as the "Booking Flow Entry URL" dynamic page.

Form for Submitting Reviews

At the bottom of the customized booking page is a form where visitors can submit reviews for the service being displayed on the dynamic item page. This is how we created it.

1. We added a 4th dataset to the page, connected it to the Service_Reviews collection, and set its mode to "Write-only." We called it "Get reviews" to differentiate it from the "Display reviews" dataset we added in the previous section.
2. We added 3 input elements and connected them to the appropriate fields in the dataset. We also added a submit button and configured it to remain on this page after submit.
3. We wrote the following code to include today's date and the service being reviewed in the data being saved to the collection.

1
$w('#getReviews').onBeforeSave(() => {
2
    $w('#getReviews').setFieldValue('service', $w('#dynamicDataset').getCurrentItem()._id);
3
    $w('#getReviews').setFieldValue('review_date', new Date());
4
})

1. We added the following code to refresh the dataset that is displaying the reviews after the new item is saved to the collection. This means that the new review will appear on the page after it has been submitted.

1
$w('#getReviews').onAfterSave(() => {
2
    $w('displayReviews').refresh();
3
})