Building an E-Commerce Shop Front

Following the validation script we define the table and its headers and then start looping through the basket's contents. As we saw above, each item in the basket cookie is in the format:

  ItemId&Qty&ArtistName&Title&Price£&

We split the basket cookie into an array with the ampersand delimiting each piece of data. We know each item has 5 pieces of data associated with it so our loop increments in steps of 5. The item price is delimited by a £ sign which we need to remove using JavaScript's replace method. We also keep a running total of the cost of each row (item cost * quantity) which we display at the bottom of the table.

As we loop through the data for each item we add table cells displaying the item's ArtistName, Title and we add a hidden input box with the ItemId which forms part of any form post action taken in updating quantities.

<TABLE BORDER=0>
<TR  BGCOLOR="#9F9F9F">
   <TH><FONT FACE="Comic Sans MS" SIZE="2">Artist</FONT></TH>
   <TH><FONT FACE="Comic Sans MS" SIZE="2">Title</FONT></TH>
   <TH><FONT FACE="Comic Sans MS" SIZE="2">Qty</FONT></TH>
   <TH><FONT FACE="Comic Sans MS" SIZE="2">Price Each</FONT></TH>
   <TH><FONT FACE="Comic Sans MS" SIZE="2">Total Price</FONT></TH>
</TR>
<%
   var sbasketItems = new String(Request.Cookies("Basket"));
   var lTotal = 0;
   var lItemTotal = 0;
 
   // Each item's data in form
   // ItemId&Qty&ArtistName&Title&Price£
   sbasketItems = sbasketItems.split("&");
   
   // loop through each item in basket
  for (var lcounter=0; lcounter<sbasketItems.length-1; _
           lcounter=lcounter+5)
  {
     // the price delimited by a £ sign - need to remove that
     // using string.replace method
     sbasketItems[lcounter+4] = sbasketItems[lcounter+4].replace(/£/,"");
 
     // calculate item total
     lItemTotal = (sbasketItems[lcounter+1] * sbasketItems[lcounter+4]);
 
     // add item total to grand total to be displayed as 
     // summary at end of table
     lTotal = lItemTotal + lTotal;
%>
 
<TR>
   <TD ALIGN="CENTER" WIDTH="150" BGCOLOR="#EFEFEF">
      <FONT FACE="Comic Sans MS" SIZE="2">
         <!-- ArtistName -->
         <%=sbasketItems[lcounter + 2]%>
      </FONT>
   </TD>
   <TD ALIGN="CENTER" WIDTH="250" BGCOLOR="#EFEFEF">
      <FONT FACE="Comic Sans MS" SIZE="2">
         <!-- Title -->
         <%=sbasketItems[lcounter + 3]%>
      </FONT>
   </TD>
   <TD ALIGN="CENTER" WIDTH="75" BGCOLOR="#EFEFEF">
      <!-- ItemId in hidden INPUT box-->
      <INPUT NAME="txt<%=sbasketItems[lcounter]%>" TYPE="hidden" 
             VALUE="<%=sbasketItems[lcounter]%>">

Next the bReadOnly variable determining whether this basket summary is updateable comes in to play. If the basket's item quantities can't be updated then the quantity is displayed as plain text and a hidden input box is placed on the form and is used after a form post action to determine item quantity.

If this is to be an updateable summary then a visible text input box is put in a cell and is given the same name as a hidden one would. This means any code using the basket's form does not need to know if this was an updateable or otherwise view of the basket.

<% 
      if (bReadOnly == true)
      {
         Response.Write('<FONT FACE="Comic Sans MS" SIZE="2">' + _
                            sbasketItems[lcounter + 1] + '</FONT>');
%>
 
      <!-- hidden Quantity INPUT box -->
      <INPUT NAME="txtQty<%=sbasketItems[lcounter]%>" TYPE="hidden" 
             VALUE="<%=sbasketItems[lcounter + 1]%>" SIZE="3">
<%
      }
      else
      {
%>
      <!-- visible Quantity INPUT box -->
      <INPUT NAME="txtQty<%=sbasketItems[lcounter]%>" TYPE="text" 
             VALUE="<%=sbasketItems[lcounter + 1]%>" SIZE="2" 
             MAXLENGTH="2"> 
<%
      }
%>
      
   </TD>

Finally, we reach the end of the for loop creating the table's rows but keep looping until we have displayed all of the basket's contents. At the end of each row we add the item's cost and the sub total for that row based on item cost multiplied by quantity wanted.

   <TD ALIGN="CENTER" WIDTH="100" BGCOLOR="#EFEFEF">
      <FONT FACE="Comic Sans MS" SIZE="2">
         <!-- Cost per item -->
         <%=sbasketItems[lcounter + 4]%>
      </FONT>
   </TD>
   <TD ALIGN="CENTER" WIDTH="100" BGCOLOR="#EFEFEF">
      <FONT FACE="Comic Sans MS" SIZE="2">
         <!-- total cost for quantity ordered -->
         <%=lItemTotal%>
      </FONT>
   </TD>
</TR>

<%
   }
%>

However, we have not yet finished creating the table. The table is completed by producing a summary of the total cost of items, delivery charges, and finally, the total cost of the order as it currently stands.

<!-- Cost Summary -->
<TR>
   <TD COLSPAN=4 ALIGN="RIGHT">
      <FONT FACE="Comic Sans MS" SIZE="2">
      <STRONG>
         Sub Total
      </STRONG>
      </FONT>
   </TD>
   <TD ALIGN="CENTER">
      <FONT FACE="Comic Sans MS" SIZE="2">
      <STRONG>
         <!-- Cost sub total for basket -->
         <%=lTotal%>
      </STRONG>
      </FONT>
   </TD>
</TR>
 
<TR>
   <TD COLSPAN=4 ALIGN="RIGHT">
      <FONT FACE="Comic Sans MS" SIZE="2">
      <STRONG>
         Delivery
      </STRONG>
      </FONT>
   </TD>
   <TD ALIGN="CENTER">
      <FONT FACE="Comic Sans MS" SIZE="2">
      <STRONG>
         2.50
      </STRONG>
      </FONT>
   </TD>
</TR>
 
<TR>
   <TD COLSPAN=4 ALIGN="RIGHT">
      <FONT FACE="Comic Sans MS" SIZE="2">
      <STRONG>
         Total
      </STRONG>
      </FONT>
   </TD>
   <TD ALIGN="CENTER">
       <FONT FACE="Comic Sans MS" SIZE="2">
       <STRONG>
          <!-- total including delivery -->
          <%=lTotal + 2.5%>
       </STRONG>
       </FONT>
   </TD>
</TR>
</TABLE>

With the table's creation finished our final task is again linked with the bReadOnly. If this is an updateable summary then we add a submit button to submit item quantity changes.

<% 
   if (bReadOnly == false)
   {
%>
 
<FONT FACE="Comic Sans MS" SIZE="2">
   <STRONG>
      If you change the quantities click
      <INPUT NAME="Submit" TYPE="submit" 
             VALUE="Update Quantities" ALIGN=top>
      <BR>
      To remove an item set it's VALUE to 0
   </STRONG>
</FONT>

<%
   }
%>

Save the file as Basket.inc.

Our final task in enabling the user to view the basket is the viewbasket.asp page itself. As most of the work is done by the Basket.inc include file, this page is fairly simple. We define the form that will contain the basket contents, include Basket.inc and add a button the user can press to go directly to the checkout. The form's action property has been set as UpdateQty.asp and it's this page, which we come to next, that actually handles the alteration of item quantities when the user hits the update quantity submit button.

<!--#include file="ServerSideGlobalDef.inc"-->
<%
   // Used by basket.inc - determines whether amounts updateable
   var bReadOnly = false;
%>
 
<HTML>
<BODY>
<DIV align="center">
   <H3>
   <FONT FACE="comic sans ms" color="Navy">
      Your Basket's Contents
   </FONT>
   </H3>
</DIV>
 
<FORM METHOD=POST ACTION="UpdateQty.asp" 
      NAME="frmItems" onSubmit="return checkQtys(this)">
 
   <!--#include file="basket.inc"-->
   <P align="left">
      <FONT FACE="Comic Sans MS" SIZE="2">
      <STRONG>
         If you're ready to place your order click 
      </STRONG>
      </FONT>
      <INPUT TYPE="Button" NAME="cmdCheckout" VALUE="Proceed to checkout"
             onClick="window.location.href = 'checkout_frame.htm'">
   </P>
</FORM>
</BODY>
</HTML>

Save the page as viewbasket.asp

Updating the Basket's Quantities

The penultimate page of our shopping basket is the UpdateQty.asp page. When the user clicks the update button on the shopping basket page, it can either

• Bring them to this page which does the work of updating the shopping basket and redisplaying it, or
• Redirect them to the emptybasket.asp page if they have deleted all its contents by setting the quantities to zero.

As displaying the basket is done by Basket.inc and the ServerSideGlobalDef.inc include file handles the storing and retrieval of data from the basket cookie, there is actually little to do here.

The ASP retrieves the current basket cookie's value then loops through the form elements that have been submitted, which contain two elements per item: the ItemId and the new quantity to be set. The new quantity value is set using the setItemToCookie function in ServerSideGlobalDef.inc. Finally, the basket cookie is updated and we display the basket with its updated quantities using the Basket.inc include file.

<!--#include file="ServerSideGlobalDef.inc"-->
<%
   
   var sBasketCookie = new String(Request.Cookies("Basket"));
   var sItemID;
   var ExistItemData;
   var NewItemData;
   var lQty;
   
   // loop through form elements submitted
   for (var lCounter=1; lCounter<Request.Form.Count; lCounter=lCounter+2)
   {
      // Get ItemId
      sItemId = new String(Request.Form(lCounter));
 
      // Get Quantity
      lQty = new String(Request.Form(lCounter + 1));
      lQty = parseInt(lQty);
 
      // Get items existing details
      NewItemData = getItemFromCookie(sItemId, sBasketCookie);
 
      // set new quantity
      NewItemData[1] = lQty; 
 
      // update basket cookie
      sBasketCookie = setItemToCookie(NewItemData, sBasketCookie);
   }
   
   // Set new VALUE for basket cookie
   Response.Cookies("Basket") = sBasketCookie;
   if (Request.Cookies("Basket") == "")
   {
     Response.Redirect("emptybasket.asp");
   }
   var bReadOnly = false;
 %>  
 
<HTML>
<HEAD></HEAD>
 
<BODY>
<FORM METHOD=POST ACTION="UpdateQty.asp" 
      NAME="frmItems" onSubmit="return checkQtys(this)">
   <!--#include file="basket.inc"-->
</FORM>
</BODY>
</HTML>

Save the file as UpdateQty.asp

Viewing an Empty Basket

Our final basket page is the one displayed when the shopping basket is empty. The page contains a message informing them of the basket's empty state and a list of categories to browse so the customer can fill the basket up again. The customer will arrive at this page if they try to view the basket and it's empty or if they update the basket quantities to remove all items.

<!--#include file="ServerSideGlobalDef.inc"-->
<HTML>
<HEAD></HEAD>

<BODY>
<P align="CENTER">
   <FONT FACE="Comic Sans MS" SIZE="3" color="Navy">
      Your basket is currently empty<BR>
      Fill it with items from our wide selection of music.
   </FONT>
</P>
<P>
   <DIV align="center"><!--#include file="categorylist.inc"--></DIV>
</P>
 
</BODY>
</HTML>

Save the page as EmptyBasket.asp

Testing the Basket

Check that the basket is working by adding a few items from the product list pages, viewing the basket and updating quantities it contains.