JavaScript for E-Commerce

Back | Contents | Next
Please note that this tutorial was first published in the year 2000, and is based on work conducted between 1997 and 2000. While we trust that it still constitutes useful tutorial material, it should not necessarily be construed as to impart best practice in the year 2017. For more details please see this blog post.

The Ordering Process - Modifications to index.html

We have added six methods to the orderList object - one is for dealing with checkboxes, four generate an HTML page containing a list of items to order, and the last is a dummy function that will eventually be used for finalizing the order. Additionally, a couple of the existing methods have been modified slightly. We have also added another frame (orderSummaryFrame) to the frameset definition.

Source

New or modified code is displayed in bold text.


<html>

<head>

<title>FOMS</title>

<script>
<!--
function makeEmptyArray() {
    this.count = 0;
    return(this);
}

function item(productType, id, name, price) {
    this.productType = productType;
    this.id = id;
    this.name = name;
    this.price = price;
    return(this);
}

function olAddItem(productType, id, name, price) {
    this.items.count++;
    this.items[this.items.count] = new item(productType, id, name, price);
    this.print();
}

function olRemoveItem(id) {
    var index = 0;
    for(var i = 1; i <= this.items.count; i++) {
        if(this.items[i].id == id) {
            index = i;
            break;
        }
    }
    if(index) {
        for(var i = index; i < this.items.count; i++) {
            this.items[i] = this.items[i+1];
        }
        this.items.count--;
    }
    this.print();
}

function olClear() {
    this.items.count = 0;
    if(this.itemsVisible) {
        for(var i = 0; i < top.navFrame.itemFrame.document.itemForm.elements.length; i++) {
            top.navFrame.itemFrame.document.itemForm.elements[i].checked = false;
        }
    }
    this.print();
}

function olCheckItems() {
    if(this.itemsVisible) {
        for(var i = 0; i < top.navFrame.itemFrame.document.itemForm.elements.length; i++) {
            for(var j = 1; j <= this.items.count; j++) {
                var checkID = top.navFrame.itemFrame.document.itemForm.elements[i].name.substring(4, top.navFrame.itemFrame.document.itemForm.elements[i].name.length);
                if(this.items[j].id == parseInt(checkID))
                    top.navFrame.itemFrame.document.itemForm.elements[i].checked = true;
            }
        }
    }
}

function olPrintItems(doc, productType) {
    var first = true;
    var done = false;
    for(var i = 1; i <= this.items.count; i++) {
        if(this.items[i].productType == productType) {
            if(first) {
                doc.writeln("<tr><td width=\"50\">&nbsp;</td><td colspan=\"3\">");
                doc.writeln("<b>" + productType + "</b></td></tr>");
                first=false;
            }
            doc.writeln("<tr><td>&nbsp;</td><td width=\"50\">&nbsp;</td><td width=\"300\">");
            doc.writeln(this.items[i].name);
            doc.writeln("</td><td width=\"60\" align=\"right\">");
            doc.writeln("$" + this.items[i].price + "</td></tr>");
        }
    }
}

function olPrintTotalPrice(doc) {
    doc.writeln("<tr><td colspan=\"3\"><b>Total:</b></td><td align=\"right\"><b>");
    var totalPrice = 0;
    for(var i = 1; i <= this.items.count; i++) {
        totalPrice += parseFloat(this.items[i].price);
    }
    var totalPriceStr = "" + totalPrice;
    if(totalPriceStr.charAt(totalPriceStr.length-2) == '.') totalPriceStr += "0";
    if(totalPriceStr.charAt(totalPriceStr.length-3) != '.') totalPriceStr += ".00";
    doc.writeln("$" + totalPriceStr + "</b></td></tr>");
}

function olPrintOrderTable(doc) {
    doc.writeln("<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr><td colspan=\"4\">");
    doc.writeln("<b>Items Selected</b></td></tr>");
    this.printItems(doc,"CDs");
    this.printItems(doc,"Records");
    this.printItems(doc,"Tapes");
    this.printTotalPrice(doc);
    doc.writeln("</table>");
}

function olPrint() {
    top.orderSummaryFrame.document.open("text/html");
    top.orderSummaryFrame.document.writeln("<body>");
    if(this.items.count > 0) {
        top.orderSummaryFrame.document.writeln("<table width=\"100%\" border=\"0\">");
        top.orderSummaryFrame.document.writeln("<tr valign=\"top\"><td>");
        this.printOrderTable(top.orderSummaryFrame.document);
        top.orderSummaryFrame.document.writeln("</td><td align=\"right\"><form>");
        top.orderSummaryFrame.document.writeln("<input type=\"button\" value=\"Order Now\" onClick=\"top.myOrderList.order();\">");
        top.orderSummaryFrame.document.writeln("<br><br><input type=\"button\" value=\"Clear\" onClick=\"top.myOrderList.clear();\">");
        top.orderSummaryFrame.document.writeln("</form></td></tr></table>");
    }
    top.orderSummaryFrame.document.writeln("</body>");
    top.orderSummaryFrame.document.close();
}

function olOrder() {
    alert("This is where we will be finalizing the order");
}

function orderList() {
    this.items = new makeEmptyArray();
    this.addItem = olAddItem;
    this.removeItem = olRemoveItem;
    this.clear = olClear;
    this.checkItems = olCheckItems;
    this.printItems = olPrintItems;
    this.printTotalPrice = olPrintTotalPrice;
    this.printOrderTable = olPrintOrderTable;
    this.print = olPrint;
    this.order = olOrder;
    this.itemsVisible = false;
}

var myOrderList = new orderList();
//-->
</script>

</head>

<frameset rows="*,50">
    <frameset cols="255,*">
        <frame name="navFrame" src="navframe.html">
        <frame name="contentFrame" src="main.html">
    </frameset>
    <frame name="orderSummaryFrame" src="ordersummary.html">
</frameset>

</html>
			

Description

Modifications To The orderList Object

We have added six new methods to the orderList object: checkItems, printItems, printTotalPrice, printOrderTable, print and order; and one member variable called itemsVisible.

itemsVisible is set to true when the customer is viewing a list of items in a cateory (item-cd-blues.html etc) and false when they are not.

We have also modified the existing addItem, removeItem and clear methods. Specifically, each time one of these methods is called, it in turn calls the new print method to update the list of selected items. Additionally, the clear method will uncheck the checkboxes next to any selected items in the category frame.

The checkItems Method

As the customer navigates around the shop, they may go to one category and select some items to order, then go to another category, then return to the first category. When they return to the first category, we need to recheck the checkboxes next to any items they have ordered. This is what the checkItems method does. It is called by the JavaScript code in the item-cd-blues.html, item-cd-techno.html, ..., item-record-classical.html files.

The print, printOrderTable, printItems and printTotalPrice Methods

The print method dynamically creates an HTML document in the orderSummary frame which contains a list of items ordered, and two buttons labelled "Order Now" and "Clear". The "Order Now" button calls the order method, and the "Clear" button calls the clear method.

The list of items ordered is broken up by product type, and will look something like this:

Items Selected
CDs
Penyon - Some People $10.00
Sobriquet - People Don't Go Out To Clubs To Get Laid $10.00
Total: $20.00

The print method creates the HTML document, and puts in the "Order Now" and "Clear" buttons. It calls the printOrderTable method to print the actual list of items.

The printOrderTable method calls the printItems method three times - one for each of the three product types (CDs, Records and Tapes). It then calls the printTotalPrice method which loops through the items adding their prices to a total, which is printed at the bottom of the list.

The printItems method loops through all items selected but only displays the items matching the product type that was passed in by the printOrderTable method. These product types are literal strings, and match those defined in the item-cd-blues.html, item-cd-techno.html, ..., item-record-classical.html files.

The order Method

The order method currently does nothing more than display a message box. It will be replaced with something more useful later.

Modifications To The frameset Definition

A frame for the list of items selected has been added at the bottom of the screen by inserting another frameset definition around our existing one. The name of the new frame is "orderSummaryFrame". The HTML file initially loaded into this frame is called ordersummary.html, and is an empty HTML document. For the sake of completeness, the source is listed here:

<html>
<body>
</body>
</html>

Back | Contents | Next

This tutorial has been translated to Serbo-Croatian language by Jovana Milutinovich from Webhostinggeeks.com.

This tutorial has been translated to Slovak by Juraj Rehorovsky from Coupofy team.

If you find this tutorial useful and want to show your apprectiation, a small donation is most welcome, either in Bitcoins to 19QpWDmZPmTqawcr8VsXcbdc4Znq1ecrza, or via PayPal.