Online Reservations guide for Web Developers (#OLSOLRWEBDEV01)-

You are here: Home / Control Panel / Support / Knowledgebase / Online Reservations guide for Web Developers (#OLSOLRWEBDEV01)

Online Reservations guide for Web Developers (#OLSOLRWEBDEV01)

Last updated:		Applies to:		In industries:		Of versions:		Special contents:
20120423 (Andy)		Pro, MultiUser, MultiSite, MultiView				8.1.13 (and higher)		Download the index file

This guide is intended for web developers.

Before we begin...

This guide is intended for web developers that are involved in implementing StorMan's Online Reservations system. Unlike many other myStorMan knowledgebase articles, this page is not password protected - so we welcome you to link your developer directly to this page.

Note: If you are not a web developer, or are looking for more general Online Reservation information, please refer to #OLSORS01.

How does the Online Reservations system work?

This is explained in our general article, via #OLSORS01.

Can I try Online Reservations for myself?

Yes - please refer to our Demo Storage Company website, then click Reserve a Unit to give it a try for yourself!

General notes for web developers

The Online Reservation template runs from the computer which hosts the StorMan database for the site in question. Note: If the site in question runs our StorMan MultiUser version, then any customisation files will need to be placed on the computer that runs the StorMan Server application.
As the site's copy of StorMan serves-up the reservation pages, the site in question will need a static IP address and a permanent internet connection. For more details, refer to our Online Reservations requirements.
You will need to place a Reserve or Reserve now (or similar) link or button on your client's website. The button or link can be placed anywhere on the website; we merely use the standard "A HREF" hyperlink call to link to the pages served by the StorMan application at the site. For details on this link, please refer to our the URLs to use section, below.
We do NOT recommend the use of frames or iFrames.
You may use a pop-up window if you prefer; but keep in mind that some visitors may use pop-up blockers with their web browsers.

Template files

Use the link below to download the latest version of our Online Reservation index file.
Customisation options are described in detail underneath...

Online Reservation index.shtml fileLast updated 23rd April 2012 (Andy)

Template customisation rules & guidelines

The StorMan application (running at the site) renders all of the HTML code & pages used in the Online Reservations process. StorMan references a single index.shtml file to configure META tags and stylesheet information, but all other HTML code is hard-coded into StorMan.

To change the basic default look of the Online Reservations System, edit this .shtml file and specify a stylesheet location; then create a stylesheet to suit your desired look & feel (refer to our customisation guide below).

Note: As the HTML code is hard-coded into the StorMan application, changes to this code cannot be made by you or the site.

The index.shtml file needs to be placed in the StorMan directory on the computer running the site's StorMan database...

Windows platform (StorMan standalone):
c:\Program Files\StorMan\Web\Reserve\

Windows platform (StorMan Server):
C:\Program Files\StorMan Server\Server Database\Web\reserve

Mac platform (StorMan standalone):
Macintosh HD:Applications:StorMan:Web:reserve:

Mac platform (StorMan Server):
Macintosh HD:Applications:StorMan:StorMan Server.app:Contents:Server Database:Web:reserve:

Multimedia folder paths

Folder paths for storing CSS / image files are outlined below; you may need to create the subfolders if they don't already exist.

Location to store CSS files:
\web\reserve\media\css

Location to store image files:
\web\reserve\media\images

Customising the look using a stylesheet

By editing the index.shtml file, you can tell it to reference a stylesheet file that's located somewhere within the same folder (recommended), or hosted elsewhere online (not recommended). We have included information about styles that can be applied in the table below...

CSS element / HTML tag	Information / recommendations
<html> & <body>	As expected, the dynamically generated pages are wrapped in these tags; so apply any generic styles as required. For example: Font styling, colours, line spacing, page margins, etc.
<h3> ... </h3>	This tag is used on the welcome page and it wrapped around the heading. If required, style this tag as needed.
<h4> ... </h4>	This tag is used on virtually every page, to define a subheading. If required, style this tag as needed.
<p> ... </p>	All lines of text are wrapped within this tag (excluding text that appears within a table). If required, style this tag as needed.
<div id="headerbg"></div>	This tag appears at the top of each page and can optionally be used to display a background image or picture somewhere on the page. Use CSS to set the image, position, size, location, etc as required.
<table id="error"> ... </table>	When errors appear, they will be wrapped in a table with the id 'error'. We recommend styling this ID element with a red border or red text, to attract attention when an error is triggered to appear. You may also wish to use CSS to display a warning icon or similar somewhere within the table.
<span class="note"> ... </span>	This element is wrapped around text notes. It is currently only used around the text element that informs the Customer of the supported date format (it appears next to the 'date' field).
<em> ... </em>	This style is wrapped around a number of textual elements on various pages. If left unstyled, it will merely italicise the font; but you can style this further if required.
<hr>	This element displays a horizontal line across the page, using the browser's default styling for this element. We recommend using CSS to style this to a width of 500px, aligned to the left, with a top & bottom margin of approximately 20px. You may also wish to alter the colour of this element using CSS (such as a light grey, via #CCC).
<table id="Unittable"> ... </table>	The table which lists the Berth / Unit / Vault types available for reservation is identified with 'Unittable'. You may wish to style this to set margins, padding and so forth.
<thead><th> ... </th></thead>	The header row within the abovementioned table is wrapped with 'thead' and 'th' tags to assist you in further styling these elements and differentiating the header from the rest of the table.
<tbody> ... </tbody>	The table's general body elements are wrapped in these tags to assist you in further styling these elements and differentiating the body from the rest of the table.
icon_tick.png	The 'Unittable' (mentioned above) displays an image of a tick to the right of each row to denote that the desired Berth type / Unit type / Vault type is available to the Customer. To have this image appear properly, ensure that you keep the supplied 16px X 16px "icon_tick.png" file in the /media/images/ folder. You can replace the tick icon with your own if you like, but the filename must remain exactly the same or your Online Reservations will not work.
<table id="infotable"> ... </table>	All other tables use the 'infotable' identifier. If required, style this as needed.
<td class="right"> ... </td>	A number of 'td' (table data) regions are styled with this class; we recommend creating a style element for aligning these to the right. These are only used where a currency symbol is involved (to align it to the right of a table cell).

URLs to use

When adding a Reserve Now link to the site's website, you will need to use the following URL structure in your "A HREF" hyperlink; where 'localhost' is the live IP address that is redirected to the computer running StorMan...

http://localhost:19812/4DCGI/reserve

If the site using Online Reservations runs multiple StorMan datafiles from the one location (such as a StorMan MultiView head office), then the above link will display a dropdown where the website Customer can select what site they wish to reserve a Berth / Unit / Vault at.

However, some people do not wish to display a list of sites. As such, you can link directly to a site by using the following URL structure in your "A HREF" hyperlink; where 'localhost' is the live IP address that is redirected to the computer running StorMan & 'XXXXX' is the 5 character Site Code - eg: 'SSCTY' (please ask StorMan for this code)...

http://localhost:19812/4DCGI/reserve/start?facility=XXXXX

XML file workarounds

StorMan accepts an XML file to set certain parameters in the Online Reservations process. This XML file must be named ORes.xml and needs to be stored in the StorMan\Preferences folder on the computer which hosts the StorMan datafile for Online Reservations.

As you can see in the screenshot below, there are two parameters that can be set. We recommend that you check with the site as to which options they would like to have, so that you can create the file according to their requirements. The parameters are explained after the screenshot... Online Reservations XML file

Setting a custom Deposit Amount

This parameter allows customisation of the Deposit Amount on a per-site basis. Normally, StorMan would take the Deposit amount from the Berth Types & Rates / Unit Types & Rates / Vault Types & Rates section within the StorMan program... but if the XML file exists and the <Deposit> node exists inside said file, then StorMan will use this Deposit amount for Online Reservations instead.

The code for this is customisation appears below; where 'XXXXX' is the 5 character Site Code - eg: 'SSCTY' (please ask StorMan for this code)...

<Deposit>
     <XXXXX>
          90
     </XXXXX>
</Deposit>

If a site runs multiple site datafiles from the one StorMan software program (eg: StorMan MultiView), then you can have multiple sites listed in the one XML file - each with their own deposit amount. Here's an example of listing multiple sites in the XML file... <Deposit>
     <SSCTY>
          90
     </SSCTY>
     <SSLTG>
          25
     </SSLTG>
     <SSHJJ>
          50
     </SSHJJ>
</Deposit>

Note: If you run multiple sites but only list one of them in the XML file, then only the one listed will use the custom deposit amount - all others will use whatever is setup in StorMan under Berth Types & Rates / Unit Types & Rates / Vault Types & Rates.

Whether or not a deposit charge should be created

This parameter has been provided because some sites may wish to show the deposit amount on the screen (so the user knows how much the deposit is going to be), but the site may not wish to add this charge to the Customer's actual reservation account in StorMan.

By default this is set to true (so if you don't add this code to the XML file or if there is no XML file, then it will be set to true). However, if you wish to disable the adding of a deposit charge on the Customer's account, set this to 'FALSE', as shown below...

<ChargeTransaction>
     <Create>
          FALSE
     </Create>
</ChargeTransaction>

Ready to test it?

Once setup, you should run the following tests...

Start by trying to access the StorMan Webserver on the client's local LAN, by browsing to http://internal.IP.address.of.storman.server:19812 - if the connection is successful, you should be prompted with a "Login for StorMan.4DC" dialog (which you can close; if the prompt itself appears, then all is OK). If you DON'T see this prompt, check to ensure that the StorMan Webserver is actually running (in StorMan, select File, then Start Webserver).
If the above works, move on to the WAN, by browsing to http://client.external.ip.address:19812 - if the connection is successful, you should be prompted with the same "Login for StorMan.4DC" dialog from above (which you can close; if the prompt itself appears, then all is OK). If you DON'T see this prompt, then the port has not been forwarded properly through your router or firewall and you will need to correct this.
If the above works, visit the client's Online Reservations URL (http://client.external.ip.address:19812/4dcgi/reserve) to ensure the pages load correctly, etc.

Further assistance

If you require further information, please contact your client, or contact StorMan Software directly.

Article tags:

How did we do?

online reservations guide for web developers, online reservations guide for web designers

Did we miss a tag?
Tags improve search results. If you think this article needs more tags to help index & identify it, please suggest some using the form to the right...