Online ShoppingOnline Shopping

JavaScript project for JavaScript project for

CS 175 JavaScript for Web Development, Spring 2009CS 175 JavaScript for Web Development, Spring 2009

By Sita AkellaBy Sita Akella

MainForm.htmMainForm.htm. .

This opens up a welcome page to take the user This opens up a welcome page to take the user through the online shopping experience. through the online shopping experience. Clicking on the link takes the user to the Clicking on the link takes the user to the

shop.htm page.shop.htm page.

MainForm.htmMainForm.htm

shop.htmshop.htm

The The shop.htm shop.htm presents a pull-down list of presents a pull-down list of available shopping choices. Although there available shopping choices. Although there

exists a default selection, the user may exists a default selection, the user may choose any option-combination. After an choose any option-combination. After an option-combination is chosen, clicking on option-combination is chosen, clicking on

the link takes the user to the shopping page the link takes the user to the shopping page for that choice. There are nine shopping for that choice. There are nine shopping

options and each has a corresponding page.options and each has a corresponding page.shop.htmshop.htm

orderIndian.htmorderIndian.htm

Each shopping page (for example, Each shopping page (for example, orderIndian.htmorderIndian.htm) has a list of items ) has a list of items

for the user to choose from. An for the user to choose from. An onChange event handler is used to onChange event handler is used to

register and call a function that adds register and call a function that adds the changed values to the cart. the changed values to the cart.

OrderIndian.htmOrderIndian.htm

checkout.htmcheckout.htm

The main purpose of this page is call the The main purpose of this page is call the checkout function checkout function which is stored in the which is stored in the

shopping.js shopping.js file. This function puts up a table file. This function puts up a table that displays the contents of the cart. The that displays the contents of the cart. The checkoutcheckout function uses cookies to keep track function uses cookies to keep track

of the ordered items. The ideas and code used of the ordered items. The ideas and code used here are from The Book of Javascript and here are from The Book of Javascript and from the CS 175 website of Professor Jon from the CS 175 website of Professor Jon

Degallier. The checkout.htm also has input Degallier. The checkout.htm also has input fields where the user enters personal info. fields where the user enters personal info.

orderItalian.htmorderItalian.htm

The The orderItalian.htm orderItalian.htm file does not use file does not use cookies. Instead, the onChange event cookies. Instead, the onChange event handler is used to register and call a handler is used to register and call a

function 'function 'CartCart' that updates an array. ' that updates an array. The 'The 'alldonealldone' function in this file ' function in this file displays the contents of the cart.displays the contents of the cart.

OrderItalian.htmOrderItalian.htm

function Cart(qty, item, cost)function Cart(qty, item, cost)

var item_name = new Array("Spaghetti", "Eggplant var item_name = new Array("Spaghetti", "Eggplant Parmesan", "Fried Mozzarella");Parmesan", "Fried Mozzarella");

var item_cost = new Array(7, 9, 8);var item_cost = new Array(7, 9, 8);

function Cart(qty, item, cost)function Cart(qty, item, cost) { if (item=='p1'){ if (item=='p1') { p[0] += qty; }{ p[0] += qty; } else if (item=='p2')else if (item=='p2') { p[1] += qty; }{ p[1] += qty; } else if (item=='p3')else if (item=='p3') { p[2] += qty; }{ p[2] += qty; } var p = new Array(0,0,0);var p = new Array(0,0,0); }}

Problems I came across:Problems I came across:

I tried to combine form features such as I tried to combine form features such as checking for validity and passing the input checking for validity and passing the input fields as well as the contents of the cart to a fields as well as the contents of the cart to a single page on the click of a button. I could single page on the click of a button. I could not achieve the passing of the cart data to a not achieve the passing of the cart data to a

final page. final page. checkout.htmlcheckout.html

Problems I came across:Problems I came across:

I tried two methods to update the cart- I tried two methods to update the cart- using cookies and using arrays. using cookies and using arrays.

----Problem with the array method - when ----Problem with the array method - when the quantity value is changed a second time the quantity value is changed a second time in the form, the cart data does not get in the form, the cart data does not get updated correctly.updated correctly.

OrderItalian.htmOrderItalian.htm

Problems I came across:Problems I came across:------

----Problem with the cookies method - each ----Problem with the cookies method - each time the onChange event is called, a string time the onChange event is called, a string with data is appended to the cookie; Now, if with data is appended to the cookie; Now, if an item is changed more than once, the cart an item is changed more than once, the cart shows a second row for the same item but shows a second row for the same item but does not combine the data.does not combine the data.

shopping.jsshopping.js