The CalendarFirst feature reverses the booking process in which an order is made. Instead of selecting the desired product first, customers choose
their preferred tour language (if available),
fixed or flexible ticket type (if available),
their preferred dates,
ticket types.
That way, customers only see products that match their configuration.
This article details what are the steps to achieve a calendar-first checkout experience.
Add Feature to Data-Config
Add the following code to the data-config of any page or button where you want to allow the checkout to display with the calendar first.
"features": {
"calendarFirst": {
"enabled": true
}
}
Alternative Product Filters
The volume and complexity of products can significantly impact checkout performance. You may want to use specific attributes to filter which products appear in the checkout widget.
📗 TIP
Learn more in the article.
CalendarFirst Flow
Configure Order
A customer opens your Ventrata checkout, or presses the checkout button.
The Tickets page is shown first. Here, the customer configures their booking using the following settings:
|
|
📒 NOTE
The ticket names are unified by tier. Therefore, the tiers used across your calendar-first category are listed in ticket selection instead of all the names given to your tickets.
Tickets
📒 NOTE
The calendar in the CalendarFirst feature DOES NOT contain prices or Sold Out tags. This is because at this point the customer has not select a product yet and both information pertain to specific products and their options or tour times.
View Product Information
Based on the customer's configuration, products and options are filtered to display only matching items.
 Fixed Date Ticket | 
Flexible Date Ticket |
Select Product Tour
The customer then selects their preferred tour time and presses the Continue button. If no tour times are available, a Select button is shown instead.
Depending on your product's configuration, the next pages may contain
Pickups
Combination or Upsell offers
Extras - while normally extras, are listed below the tickets of a selected product, in a calendar-first setting, they are displayed on a separate page after a product is selected.
 Search by Product (regular flow) | 
Calendar First Flow |
Checkout
The checkout process then continues as usual, with the customer filling in their details and concluding the order by paying for it.
Product Card Information
Learn more about the elements that make up product information and where you can configure them.
📗 TIP
Learn more in this article.
Show Units After Product Selection
Customise the CalendarFirst checkout by moving ticket selection to a later stage in the booking process using the showUnitTypes attribute.
📗 TIP
Learn more in this article.
Additional Information
Switch Between Searches
Note also the option to switch between calendar-first and regular web checkout. This is achieved by using the Browse all products button at the top of the checkout. The customer can then switch back to search by date first.
📒 NOTE
Switching between searching by product or by date is only possible until an order is made. Once a product is selected, the button at the top disappears.
Switch Between Searches
Cross-Feature Compatibility
Combine the CalendarFirst with other web checkout features to create a seamless booking experience for your customers.
PreselectFirstAvailableDateModalCalendar + PreselectFirstUnit
PreselectFirstAvailableDateModalCalendar + PreselectFirstUnit
When both PreselectFirstAvailableDateModalCalendar and PreselectFirstUnit are used together, the order configuration is preselected for the customer and the filtered products are presented to them. They can then tweak the configuration to suit their preference.
📗 TIP
Learn more about the PreselectFirstUnit feature.
"features": {
"calendarFirst": {
"enabled": true
}
}
"preselectFirstUnit": true,
"preselectFirstAvailableDateModalCalendar": true
}
PreselectFirstAvailableDateModalCalendar + PreselectFirstUnit
Multibooking
Multibooking
Use to allow customers make multiple bookings in a single order. The Continue shopping button appears on the Checkout page below the selected product. This button allows the customer to jump back to the order configuration and make a new booking.
Add the following piece of code into your data-config of a page or button:
"multibooking": true,
"features": {
"calendarFirst": {
"enabled": true
}
}
Multibooking
Enabling the Multibooking feature also enables the bottom bar where the customer can see the individual bookings, time remaining to complete the order and total balance.
Other Ventrata Features
Other Ventrata Features
The CalendarFirst feature is can be used in combination with most Ventrata checkout features, EXCEPT
To use our other features, simply add them into the features object in the data-config. Please refer to the documentation for each web checkout feature.
📒 NOTE
The MultiBooking feature is an exception. To enable the feature, add "multibooking": true directly in the data-config. Please follow the documentation for more information.