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, ""); } }initialize_arrays(itemlist);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);
initialize_arrays(temp_array);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.email = "";
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.
Etc.
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.
- posted by A. Peak @ 3:51 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)