There is no single way to create a virtual shopping cart. Recently I had the opportunity to rewrite a classic ASP shopping cart so that it had a similar look and feel, but was more flexible and faster than the original. I decided to take advantage of XML and develop a cross-browser solution. Let me tell you some of the issues I ran into and how I improved on the original design.

The old shopping cart
Since the original shopping cart was geared to a select group of customers, it relied more on user training instead of ease of use. Beyond emptying the shopping cart completely, no mechanism existed to make any changes to the contents. If you put the wrong item or quantity in the cart, you had to start over to correct the mistake.

Behind the scenes, the original shopping cart didn’t get any better. A limited number of lines were displayed and the client would page through the shopping cart. The problem with this approach is everything was stored in a table based upon the ASP session ID. A query was performed when the client navigated the cart contents. In addition, if the session timed out, the shopping cart contents would exist in the table until somebody manually deleted it.

The new approach
I didn’t want to repeat the mistakes of the past, so the new shopping cart would be XML-session based instead of table based. This approach has several advantages. First, the entire shopping cart is stored on the client-side in the form of an XML Data Island as shown in Listing A. This eliminates the need to query a table for simple navigation. Instead, MozillaDSO() and xmlPage() functions are used.

Along with navigation, the xmlPage() method provides functionality that the original shopping cart did not include—the ability to change quantities and delete items. Because it uses two XML Data islands—one bound, the other one not—changes to the bound Data island won’t affect the unbound Data island until an update key is clicked. Once the update button is clicked, a mechanism, such as XMLHTTP, is used to transmit the changes to the server. If for some reason, you don’t fully trust XMLHTTP in either Microsoft Internet Explorer or Mozilla, a hidden frame (i.e., iframe) along with a form and input box can be used to accomplish the same thing. Listing B shows the JavaScript behind the update function.

Before I go any further, I did use the words Mozilla and XMLHTTP in the same sentence. There is written proof that Mozilla supports XMLHTTP. While the syntax is a little different than that available in Internet Explorer, it is nothing that a little JavaScript can’t handle. The complete client-side solution appears in Figure A and the ASP is shown in Listing C.

Figure A

On the server-side
Once the client-side coding is complete, it is time to concentrate on the server-side of the shopping cart. The mechanism for building the shopping cart varies with the type of e-commerce system, but the basic layout for the XML Data island is shown in Listing D. Because this is a demo application, the code-behind portion of the client-side page (shown in Listing C) doesn’t show how the shopping cart is initially created or contain any database logic. It concentrates on manipulating the shopping cart (shown in Listing D). Creating the shopping cart is accomplished with the XML Document Object Model (DOM) or through the use of the ADO save method and XSLT when the first item is selected. Subsequent items are simply appended using either the DOM or XSLT.

The checkout process is where the database logic resides. I navigate the XML shopping cart using the DOM and update or add rows using an Oracle stored procedure, which really wouldn’t be very helpful to those using SQL Server or MySQL.

Better the second time
The use of XML Data islands has a tendency to give HTML a very clean look. Rather than having row after row of HTML sprinkled with server-side code or a single row of HTML embedded in a loop, there is one row of HTML. This method can help you avoid some of the maintenance nightmares that developers face when someone suggests adding a column as soon as your shopping cart application is complete.

Download now available

A downloadable PDF version of this article is available from
the TechRepublic
Download Center. The downloadable version includes all of the code in both
printable and text form perfect for copying and pasting.