Threesuns

Email

Contact

All Semesters

Semesters

All Courses

Courses

Scripting (Blended)

CSYS2033

3 credits

Labs

Simple Shopping Cart

Lab

100 points

Requirements

Documents are well formed10
All required pages created10
Sensible navigation is added to the site10
Add to Cart buttons present and functioning on products page20
Add to Cart buttons present and functioning on details pages10
Cart management list functions10
Remove from Cart buttons functions20
Checkout operates as expected10
Total100 pts

Objective

To use cookies with JavaScript to code a simple shopping cart

Instructions

Overview

For this lab you will need to create a website that sells products and allows a user to have a shopping cart that they can fill with products and then checkout and "buy". The site should consist of a home page which shows a brief list of all products that are being sold, a details page which is reached when a user clicks on a product on the homepage and displays detailed information about the clicked on product, a shopping cart management page which allows a person to view items in their shopping cart and remove items from the cart, and a checkout page which will consist of the same checkout form used in the previous lab.

Homepage and Details

The homepage and the details page should both include an "Add to Cart" button that is displayed with each product. When the user clicks on one of these buttons the product with that button should be added to their shopping cart. A user can add multiple identical items to their cart to control quantity.

Shopping Cart

The shopping cart management page should show the user a list of all of the items that they have added to their cart and the price for each as well as a total for all of the items in their cart. A "Remove from Cart" button should be displayed with each item which when clicked will remove that item from the list and recalculate the total price.

Checkout

The checkout page should show the user a list of all of the items in their cart like the manage cart page did but this page should not include the "Remove from cart" button. It should however still display the price and the total for the order. The form on the page should behave as was described in the previous lab in all other respects.

Note:

So that Chrome can use local cookies when you develop websites on your local PC:

You have to right click on your Google Chrome shortcut in Windows, go to Properties, Go to the Shortcut tab, and add " --enable-file-cookies" right after "chrome.exe", click Apply to save it and OK to close the Properties window. Then, when you run Chrome, you can actually create cookies.
See http://www.ericdlarson.com/misc/chrome_command_line_flags.html. To run Chrome with local cookies on a mac: open the terminal and run: open /Applications/Google\ Chrome.app -n --args --enable-file-cookies

Also, Chrome requires a expire date and path to create the cookie whereas Firefox does not so your document.cookie has to be created with code like:

document.cookie = id + "=" + val + ";" + expires + "; path=/"; Of course "expires" in this example is a variable and has to be the "expires=" followed by a date per the videos.