Tutorial: How to customize the look&feel of the booking process (2 / 4)

Tutorial Table of Contents

part 1: Schemes in advanced integration
part 2: Customizing the content with templates
part 3: Customizing the stylesheets
part 4: Customizing the reservation form design
Part 2 of 4: Customizing the content with templates
The reservation process involves many different steps, for example it can start with the availability search or resource listing, then the customer can either go directly to the booking form or view the detail pages of your resources, only then passing on to the booking form. Also, once the form is completed, it's possible to have the customer pick additional products, review the shopping cart and add other bookings to it, make an online payment, verify their email address, and so on.. in total there are 17 templates, each of which is a page displaying the content for a specific step in the reservation. Of course it's completely up to you to determine the desired process, you don't have to use all these steps (see Q169 for more about the steps of the booking process).

You have a possibility to design each template by specifying the HTML code (using a smart HTML source code editor or a WYSIWYG editor in case you don't want to work with HTML). Of course this code must be able to get information about the current site, resource or reservation, and this is why we have hundreds of tags which are replaced with actual data (see Q256 for more info about the planyo tags). Other tags allow you to format data or even include different versions of content based on conditions defined by you.

Note that the templates only work with advanced integration (where the booking process takes place on your website). Simple integration uses standard planyo design and you have only a slight possibility of influencing the look&feel.

Some templates, such as the resource details template, are a single block of code which is embedded on your page, so in such case the template simply represents all information about the resource that you want to present to the visitor, including photos, description, availability calendar, link to the booking form etc. Other templates, such as the resource listing, are more complex because they not only include a single block of code (used normally to output a header and/or footer) but also must include multiple blocks, one per item listed (in this case one per resource). The way this works is that there's always an obligatory tag to be placed in the single block (called outer template), for example $(resources). This special tag will be replaced by the blocks defined by the inner template (with the resource-specific information). The inner template is usually simply a block of HTML code, so you can use both the WYSIWYG editor or the HTML source editors to edit it (as you can with the outer template). Another possibility you have (you must switch to the WYSIWYG editor to see it) is to have a table created for you. Each item in the listing then becomes a table row. You can of course define the header row, number of columns and the contents of each column. The inner template has access to more tags than the outer template (this is always precisely indicated under each template item), for example in case of resource listing, the outer template cannot use resource-specific tags while the inner template can because the resource context is defined.

Note that by clicking the Import from scheme backup button, you can do an import of just a single template from your existing scheme backup. This is especially useful if you switched to a new scheme after adding your own customizations to the previous one. You also have the Reset button which will reset the template to the scheme's default. Preview will show you a quick preview of your template.
Continue to part 3 (Customizing the stylesheets) >>