reptile7's JavaScript blog
Thursday, May 02, 2013
Cart Vessels
Blog Entry #287

We're ready to get our deconstruction of the shopping cart code of HTML Goodies' "So, You Want A Shopping Cart, Huh?" tutorial under way: our point of departure will be the shopcartindex.html frameset document.

The shopcartindex.html document holds the lion's share of the shopping cart's JavaScript: indeed, shopcartindex.html largely consists of one big script element that contains 25 functions punctuated by a small amount of top-level code. Some of the shopcartindex.html functions pertain to the running order part of the cart; some of the functions pertain to the customer/shipping part of the cart; not all of the functions are called. We will discuss the functions as we call them - I won't burden you with them all at once.

As the shopcartindex.html page loads, the shopcartindex.html JavaScript carries out some important groundwork for the cart: we'll go through that groundwork in today's post.

The order string

Upon adding items to the shopping cart the user builds up an 'order string' that is analogous to a string literal. The order string is composed of (its 'characters' are) custom objects that are organized as an itemlist array-like collection. The itemlist structure is set up by the following code:

function createArray(n) {
    this.length = n;
    var i = 0;
    for (i = 1; i < n; i++)
        this[i] = null;
    return this; }

var itemlist = new createArray(50);

The var itemlist = new createArray(50); statement calls and passes 50 to a createArray( ) constructor function. The createArray( ) function creates an object with 50 properties:
(1-49) 1, 2, ... 49, which are all set to null; and
(50) length, which is set to 50.
The object is returned to the calling statement and given an itemlist identifier.

• The itemlist object is an array in the sense that it associates a set of values with a common identifier, but it is not an Array object (it would automatically have a length property if it were); itemlist is actually an Object object.

• Type-wise, the names of the 1, 2, ... 49 properties are in fact strings: JavaScript property names cannot be numbers. These properties must be accessed by the [ ] operator (bracket notation) and not by the . operator (dot notation), e.g., itemlist[1] is a valid reference but itemlist.1 is not. See the Property accessors section of the Mozilla JavaScript Reference for more on this.

• 49 itemlist 'boxes' are overkill in the present case as the tutorial shopping cart only offers seven items for sale, but let's go with them for the time being.

• In case you were wondering, itemlist[0] evaluates to undefined.

Subsequently the itemlist object is fed to an initialize_arrays( ) function that replaces all those null values with custom objects created by a product( ) constructor function.

var maxarray = 50;

function product(code, price, desc, quan, url) {
    this.price = 0; /* This line is redundant and can be removed. */
    this.code = code;
    this.price = price;
    this.desc = desc;
    this.quan = quan;
    this.url = url;
    return this; }

function initialize_arrays(arraysa) {
    for (i = 1; i < maxarray; i++) {
        arraysa[i] = new product("", 0, "", 0, ""); } }


Each non-length itemlist member is now an Object object with five properties (over and above the constructor and prototype properties that all Object objects have):
(1) code, which is initialized to an empty string;
(2) price, which is initialized to 0;
(3) desc, which is initialized to an empty string;
(4) quan, which is initialized to 0; and
(5) url, which is initialized to an empty string.
These properties will hold the user's order information and can be referenced in the usual (dot-notation) way, e.g., itemlist[1].code.

In practice, the length of the order string is bounded by an item_num variable, which is initialized to 1 and roughly corresponds to the indexB parameter of the substring( ) method of the String object.

var item_num = 1;

The script relatedly defines a self-explanatory items_ordered variable:

var items_ordered = 0;

However, the items_ordered variable is unnecessary in that it doesn't do anything that couldn't be done with the item_num variable.

Alongside itemlist a parallel temp_array structure is created:

var temp_array = new createArray(50);

The temp_array structure plays a central role in a remove_nil_items( ) function that under certain circumstances will remove itemlist members from the order string.

The customer contact

The shopcartindex.html script creates a ship_details Object object for holding the values (in two cases, checked statuses) of the various order.html information fields, specifically, the fields in the Customer Information / Details and Shipping Address: tables plus the preceding Comments & Additional Information field.

var ship_details = new shipp_details( );
function shipp_details( ) {
    this.comments = "";
    this.f_namea = "";
    this.l_namea = ""; = "";
    this.ad_onea = "";
    this.ad_twoa = "";
    this.citya = "";
    this.statea = "";
    this.zipa = "";
    this.countrya = "";
    this.phonea = "";
    this.faxa = "";
    this.mailon = false;
    this.sameflag = false;
    this.shipname = "";
    this.ad_oneb = "";
    this.ad_twob = "";
    this.shipb = "";
    this.stateb = "";
    this.zipb = "";
    this.countryb = "";
    this.phoneb = "";
    this.faxb = ""; }

In general, the ship_details members that end in an a pertain to the Customer Information / Details table and the members that end in a b pertain to the Shipping Address: table. The final this.faxb = ""; statement can be removed as there is no Fax: field in the Shipping Address: table. The mailon and sameflag members are for the Check here to be included on our mailing list and Same as above checkboxes, respectively, and are both initialized to false; the remaining members map onto text inputs and are respectively initialized to empty strings. The ship_details object will be charged with data at the order.html page.

The cookie jar

As noted at the end of Blog Entry #285, the tutorial code does not set any cookies. However, the shopcartindex.html script contains go_with_cookie( ), setCookieArray( ), and setCookie( ) functions that can be used to store the values of the first nine fields of the order.html Customer Information / Details table in the shopcartindex.html document.cookie string, and it also contains get_that_cookie( ), getCookieArray( ), and getCookie( ) functions that can extract the cookie values and load them into the ship_details object via the intermediacy of a shiparray object.

var shiparray = new parent.createArray(10);

As the shiparray object is created in the shopcartindex.html document the parent reference is unnecessary (we would need it if we were calling createArray( ) from one of the frame documents).

The aforementioned get_that_cookie( ) function, which sets the cookie extraction process in motion, is called when the frames of the shopcartindex.html frameset have loaded:

<frameset cols="25%,*" onload="parent.get_that_cookie( );"> ... </frameset>
<!-- The parent reference is again unnecessary. -->

We'll go through the shopcartindex.html cookie functions in a subsequent post.


The top-level part of the shopcartindex.html script also defines
(1) order_total and total_item_price variables that are used to add up the user's order at the order.html page,
(2) a never-used present_item variable,
(3) st_astr and en_astr variables for a display_pic( ) function that can be used to write a new document in the frameset's left frame, and
(4) expiration date code for the shopping cart's cookies.

var order_total = 0;
var present_item = 1;
var total_item_price = 0;
var st_astr = "<html><body bgcolor='#ffffff'>";
var en_astr = "</body></html>";

var expdate = new Date( );
expdate.setTime(expdate.getTime( ) + (24 * 60 * 60 * 1000 * 365));

We'll start interacting with the shopping cart in the following entry.

Comments: Post a Comment

<< Home

Powered by Blogger

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