Home

The MusicMad Shopping Basket (Part 2)

Page 10 of 22 - Chapter 14

Finally, we reach the end of the 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.

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.

<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>
         
         <%=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>
          
          <%=lTotal + 2.5%>
       </STRONG>
       </FONT>
   </TD>
</TR>
</TABLE>

With the table's creation finished our final task is again linked with the . 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>
<%
   }
%>

align="left">Save the file as Basket.inc.

align="left"> 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.

<%
   // 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)">
   
   <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.

align="left">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.

align="left">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.

<%

   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)">
   
</FORM>
</BODY>
</HTML>

Save the file as UpdateQty.asp

The MusicMad Shopping Basket (Part 1 - cont'd)

(1) (2) (3) (4) (5) (6) (7) (8) (9) (10) (11) (12) (13) (14) (15) (16) (17) (18) (19) (20) (21) (22)

Viewing an Empty Basket

Sponsors

Home