reptile7's JavaScript blog is Andrew Peak's personal technical writing project: it focuses on JavaScript and the analysis of JavaScript scripts, although HTML, CSS, and anything else related to coding for the Web are also fair game.

Welcome back to our ongoing discussion of the customer/shipping part of the "So, You Want A Shopping Cart, Huh?"order.html page. We have one more order.html issue to address: storage of the Customer Information / Details, Shipping Address, and Comments & Additional Information table data.

Holding on to the customer

A shopping cart visitor adds two pagetwo.html items to the cart, proceeds to the order.html page, and fills out the various order.html data tables. If the visitor submits the order form right away, then there is no need to hold onto the visitor's order.html data. But suppose the visitor goes back to pagetwo.html for whatever reason prior to submitting the form. Upon returning to order.html, the visitor should not have to reenter data into the order form fields: the original data should still be sitting in those fields, ready to go.

In The customer contact section of Blog Entry #287, we defined a ship_details Object object for holding the order.html table data. Replacing order.html with pagetwo.html in the main frame of the shopcartindex.html frameset gives rise to an order.html unload event; the order.html body element has an onunload attribute that calls an add_ship_details( ) function in the shopcartindex.html source and passes thereto the ship_details object.

<body ... onunload="parent.add_ship_details(parent.ship_details);">

The add_ship_details( ) function gives the ship_details object a shipform identifier and then individually assigns the values of the 22 inputs in the Customer Information / Details, Shipping Address, and Comments & Additional Information tables to the values of the corresponding shipform object properties.

Do we really need to pass the ship_details object to the add_ship_details( ) function and give it a new name in order to assign values to its properties? Nope, not at all. Moreover, the parent references are unnecessary as we are working in the shopcartindex.html document, although there's no harm in having them there; indeed, you might want to keep them as a sign that data is being passed from a frame document to a frameset document.

Complementarily, returning to order.html causes an order.html load event; the order.html body element has an onload attribute that calls a shopcartindex.html refresh_ship_details( ) function and passes thereto the ship_details object.

<body ... onload="parent.refresh_ship_details(parent.ship_details);">

The refresh_ship_details( ) function also gives the ship_details object a shipform identifier and then individually assigns the values of shipform's properties to the values of the corresponding order form fields.

In sum, the add_ship_details( ) function scoops up the visitor's data upon leaving the order.html page and the refresh_ship_details( ) function reloads the visitor's data upon returning to the order.html page. We're all set.

After the add_ship_details( ) function fires, the ship_details/shipform object holds onto the order.html data for as long as the visitor is at the shopping cart. If the visitor leaves and later returns to the cart, then the ship_details object is built from scratch as detailed in Blog Entry #287 (vide supra).

BTW, the Customer Information / Details table's Country field has an initial value of UK (all of the other customer/shipping fields are initially empty), but the visitor does not see this value upon arriving at the order.html page as it is cleared by the refresh_ship_details( ) function.

Filling the cookie jar

The order.html unload event is the right point at which to set in motion the otherwise-inactive* cookie functionality of the shopping cart as that functionality acts on data written to the ship_details object by the add_ship_details( ) function. The set-cookies part of the functionality (vis-à-vis the get-cookies part*) begins with the shopcartindex.html go_with_cookie( ) function. My preferred way to register the add_ship_details( ) and go_with_cookie( ) listeners on the order.html document is to put a

The go_with_cookie( ) function calls a setCookieArray( ) function and passes it 10 arguments:
(0) a gifttails string and
(1-9) the values of the first nine fields of the Customer Information / Details table (which have just been loaded into the ship_details object by the add_ship_details( ) function, as described above).

The setCookieArray( ) function is preceded by two lines of top-level code that create a one-year-into-the-future expdate date that we'll use to set an expiration date for our cookies.