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 cmdNext_onClick()
{
// 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="cmdNext_onClick()">
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
Obtaining the User's Details
The next two pages obtain the necessary information about the customer to process their order.
The first page obtains information regarding name and delivery address. We also obtain their e-mail address as we use that later to send them conformation of their order.
Continued...
