Page 10 of 22 - Chapter 14
The MusicMad Shopping Basket (Part 2)
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.
<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
. 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
