Access Keys:
Skip to content (Access Key - 0)

Hotel Class displaying as Star Icons in webConnect ODP

Product Version: v3.00, v3.01
Document Version: v1.0
Last Updated: 30/06/2015

This white paper will help you to …

  • Understand how to replace the default Hotel class text with star icons in webConnect ODP


In webConnect ODP v3.00 and above, it is possible for the Hotel Class (e.g. on the 'More Information' page) to be displayed as star icons instead of the default text. This whitepaper discusses the steps needed to make this substitution happen. It must be noted that these icons won't be displayed when the page is saved then viewed as a PDF. This is because configuration changes are made at the CSS level.

Steps Required to Change the Hotel class designation to display Star Icons

By following a few steps, it is possible to configure the Hotel class designation to display as star icons in webConnect ODP version 3.0 and above:

1) The Product and/or Supplier Content Format file needs to be changed to use the class code
In the site folder there will be ProductContent and SupplierContent template.xml files for each language that Webconnect is supporting. Each of these will need to be modified as follows:

a) Add a mapping for the class code itself, e.g. <Map name="classcode" path="Option/OptGeneral/Class" />

b) Add that to the relevant content section; for suppliers this is typically the FirstOption and you will have an entry such as: <Info name="classcode" inline="true" />
At this point if you run the supplier info you should see the class code value being displayed. Confirm that this is the case before proceeding further.

2) Change the Template to allow for the substitution 
You do this by changing the definition from inline to being a class name. Change the line that you had added to the template in step 1 to be: <Info name="classcode" valueinclass="true" /> This code will tell ODP to generate a specific class name based on the value of the class code and attach it to the data that it outputs on the moreinfo page. So in this example if the class code of the first option was 4 then the class name generated would be classcode4.

3) Images
The images that you wish to substitute have to be named to match the class codes in Tourplan.  If the site uses 1, 2, 3, 4 etc as the codes then the images will need to be named 1.jpg, 2.jpg etc.  If they use 1S, 2S, 3S, 4S etc the images will need to be names 1S.jpg, 2S.jpg etc and placed into the relevant site/look folder. It is recommended that you don't use * characters in those codes.

4) Change the styling to display the image
Add a block of styling to the site.css file in the relevant look that will translate the generated class names into images. An example if the classes were defined in Tourplan as 1, 2, 3, 4 etc would be: #productContent .classcode4, #supplierContent .classcode4 { text-align: right; background-image: url("4.jpg"); width: 105px; height: 22px; text-indent: 3000px; top: -25px; right: 0px; }

This will have to be repeated for each class value that the site uses.