reptile7's JavaScript blog: There's Action in Addition

Sunday, May 19, 2013

There's Action in Addition
Blog Entry #289

Let's get back now to the pageone.html page of the e-commerce shopping cart offered by HTML Goodies' "So, You Want A Shopping Cart, Huh?" tutorial. In today's post, we'll go behind the scenes and see what happens when the user adds the pageone.html item to the shopping cart by clicking the button on the pageone.html page.

Joe addresses the pageone.html form control HTML in the Altering pageone.html section of the tutorial but doesn't say anything about the JavaScript associated with that HTML - that's where we come in.

Before getting started

Loading the pageone.html page calls the update_this_page( ) function in the shopcartindex.html script element.

<body ... onload="parent.update_this_page( );"> ... </body>

We don't have anything to update and consequently the update_this_page( ) function

function update_this_page( ) {

    for (var i = 0; i < parent.main.document.form1.elements.length; i++) {

        for (var k = 1; k <= items_ordered; k++) { ... } ... } ... }

doesn't do anything at this point. The items_ordered variable was initialized to 0, and is still 0; as a result, the k <= items_ordered condition of the inner for loop returns false from the get-go ⇒ nothing happens. We'll discuss the update_this_page( ) function in more detail later when we have some actual updating to do.

A new product( )

The pageone.html document head holds a script element comprising three functions: write_to_field( ), Loc_additem( ), and Loc_subitem( ). Clicking the button calls the Loc_additem( ) function and passes it four strings: p1i1, 1.11, Page_1_item_1, and pageone.html.

<form name="form1"> ... <center>

<font color="blue">One Item On This Page</font> ...

<input type="button" name="addbox" value="Add This Item To My Total" onclick="Loc_additem('p1i1', '1.11', 'Page_1_item_1', 'pageone.html');"> ...

<input type="button" name="subbox" value="Subtract This Item From My Total" onclick="Loc_subitem('p1i1', '1.11', 'page_1_item_1', 'pageone.html');"> ...

You Have Ordered This Many Of This Item:<input type="text" name="p1i1" size="2"> ...

</center></form>

The Loc_additem( ) arguments are given code, price, desc, and url identifiers, respectively. The Loc_additem( ) function first calls and passes its arguments to the additem( ) function in the shopcartindex.html script element; the self reference is unnecessary but it doesn't hurt to have it there.

function Loc_additem(code, price, desc, url) {

    self.parent.additem(code, price, desc, url);

    write_to_field(code); }

The additem( ) arguments are given codes, prices, descrip, and url identifiers, respectively.

function additem(codes, prices, descrip, url) { ... }

The additem( ) function first calls the shopcartindex.html check_if_in( ) function and passes it the codes argument.

loc = check_if_in(codes);

Here's the check_if_in( ) function:

function check_if_in(code_check) {

    var i = 1; loc = 0;

    while ((i < item_num) && (itemlist[i].code != code_check)) i = i + 1;

    if (itemlist[i].code == code_check) loc = i;

    else loc = -1;

    return loc; }

The check_if_in( ) function closely parallels the indexOf( ) method of the String object. The check_if_in( ) function runs through the itemlist members of the user's order string to see if the code value of any of those members matches the codes/code_check argument: if a match is found, then check_if_in( ) returns the 'index' of the relevant itemlist member; if no match is found, then check_if_in( ) returns -1.

At the present time:
• The item_num variable was initialized to 1, and is still 1. The check_if_in( ) while loop doesn't run for any iterations because its i < item_num subcondition returns false from the get-go.
• itemlist[1].code was initially set to an empty string; itemlist[1].code and code_check (p1i1) are not equal and therefore the check_if_in( ) if condition returns false.
• The check_if_in( ) else clause is operative: -1 is assigned to a loc variable, which is subsequently returned to the additem( ) function.

Back at the additem( ) function, the check_if_in( ) check is followed by the following if...else statement:

if (loc != -1) { // Update existing item

    olditem =  itemlist[loc].quan;

    itemlist[loc] = new product(codes, prices, descrip, olditem + 1, url); }

else { // New item

    olditem =  itemlist[item_num].quan;

    itemlist[item_num] = new product(codes, prices, descrip, olditem + 1, url);

    items_ordered = item_num;

    item_num = item_num + 1; }

As loc is -1, the else clause is operative. The itemlist[1].quan value, initially set to 0, is assigned to an olditem variable. Next, the original itemlist[1] product( ) object is replaced by a new product( ) object whose property values are:
(1) itemlist[1].code = p1i1 (codes);
(2) itemlist[1].price = 1.11 (prices);
(3) itemlist[1].desc = Page_1_item_1 (descrip);
(4) itemlist[1].quan = 1 (olditem + 1);
(5) itemlist[1].url = pageone.html (url).
Lastly, the item_num value (1) is assigned to items_ordered and then item_num is incremented to 2.

The additem( ) function concludes with a call to the shopcartindex.html remove_nil_items( ) function, to which the entire itemlist structure is passed.

remove_nil_items(itemlist);

Here's the remove_nil_items( ) function:

function remove_nil_items(inputlist) {

    var i = 0, j = 1;

    for (i = 1; i < item_num; i++) {

        if (itemlist[i].quan != 0) {

            temp_array[j] = itemlist[i];

            items_ordered = j;

            j = j + 1; } }

    itemlist = temp_array;

    item_num = items_ordered + 1; }

We'll discuss the remove_nil_items( ) function in more detail later; at this point in our deconstruction, remove_nil_items( ) doesn't actually remove anything, although it does load our new itemlist[1] product( ) object into the temp_array structure, more specifically, its for loop, which runs for one iteration, assigns itemlist[1] to temp_array[1]. When remove_nil_items( ) has finished executing, item_num and items_ordered are still at 2 and 1, respectively.

Quantify it

The pageone.html Loc_additem( ) function next calls the pageone.html write_to_field( ) function and passes it the code argument.

function write_to_field(code) {

    var found = false;

    var i = 0;

    while ((found == false) && (i < document.form1.elements.length)) {

        i = i + 1;

        if (document.form1.elements[i].name == code) {

            found = true;

            document.form1.elements[i].value = parent.item_quan(code); } } }

Beginning with the second-in-source-order form1.elements[1], the write_to_field( ) function's while loop runs through the controls of the form1 form to see if the name of any of those controls matches the code argument. The loop runs for two iterations; in the second iteration document.form1.elements[2].name does equal p1i1, so write_to_field( ) calls the shopcartindex.html item_quan( ) function and passes it the code argument.

function item_quan(code) {

    var loc = check_if_in(code);

    if (loc > 0) var quantities = itemlist[loc].quan;

    else var quantities = 0;

    return quantities; }

The item_quan( ) function first calls the check_if_in( ) function (vide supra) and passes it the code argument. The itemlist[1].code != code_check subcondition of the check_if_in( ) while loop returns false, so control passes to the subsequent if clause. The itemlist[1].code == code_check if condition returns true, and therefore 1 is assigned to loc and returned to the item_quan( ) function.

Back at the item_quan( ) function, the loc > 0 if condition returns true, and therefore itemlist[1].quan, 1, is assigned to a quantities variable, which is returned to the write_to_field( ) function. Back at the write_to_field( ) function, 1 is loaded into the form1.elements[2]/p1i1 text field.

In sum, we have now added the pageone.html item to the shopping cart. Per the properties of the itemlist[1] object:
(1) the item's identifier is p1i1 (itemlist[1].code);
(2) the item's price is $1.11 (itemlist[1].price);
(3) the item's description is Page_1_item_1 (itemlist[1].desc);
(4) quantity-wise we have added 1 item to the cart (itemlist[1].quan); and
(5) we have ordered the item at the pageone.html page (itemlist[1].url).

In the following entry, we'll briefly run through the item subtraction process, take a quick look at the other item pages, and perhaps begin discussing the order.html page.
- posted by A. Peak @ 4:20 PM

Comments: Post a Comment

<< Home

Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)

About Me