Page 11 of 22 - Chapter 14
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.
Check 'em Out - The Online Ordering System
The online ordering system's information gathering takes place over three pages
with a fourth page at the end displaying a final summary of the order which
the user can accept or go back and alter if they are not happy. At some point
in the checkout process, prior to any credit card details being transmitted
to the server, we would normally switch to a secure connection using Secure
Sockets Layer (SSL) which encrypts all data before it's sent to the web server.
The first of the four screens splits the main frame into two more frames
-
The top frame contains the 'welcome to the online ordering system' blurb
and buttons to go to the next screen.
-
The bottom frame contains our shopping basket and serves the dual purpose
of confirming what the user is about to buy and giving them an opportunity
to change their mind about the quantities.
First we need to create the frameset page and save it as checkout_frame.htm:
|
<HTML>
<FRAMESET FRAMEBORDER=0 BORDER=0 ROWS="140,*">
<FRAME SCROLLING="NO" SRC="checkout.asp" FRAMEBORDER="NO"
NAME="fraCheckoutTop" NORESIZE>
<FRAME SCROLLING="AUTO" SRC="checkoutbasket.asp"
FRAMEBORDER="NO"
NAME="fraCheckoutBottom" NORESIZE>
</FRAMESET>
</HTML>
|
Now lets create Checkout.asp,
which is displayed in the top part of the frameset. For the cmdNext button a function has been created
for the onClick event. Here we check that there
is still something left in the basket to buy (after user changes to the basket's
contents) using the shopping basket in the lower frame. If there is still
something in the basket then we continue to the next page.
The cmdBrowse button
gives the shopper another opportunity to shop themselves penniless by going
back to the category list page. The JavaScript has been included in the event
definition itself as it's just one line so there's little point creating a separate
function.
|
<!--#include file="ServerSideGlobalDef.inc"-->
<HTML>
<HEAD>
<SCRIPT language='javascript'>
function cmdNextonClick()
{
// if as a result of changes to the basket it's empty, inform user
if (parent.parent.getCookie("Basket") == "")
{
alert("Your basket is empty - click Continue Shopping to
fill it
up with our excellent bargains");
}
else
{
// go to page 2 of checkout process
this.parent.location.href="personaldetails.asp";
}
return true;
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<FONT FACE="Comic Sans MS" SIZE="3" color="Navy">
Welcome to our secure online ordering system.
Your current basket contents are listed below.
<FORM>
Once you're happy with its contents click
<INPUT NAME="cmdNext" TYPE="button" VALUE="Next"
ALIGN=top
onClick="cmdNextonClick()">
to continue <BR>
or click
<INPUT NAME="cmdBrowse" TYPE="button" VALUE="Continue
Shopping"
ALIGN=top onClick="parent.location.href='home.asp'">
to return to the main screen.
</FORM>
</FONT>
</CENTER>
</BODY>
</HTML>
|
Save the page as Checkout.asp
The final page in the checkout
frameset is the shopping basket. It's very similar to the main shopping basket
and uses the same code by incorporating the Basket.inc file,
which does most of the work of displaying the basket. bReadOnly
has been set to false so that the user can update the contents of the basket.
<!--#include file="ServerSideGlobalDef.inc"-->
<%
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 page as CheckoutBasket.asp
