E-Commerce Overview - Web Development and Design Foundations with XHTML - page 495

One way to be productive is to create pages based on your earlier work. Launch
Notepad and open the Home page (index.html). Save the file as shop.html. This
will give you a head start and ensure that the pages on the Web site are similar.
Perform the following modifications:
a. Change the page title to an appropriate phrase.
b. Delete the definition list and the address/phone information from the page.
c. Create a div that is assigned to the shop class. The div will contain a descrip-
tion and a form which will process the “Add to Cart” button. You will config-
ure the description in this step. Type the following descriptive text in a
paragraph: “Carry your pet supplies and accessories in a special tote from Fish
Creek. 100% cotton. $14.95”.
d. Configure the following image below the div : fishtote.gif height="150"
width="150". Configure an alt text description for the image.
e. Create another div that is assigned to the shop class. The div will contain a
description and a form which will process the “Add to Cart” button. You will
configure the description in this step. Type the following descriptive text in a
paragraph: “A Fish Creek sweatshirt will warm you up on cool morning walks
with your pet. 100% cotton. Size XL. $29.95”.
f. Configure the following image below the div : fishsweat.gif height="150"
width="150" . Configure an alt text description for the image.
g. Next, we will add a shopping cart button to each item for sale. This shopping
cart button is placed in a form after the paragraph in each shop div . The
action on the form is the ASP script called http://www.webdevfoundations.net/
scripts/cart.asp. Remember that whenever you use server-side scripts, there will
be some documentation or specifications for you to follow. This script
processes a limited shopping cart that works with two items only. The
shop.html Web page will pass information to the script by using hidden fields
in the form that contains the button to invoke the script. Please pay careful
attention to detail when working on this.
To place the shopping cart button for the tote, add the following code below
the paragraph with the tote's description and within the shop div :
<form method="post"
action="http://www.webdevfoundations.net/scripts/cart.asp">
<input type="hidden" name="desc1" id="desc1"
value="Fish Creek Tote" />
<input type="hidden" name="cost1" id="cost1" value="14.95" />
<input type="submit" value="Add to Cart" />
</form>
This XHTML invokes a server-side script that processes a demonstration shop-
ping cart. The hidden fields named desc1 and cost1 are sent to the script when
the Submit button is clicked. These indicate the name and cost of the item.
The process for adding the shopping cart button for the sweatshirt is similar,
using hidden form fields named desc2 and cost2 . The XHTML follows:
<form method="post"
action="http://www.webdevfoundations.net/scripts/cart.asp">
<input type="hidden" name="desc2" id="desc2"
value="Fish Creek Shirt" />