JavaScript

SHOPPING CART

1. Review the code in cart.html
2. Review the form in jackson.html
3. Use a hidden frame to access the code in cart.html from jackson.html
4. Place order in shopping cart
5. View order in shopping cart
6. Incorporate the shopping cart code within jackson.html (instead of using a hidden frame)
7. A description of the intended use of the printer is stored in the shopping cart
8. The overall Subtotal, Discount, and Total will be displayed when the "view order" button is clicked

1. Review the code in cart.html

– Start the browser

– Enter this URL: http://locker.uky.edu/~dsianita/cart.html

– Click View à Source

– Save as d:\ cart.html

<HTML>

<SCRIPT LANGUAGE="JavaScript">

var numitem = 0;

var cart = new Object;

function additem(desc, price, itemcnt)

{

this.desc = desc;

this.price = price;

this.itemcnt = itemcnt;

this.display = prtitem;

return this;

}

function delitem(itemcnt)

{

delete cart[itemcnt];

viewcart();

}

function addcart(desc, price)

{

cart[numitem] = new additem(desc, price, numitem);

numitem = numitem + 1;

alert(desc + " has been added to your shopping cart. Thank you!");

}

function prtitem(doc)

{

with (doc)

{

write("<TR><TD>" + this.desc + "</TD>")

write("<TD ALIGN=RIGHT>$" + this.price + "</TD>")

write("<TD><A HREF='JavaScript:top.hidden.delitem(" + this.itemcnt

+ ")'>Remove Order</A></TD>")

write("</TR>")

}

}

function viewcart()

{

var total = 0;

var i = 0;

with (top.main.document)

{

write();

close();

write("<HTML><TITLE>Shopping Cart</TITLE>");

write("<BODY BGCOLOR=antiquewhite><CENTER>");

write("<H2>Thank you for your order</H2>");

write("<TABLE BORDER=1 CELLPADDING=3 CELLSPACING=1 WIDTH=500>");

for (i in cart)

{

total = total + cart[i].price;

if (cart[i].itemcnt != null);

{

cart[i].display(top.main.document);

}

}

write("<TR><TD>Total = </TD><TD ALIGN=RIGHT>$" + total + "</TD>");

write("<TD>&nbsp;</TD></TR></TABLE><BR>");

write("</CENTER></BODY></HTML>");

}

}

</SCRIPT>

</HTML>

2. Review the form in jackson.html

– Start the browser

– Enter this URL: http://locker.uky.edu/~dsianita/jackson.html

– Click View à Source

– Save as d:\jackson.html

3. Hidden frame

– Start notepad

– Create shopping.html:

<HTML>

<HEAD>

<TITLE>Shopping</TITLE>

</HEAD>

<FRAMESET ROWS="0,*">

<FRAME SRC="cart.html" NAME=hidden>

<FRAME SRC="jackson.html" NAME=main>

</FRAMESET>

</HTML>

4. Place order

– Open jackson.html in notepad

– Add the following code within the <HEAD> and </HEAD> tags:

<SCRIPT LANGUAGE="JavaScript">

var price = new Array();

price[0]=1000;

price[1]=1500;

price[2]=1700;

price[3]=2000;

price[4]=2300;

price[5]=2500;

price[6]=2900;

price[7]=3000;

price[8]=3500;

function placeorder()

{

var i = document.order.Product.selectedIndex;

var item = document.order.Product.options[i].text;

var itemprice = price[i];

if (document.order.USE[3].checked)

{

itemprice = itemprice * 0.95;

alert(item + " has been ordered at a cost of " + itemprice + " reflecting a 5% discount");

}

else

alert(item + " has been ordered at a cost of " + itemprice);

top.hidden.addcart(item, itemprice);

}

</SCRIPT>

– Insert the onClick property in the <INPUT> tag of the "place order" button:

<INPUT TYPE=Button VALUE="Click to place order" onClick="placeorder()">

5. View order

– Insert the onClick property in the <INPUT> tag of the "view order" button:

<INPUT TYPE=Button VALUE="Click to view order" onClick="JavaScript:top.hidden.viewcart()">