Page 9 of 22 - Chapter 14
The MusicMad Shopping Basket (Part 1) cont'd
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> |
