Home

Viewing an Empty Basket

Page 11 of 22 - Chapter 14

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.

<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"></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:

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

<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

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

<%
bReadOnly = false;
%>
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM METHOD=POST ACTION="UpdateQty.asp" NAME="frmItems" onSubmit="return checkQtys(this)">

</FORM>
</BODY>
</HTML>

Save the page as CheckoutBasket.asp

The MusicMad Shopping Basket (Part 2)

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

Obtaining the User's Details

Sponsors

Home