Adding an Online Reservation App to Your Site - Dates Page
This page describes the /dates sub-node in the Online Reservation App. The /dates sub-node is where a visitor to your website wishing to book a hotel room will choose the dates when they will stay. Please refer to the following pages for details about the other sub-nodes:
---
Specifying dates of stay is the second step in the process a browser user will go through when booking hotel rooms online. After the user has specified the resort where they wish to stay and pressed the [Continue] (Web Text 25701) button as described here, they will be taken to the /dates sub-node where they can specify when they want to stay at the resort.
In the illustration above, the following attributes are assigned automatically by Standard ERP (i.e. you will not be able to change these attributes, but you will be able to apply styling to them in your .css file):
- <form id="selectdates"> inside <div id="online_reservation"> (used for the entire date selection area)
- <div class="calendar"> (used for the arrival date selection, including the "Arriving: " text (Web Text 25703) and the drop-down menu, and separately for the departure date selection)
- <div class="calendar_label"> inside <div class="calendar"> (used for the "Arriving: " text (Web Text 25703), and separately for the "Departing: " text (Web Text 25704))
- <select class="startdate_day"> inside <div class="calendar"> (used for the day of arrival drop-down menu)
- <select class="startdate_month"> inside <div class="calendar"> (used for the month of arrival drop-down menu. The names of the months will be taken from the record in the Days and Months setting in the System module for the Language selected by the user or for the default site language)
- <select class="startdate_year "> inside <div class="calendar"> (used for the year of arrival drop-down menu)
- <select class="enddate_day"> inside <div class="calendar"> (used for the day of departure drop-down menu)
- <select class="enddate_month"> inside <div class="calendar"> (used for the month of departure drop-down menu)
- <select class="enddate_year "> inside <div class="calendar"> (used for the year of departure drop-down menu)
- <input class="button"> inside <div class="continuebutton"> (used for the [Continue] button (Web Text 25701))
You can use the following options to change the appearance of the /dates sub-node:
- By default, the browser page displaying the /dates sub-node will be based on the Page specified in the Structure record for the "Online Reservation App" Node. Specify a Template Page on the 'Step 2' card in the Online Reservation Settings setting in the Hotel module if you would like it to be based on a different Page. In the illustration, we have specified a Template Page in the Online Reservations Settings setting so that the headline "Dates of Stay" can be displayed to the left of the date drop-downs.
- Using the Progress Element field on the 'Step 2' card in the Online Reservation Settings setting, you can add an Element to the top of <div id="webapp">. Please refer to steps 1 and 2 on the 'Resort' page for an illustrated example.
- Using the Template Element field on the 'Step 2' card in the Online Reservation Settings setting, you can specify that a header and/or footer will be added to the beginning and end of <div id="webapp">. Please refer to step 4 on the 'Resort' page for an illustrated example.
- If you do not want the "Please select the dates for staying at: Room_Location_Comment" <h2> heading (Web Text 25702) to appear, select the Template elements override built-in headings option in the Online Reservation Settings setting. This option applies to all sub-nodes in the Online Reservation App.
The user should choose arrival and departure dates from the drop-downs and then press the [Continue] (
Web Text 25701) button. They will then be taken to the /rooms sub-node where they can specify the Room Type(s) and number of Rooms that they will need (described
here). If the user presses [Continue] after choosing incorrect dates, they will be taken back to the /dates sub-node where they will be shown an appropriate error message. An incorrect date is an arrival date in the past, a departure date that is earlier than the arrival date or a departure date that is later than the Max Future Date specified on the
'Defaults Online' card in the Hotel Settings setting. The error message will be in
<div class="onlinereserror">:
You can use the
Web Texts setting to change the following texts:
| Node/Sub-Node | Default Text | Web Text Code |
| | |
| /dates | Please select the dates for staying at: [headline] | 25702 [include the colon and the trailing space, the Comment in the relevant Room Location record will be added to this Web Text as a suffix] |
| /dates | Arriving: | 25703 [include the colon if you need it] |
| /dates | Departing: | 25704 [include the colon if you need it] |
| /dates | Continue [button label] | 25701 |
| /dates | Errors occurred: | 25769 [include the colon if you need it] |
| /dates | Arrival date specified is invalid | 25771 |
| /dates | Departure date specified is invalid | 25772 |
| /dates | Arrival date cannot be in the past | 25773 |
| /dates | Departure date must be on or after arrival date | 25774 |
| /dates | Bookings can only be made until and including | 25775 |
The Online Reservation App in Standard ERP:
---
Go back to:
Online Reservation App (Online Hotel Room Booking)
