Directory

Top 50

JavaScript : Dynamic Window Handling: E-Commerce Example
[ Contents ]
Dr Benton

Fundamentals and Main Page

The fundamentals of our imaginary e-commerce site are simple:

  • The main window allows the selection of products.

  • Two child windows are provided for tracking the current order; their respective content is changed dynamically from the main window to reflect the customer's purchases:

    • - The first window lists the selected products.

    - The second window displays the total cost of the products purchased.

  • On the main window, the button Empty basket allows the user to cancel the selected products; the two child windows are then closed.

Source code. The complete HTML code for the e-commerce page is here!

In order to purchase the products, the visitor will have to click on the corresponding images. Here is the code of our base page.

<HTML>
  <HEAD>
    <TITLE>Go shopping!</TITLE>
  </HEAD>
  <BODY>
    <H1>Make your purchases!</H1>
    <A HREF="javascript:void(0)"><IMG SRC="chemise.gif" BORDER=0></A>Folder - £2.00<BR><BR>
    <A HREF="javascript:void(0)"><IMG SRC="outils.gif" BORDER=0></A>Toolbox - £7.00<BR><BR>
    <A HREF="javascript:void(0)"><IMG SRC="zip.gif" BORDER=0></A>ZIP Cartridge - £8.00<BR>
    <FORM>
      <INPUT TYPE="button" VALUE="Empty basket">
    </FORM>
  </BODY>
</HTML>
For our link references we use our usual javascript:void(0) call rather than a URL. This way, we call up a JavaScript function instead of loading a page. We will define the called functions later on. As for the button Empty basket, this is created with a simple <FORM> tag.



Contents
1   2   3   4 
Opening and Closing Windows