There is no single way to create a virtual shopping basket. Recently I had the opportunity to rewrite a classic ASP shopping basket 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 basket
Since the original shopping basket was geared to a select group of customers, it relied more on user training instead of ease of use. Beyond emptying the shopping basket completely, no mechanism existed to make any changes to the contents. If you put the wrong item or quantity in the basket, you had to start over to correct the mistake. Behind the scenes, the original shopping basket didn't get any better. A limited number of lines were displayed and the client would page through the shopping basket. 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 basket contents. In addition, if the session timed out, the shopping basket 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 basket would be XML-session base instead of table based. This approach has several advantages. First, the entire shopping basket 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 basket 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 (http://www.mozilla.org/xmlextras/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. On the server-side
Once the client-side coding is complete, it is time to concentrate on the server-side of the shopping basket. The mechanism for building the shopping basket 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 basket is initially created or contain any database logic. It concentrates on manipulating the shopping basket (shown in Listing D). Creating the shopping basket 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 basket 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 basket application is complete.