The "total" function of a shopping cart lets the viewer see the total cost of the order. This helps them in making add/remove decisions and is included in about every shopping cart you'll see. Here's the example we'll be making in this tutorial.

You'll notice that the order pages are the same as in the previous tutorials. The difference is the "Total=" line on the shopping cart page that reads our cookie and displays the cost of the total order. This is a simple function to add to your shopping cart. You don't really have to make a function. You just need to add a running total to your display.

In adding a total function, I only had to add code to the shopping cart page. I didn't have to make any changes to the order pages.

Changes To The Arrays

To save a lot of headaches, we'll begin making a total function by converting the cash values in our "item_price" and "shipping" arrays. The current values are strings that can't be used in mathematical processes like addition. We need to remove the quotation marks and "$" signs from these array elements and make them pure numbers that can be used mathematically.

var item_price = new Array();
item_price[0] = 12.00;
item_price[1] = 25.00;
item_price[2] = 20.00;
item_price[3] = 10.00;
item_price[4] = 15.00;
item_price[5] = 12.50;

var shipping = new Array();
shipping[0] = 2.00;
shipping[1] = 3.00;
shipping[2] = 2.80;
shipping[3] = 5.00;
shipping[4] = 6.00;
shipping[5] = 1.00;

Nothing complex about the above. We just changed our array elements from strings to pure numbers. This will make it easier to do the adding required to maintain a running total.

Making The Running Total

We need to do two things to make the running total for our "Total" display. 1) We need to make and initialize a variable to hold the total. And, 2) we need to have this total keep adding to itself to create a grand total.

We don't need to make a new function to do this. We can do it right in our display code. All of the information we need is already on the cookie and in our item arrays. We want the total to display only when items are ordered, so we'll add our total code to the ELSE statement in our display.

else{

var total = 0;

for (i = 0; i < item_number.length - 1; i++){
document.write ("<input type=\"checkbox\"
name=\"orderboxes\" checked ");

...

The above declares and initializes the new variable we need. I called mine "total". You can use whatever variable name you'd like. Now lets get it to add to itself to make a running total. This is done at the bottom of the display loop, but still inside the loop.

else{

var total = 0;

for (i = 0; i < item_number.length - 1; i++){

document.write ("<input type=\"checkbox\" name=\"orderboxes\" checked ");

document.write("value=\"" + item_number[i] + "\">");

document.write("<b>" + item_name[item_number[i]] + "</b> &nbsp;&nbsp;");

document.write("<i>price: $" + item_price[item_number[i]] + "</i> &nbsp;&nbsp");

document.write("shipping: $" + shipping[item_number[i]] + "<br><br>");

total = total + item_price[item_number[i]] + shipping[item_number[i]];

}//ends display FOR

Notice that the placement of the running total is crucial. It must be inside the loop to include the price and shipping cost for each item ordered. Since this statement only makes a grand total, and not the display, it could be placed just about anywhere in the display's FOR loop. I stuck it at the end.

Displaying The Total

The placement of the visible total display must occur outside the loop and after it has run. If the display were coded inside the loop, we'd have a different "Total" line for each item (iteration of the loop).

...

document.write("shipping: $" + shipping[item_number[i]] + "<br><br>");

total = total + item_price[item_number[i]] + shipping[item_number[i]];
}//ends FOR

//Total document.write("<h4 align=\"center\">Total - $" + total + "</h4>");

}//ends main display ELSE

It's important to note that the display of the total is coded after the FOR loop is closed, but still inside the ELSE statement that makes the main display.

When an item is removed and the cookie reset and page reloaded, the total will re-initialize to zero and the total will automatically be recalculated to the new value.

Alternatives

There are a variety of ways to add a total to shopping carts. Most variations are merely differences in the display, not in making the running total needed for the display. The method used here is simple and flexible enough to be used by just about any display.

In some cases, you might want to make separate arrays to hold the pure numbers used in totalling and other math. These arrays would then be used in the totalling process as opposed to strings which would be used in the individual price displays.

If you want a current total available on your order pages or you are using multiple pages for your shopping cart, the total must be added to a cookie so it can be read by the multiple pages. This can be done by adding it to the main cookie or by putting it on a separate cookie altogether. I'd recommend using two cookies. The "total" cookie must be written to each time an item is ordered or removed. Using this method, the "total" cookie can be read directly for display from any page.

NOTE: Remember that a page must be reloaded for the total display to update. On pages that don't otherwise need reloading, like your order pages, you might want to put the total in a textbox so you can dynamically change its value.

Summary & Exercises

Adding a total is easy. Start out by making your prices pure numbers and not text strings of digits. This will let you directly use these values in math functions like addition.

To make a grand total, you need to make a running total of all the money items (price, shipping, handling, etc.) for each item ordered. You can do this right in the loop that displays ordered items without having to code any extra functions.

You need to add a total at least on your shopping cart page(s). You can add a dynamic running total on all of your order pages, too. You can do this by adding a total to your main cookie or using a separate "total" cookie and reading the "total" value straight from its own cookie.

For practice, try adding a second "total" cookie and having a running total appear on the order pages as well as the final page. This is more complex than our current example, but don't get frustrated. We'll be going over this step-by-step in later tutorials on designing specific commercial shopping carts.

HINT: You'll need to add code to the cookie reading code on all of your pages. If you use a separate cookie to hold the grand total, you'll need to split up the whole cookie into the main cookie and the total cookie by splitting around ";". This must be done before any other cookie processing occurs. It must be done on each page that reads the cookie.

Back To Advanced JavaScript Index