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>
</form>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
items_ordered++;
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].quan++;
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
itemlist[loc].quan--;
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!
- posted by A. Peak @ 4:42 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)