Overview

So far we've only been using the name of an item in our shopping cart code. In practice, prices, amounts, and other data would generally be included as in this example.

Note that the data for price and shipping is included in the data. This new data could have been written to the cookie directly, but it makes the cookie more difficult to parse with different types of data on it. And, the cookie gets much larger than necessary. Remember that you only have 4 KB per cookie. If your making a cart for hundreds of items with descriptions and pricing included on the cookie's data, you'll run out of room quickly.

To get around this and still have the advantages of using a single, appended cookie, we can use "pointers" as the cookie data. Here's how that works.

The actual data is not put on the cookie. It's held in a series of arrays. Say one array holds the items' names, another the prices, etc. When the cookie is set, only the array number relating to a particular item's position in the arrays is written to the cookie. Just one number and demarcation.

This number isn't displayed directly, but points to the data in the arrays we want displayed. This makes for a very lean cookie that can hold hundreds of items and point to unlimited data held in arrays.

Making The Arrays

The biggest key to making the arrays for an item is to make sure you have one, and only one, array for each type of data you want to use. I have arrays for the item names, prices, and shipping. You can make as many as you need. These arrays are coded on the shopping cart page that reads the cookie. In practice, this would almost always be an external script linked to the shopping cart page.

The arrays themselves are simple enough, but care must be taken to insure that the elements are "aligned" with one another. In my example, the first ([0]) element of each array relates to the "Ultra Widget" item. The second element of each array ([1]) relates to the "Deluxe Widget" item and so forth. Here's a snippet of the array code for these two items:

var item_name = new Array();
item_name[0] = "Ultra Widget";
item_name[1] = "Deluxe Widget";

var item_price = new Array();
item_price[0] = "$12.00";
item_price[1] = "$25.00";

var shipping = new Array();
shipping[0] = "$2.00";
shipping[1] = "$3.00";

Note that all of the [0] items relate to the "Ultra Widget" and that all of the [1] items relate to the "Deluxe Widget". All of the other data is likewise organized into the arrays.

Two rules: 1) Make an array for each type of data you want to use. 2) Keep up with the array numbers for related items. All of an item's array data must have the same element number in each array.

Setting The Cookie

I'll bet you can already figure out where all this is leading. With each item and its entire data already associated with the same array number in multiple arrays, we can now just write the appropriate array number to the cookie and have it "point" to all the data we need for a display.

Remember that our [0] array elements all relate to the "Ultra Widget". The cookie is set with this link:

<a href="javascript:place(0)">Put In Shopping Cart</a>

The zero in red above is all that's needed to pass on to the cookie writing script. The cookie writing script itself is a perfect copy of the one in our previous tutorial.

The only difference is that a 0 is written to the cookie instead of "Ultra Widget". Another important point to note is that the 0 is not in quotation marks. This means it's a pure number that can be used as an array number or in math, not a text string digit - "0".

The other items all return the appropriate array number for their position in the arrays. The cookie is demarcated using "xxx" as we've been doing. A typical cookie string reaching the shopping cart page would read like this:

stuff=0xxx4xxx1xxx

Reading The Cookie

The shopping cart page reads and processes the cookie exactly as it did in our previous example. The splits read like this:

var item_number = new Array();

if (document.cookie && document.cookie !=""){process_cookie()}

function process_cookie(){
var whole_cookie = unescape(document.cookie);
var drop_name = whole_cookie.split("=");
if (drop_name != ""){ item_number = drop_name[1].split("xxx");
}//ends IF
}//ends process_cookie() function

This means that the array "item_number" now holds the list of numbers to be used as "pointers" to the items' arrays. Don't get confused as to the numbers held as data in this array and "item_number" array element numbers themselves. Check below:

item_number[0] = 4;
item_number[1] = 3;
item_number[2] = 5;

The above might be an array produced by the split() that built the "item_number" array. Notice that the element numbers of the array are 0,1,2. This has nothing to do with the numbers held as data. These are the numbers from the cookie that will be used as pointers in the display. The element numbers will always be sequential, but the actual data numbers used as pointers are not sequentially numbered. They're ordered in the sequence in which they were selected by the viewer.

The Display

The biggest difference between our multiple data display and the one in our previous tutorial is that the previous one directly wrote data from the cookie.

Our current display does not. It uses the cookie data to point to display data in the item arrays. Just as in our last example, we'll be using a loop to write our display in the page's <body>.

for (i = 0; i < item_number.length - 1; i++){

}//ends FOR

Notice that the loop is controlled by the length of the item_number array. This is the dynamic array created by splitting up the cookie. The other arrays are static. They are only added to manually. Now lets look a a line that accesses one of the item data arrays - the "item_name" array:

for (i = 0; i < item_number.length - 1; i++){

document.write("<b>" + item_name[item_number[i]] + "</b> &nbsp;&nbsp;"); }//ends FOR

The part in red is at the real heart of this tutorial. The FOR loop cycles through all of the pointer numbers held in the item_number array. These numbers, originally from the cookie, are used as the indexes for the other item data arrays. If "item_number[i]" equalled zero, then "item_name[item_number[i]]" would equal "Ultra Widget" as coded in the "item_name" array.

The same holds true for all of the item data arrays. Here's the full display code:

if (item_number.length < 1){
document.write("<h4>You don't have anything ordered. Add items using the links below.</h4>");

}//ends IF

else{
for (i = 0; i < item_number.length - 1; i++){

document.write ("<input type=\"checkbox\" name=\"orderboxes\" checked ");

document.write("value=\"" + item_number[i] + "\">");

document.write("<b>" + item_name[item_number[i]] + "</b> &nbsp;&nbsp;");

document.write("<i>price: " + item_price[item_number[i]] + "</i>   ");

document.write("shipping: " + shipping[item_number[i]] + "<br><br>");
}//ends FOR
}//ends main display ELSE

Pay special attention to the use of "item_number[i]" as the number pointing to the item data arrays. This is the crux of using pointers. This is how they actually get data from the arrays for display.

It's also important to note that the VALUE of each checkbox is the item number that was written to the cookie. That's what we'll be using in our "remove()" function to write a new cookie.

The Other Functions

Besides the display function, the shopping cart has a kill_cookie() and remove() function. The kill_cookie() function should be well known to you by now.

The remove function is an exact copy of the one from the previous tutorial. It involves the same five steps of finding out what boxes are still checked and writing that data to a cookie and then finally reloading the page.

All you might want to keep in mind is that the data written to the new cookie must be a pure number (plus "xxx" demarcation). At no time should you write the array pointer to the cookie as a string. If you do, you'll have to eval() it to make it a number again. Only numbers can be used with the data arrays in the current example.

Summary & Exercises

This tutorial's example is almost exactly like our previous one. The only difference is that the data written to the cookie is a number that points to array data, instead of actual display data itself.

When using cookie data as a pointer to array data, it's important that your arrays are well organized. Make one array for each type of data needed. Make sure that each element number (like [2], for example) in each array relates to the same item.

Make the example from scratch. Make up your own items and data. Start by making the items' arrays. Next make the order pages and test your cookies. Finally, make the display of the shopping cart page and the remove() function.

Add items to your example. Add to the order pages and to the arrays. If you're up for a real challenge, have the order pages read items, descriptions, and other data fro the arrays and write themselves automatically. Now you only need to add to the arrays to make both the order pages and shopping cart display. Don't get frustrated doing this. I'll cover it later.

To Next Advanced JavaScript Lesson

Back To Advanced JavaScript Index