Updating the Basket and the Total

To update our child windows when a product is selected, we use the function ajoute_objet which will dynamically write the code in the windows.

This function receives two arguments: the chosen item and its price. This call will occur when the onClick event associated with each of the linked images is detected.

Change the three links of the main page as follows:

<A HREF="javascript:void(0)" onClick ="ajoute_objet('chemise',25);"><IMG SRC="chemise.gif" BORDER=0></A>Folder - £2.00<BR>
<A HREF="javascript:void(0)" onClick ="ajoute_objet('outils',70);"><IMG SRC="outils.gif" BORDER=0></A>Tool box - £7.00<BR>
<A HREF="javascript:void(0)" onClick ="ajoute_objet('zip',85);"><IMG SRC="zip.gif" BORDER=0></A>ZIP Cartridge - £8.00<BR>

Then add the function ajoute_objet in the page head:

1: function ajoute_objet(type,prix)
2: {
3:   switch (type)
4:   {
5:     case "chemise" :
6:       caddie.document.write('<img src="chemise.gif" width=16 height=16> Folder<BR>');
7:       caisse.document.write('<img src="chemise.gif" width=16 height=16> '+prix+' £<BR>');
8:       break;
9:
10:     case "outils" :
11:       caddie.document.write('<img src="outils.gif" width=16 height=16> Toolbox<BR>');
12:       caisse.document.write('<img src="outils.gif" width=16 height=16> '+prix+' £<BR>');
13:       break;
14:
15:     case "zip" :
16:       caddie.document.write('<img src="zip.gif" width=16 height=16> ZIP Cartridge<BR>');
17:       caisse.document.write('<img src="zip.gif" width=16 height=16> '+prix+' £<BR>');
18:       break;
19:   }
20:
21:   caisse.document.formu.total.value = eval(caisse.document.formu.total.value) + eval(prix);
22:   setTimeout("caddie.focus()",10);
23:   setTimeout("caisse.focus()",500);
24: }

Be careful with the line numbers. The above code lines have been numbered to simplify our descriptions. You must remove this numbering from your code.

Our function is made up of three parts:

• In lines 3 to 19, a switch structure containing three case expressions inserts the corresponding HTML code for the chosen product in the windows identified by caddie and caisse.
  
  
The caddie window receives the image and the product name, whereas the window caisse receives the image and the product price.


• In line 21, the price shown in the text field of the caisse window is updated (the price of the selected product is added).
  
  
Keep arguing ... Write a generic function that receives arguments rather than a different code for each of the values that the function might process.

In our example, we can add a product to our e-store without having to change the code of our JavaScript functions. Adding a link and calling the function while giving it the product name and price will suffice.


• In lines 22 and 23, the method focus successively activates the windows caddie and caisse (making them appear in the foreground).
  
  
The function setTimeout introduces a time interval before making the child windows appear in the foreground. Why is that? Because browsers are not designed for speed and handling windows is not their cup of tea. Introducing a tea break will allow your visitors to take a breath and ensure that the windows will appropriately end in the foreground.


Form handling inside windows. Proceed with caution if you are dealing with forms contained in windows. Netscape Navigator needs to know the exact location of the form. Thus, the following line of code indicates that the form is in the child window caisse associated with the main document document:

caisse.document.formu.total.value = eval(caisse.document.formu.total.value) + eval(prix);

Internet Explorer is less demanding but it is advisable to follow this rule if you want your code to work with both browsers.