reptile7's JavaScript blog
Sunday, August 25, 2013
A New Order
Blog Entry #300

In today's post, I'll put forward an alternate approach to creating and adjusting the order string of the "So, You Want A Shopping Cart, Huh?" shopping cart.

Here are our starting observations:
(1) As the shopcartindex.html page loads, the itemlist object is stocked with initialized product( ) objects.
(2) When an item is added to or subtracted from the shopping cart, a corresponding product( ) object is created entirely from scratch.
(3) Once an item has been added to the cart, only its product( ) quan value may change in response to user input; its product( ) code, price, desc, and url values do not change.

An Array of item placeholders

As detailed in The order string section of Blog Entry #287, the itemlist construct is an Object object and not an Array object; however, we could code itemlist as the latter if we wanted to, for example:

var itemlist = new Array(maxarray);
for (i = 0; i < itemlist.length; i++) {
    itemlist[i] = new Object( );
    itemlist[i].code = "";
    itemlist[i].price = 0;
    itemlist[i].desc = "";
    itemlist[i].quan = 0;
    itemlist[i].url = ""; }

The preceding formulation allows us to jettison the shopcartindex.html createArray( ), product( ), and initialize_arrays( ) functions. Relatedly, as we threw out the shopcartindex.html remove_nil_items( ) function in the previous post, we can throw out the temp_array object as well at this point.

Indexing the data

It makes a certain amount of semantic sense to lodge the aforementioned code, price, desc, and url data in the Loc_additem( ) and Loc_subitem( ) function calls in the pageone.html, pagetwo.html, and pagethree.html documents. At the same time, however, it is inefficient to send an item's non-quan data to the shopcartindex.html additem( ) or subitem( ) function and then use that data to create a new itemlist[i] object every time the item is added to or subtracted from the shopping cart.

Alternatively, we can in the shopcartindex.html source pre-array the non-quan data

var codeArray = ["p1i1", "p2i1", "p2i2", "p2i3", "p3i1", "p3i2", "p3i3"];
var priceArray = [1.11, 2.22, 3.33, 4.44, 5.55, 6.66, 7.77];
var descArray = ["Page_1_item_1", "Page_2_Item_1", "Page_2_Item_2", "Page_2_Item_3", "Page_3_Item_1", "Page_3_Item_2", "Page_3_Item_3"];
var urlArray = ["pageone.html", "pagetwo.html", "pagetwo.html", "pagetwo.html", "pagethree.html", "pagethree.html", "pagethree.html"];

and then use a corresponding index

<form name="form1" action="">
<button name="addbox" type="button" onclick="Loc_additem(0);">Add This Item To My Order</button><br>
<button name="subbox" type="button" onclick="Loc_subitem(0);">Subtract This Item From My Order</button><br>
<p>You Have Ordered This Many Of This Item:<input type="text" name="p1i1" size="2" readonly></p>

to access an item's data and permanently load it into an itemlist member when the item is first added to the shopping cart:

function additem(index) {
    loc = check_if_in(codeArray[index]);
    if (loc != -1) { // If the item is in the order string
        if (!itemlist[loc].quan) // If the item's quan is 0
        itemlist[loc].quan++; }
    else { // If the item is not in the order string
        itemlist[items_ordered].code = codeArray[index];
        itemlist[items_ordered].price = priceArray[index];
        itemlist[items_ordered].desc = descArray[index];
        itemlist[items_ordered].url = urlArray[index];
        items_ordered++; item_num++; } }
function Loc_additem(itemIndex) { parent.additem(itemIndex); write_to_field(itemIndex); }

If the item is added more than once, the additem( ) if (loc != -1) clause is operative: the item's quan value is incremented but its non-quan values are not reset.

We can similarly craft a subitem( ) function that, as necessary, only decrements an item's quan value and the items_ordered counter:

function subitem(index) {
    loc = check_if_in(codeArray[index]);
    if ((loc != -1) && itemlist[loc].quan) { // If the item is in the order string and its quan is not 0
        if (!itemlist[loc].quan) // If the item's quan is now 0
            items_ordered--; } }
function Loc_subitem(itemIndex) { parent.subitem(itemIndex); write_to_field(itemIndex); }

Other item page changes

The original write_to_field( ) function features a while loop that runs 2-8 times depending on what we've got in the order string. We can cut the loop action to 1-3 iterations if we code the and buttons as button elements (vide supra) and then just iterate over the remaining input elements:

function write_to_field(index) {
    var itemInputs = document.getElementsByTagName("input");
    for (var i = 0; i < itemInputs.length; i++)
        if (itemInputs[i].name == parent.codeArray[index]) {
            itemInputs[i].value = parent.item_quan(index);
            break; } }

In place of the original function's found variable, the above function uses a break statement to stop the loop when a name-code match is found.

The shopcartindex.html update_this_page( ) function, which is called at the loading of each item page, can be rewritten in an analogous manner:

function update_this_page( ) {
    var itemInputs = parent.main.document.getElementsByTagName("input");
    for (var i = 0; i < itemInputs.length; i++) {
        for (var k = 0; k < item_num; k++) {
            if ((itemlist[k].code == itemInputs[i].name))
                itemInputs[i].value = itemlist[k].quan; } } }

Lastly, the You Have Ordered This Many: inputs, being text boxes, have onchange-able values, and we don't want that, needless to say; the easiest way to rectify this situation is to add a readonly attribute to each <input>.

Beginning at 0

Gordon's itemlist indexing begins at 1. I begin my itemlist indexing at 0, which requires that very minor changes be made to
(1-4) the shopcartindex.html all_order_totals( ), update_this_page( ), item_quan( ), and check_if_in( ) functions, and also to
(5) the code that writes out the user's itemlist data at the order.html page;
I trust I don't need to belabor these tweaks for you*. That done, the initial value of the item_num index can and should be lowered to 0.

*OK, here's one of them: it is necessary to change the item_quan( ) function's loc > 0 condition to loc > -1.

function item_quan(index) {
    var loc = check_if_in(codeArray[index]);
    var quantities = loc > -1 ? itemlist[loc].quan : 0;
    return quantities; }

We will have one last shopping cart post in which we briefly run through the shopcartindex.html check_window( ), delCookie( ), display_pic( ), and updatenav_nav( ) functions - don't touch that dial!

Comments: Post a Comment

<< Home

Powered by Blogger

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