WebsiteX5.info - The ultimate guide for Incomedia's WebsiteX5

Adding the new functionality to your product pages
The necessary files are in place. Now you can make the changes to your product pages:
Go to your project in WebsiteX5 and open the Map creation dialog. Select the page where you describe your products (or one of the pages if you have more than one).

Click on the Page Properties dialog in the toolbar and go to the 'Advanced' tab and Add the following code to the page header:

<script src="res/x5products.js" type="text/javascript"></script>
<script src="res/x5cart.js" type="text/javascript"></script>
<script src="js/x5cartextra.js" type="text/javascript"></script>

This pulls in the WebsiteX5 shopping cart functionality and the extra function.

Click on OK and open the page.

For each product you will have to add a HTML Code object block to the page. For this you might have to re-arrange your webpage, splitting your text over more than one text block. On each place where you want to order products add a HTML block and double click on it to open the editor.

Add the following code to the HTML Object block:

<div style="overflow:hidden">
<input type="text" id="qty1" value="1" size="2">
<input type="image" src="js/cartadd.gif"
onclick="imCAddProdExtra('kh','dg','qty1')" >
</div>

Explanation:

• <div style="overflow:hidden"> makes that no scroll bars are shown when the HTML Code object is a bit to small.
• The input type="text" is the input field. It is 2 characters wide and has a default value of 1. The id is very important. It forms the link between the input field and the button.
• The input type="image" is the image button. When you click on this button the extra function is executed which places the products in the shopping cart. This function has three parameters:The first parameter ('kh' in the example) is the code of the product category as defined on the e-commmerce screen. The second ('dg') is the code of the product within the product category. The third is the id of the input field in which your customer has entered the number of products he wishes to order.

When you have completed the HTML Code block it will looks like this:

Note that the height of the block is set to 25 pixels. You might have to experiment with this value.

For each product you will have to add a HTML Code block with the code, but you will make the following adjustments:

• Each input field has an id (in this example this is 'qty1'. This id is used as a parameter for the function which is executed when the customer clicks on the shopping cart image. This value must be unique for HTML Code object for each page. So if you have more than one item on your page change this in qty2, qty3 etc. (and don't forget to do both occurrences in each code block!)
• Of course you want to order a different product for each field and shopping cart. The first and second parameter of the function call are the product category and the product id. You can find the values you have to use here in the print of the file x5product.js you have made previously.In this example you will have to use "kh","dg for Dummy product 11, "kh","wz" for Dummy product 12, "kh","af" for Dummy product 13, etcetera...

<< Previous page

Next page >>