08.16.10 - 12.12.10
Simple Shopping Cart
Objective: To use cookies with JavaScript to code a simple shopping cart
pastdue
| Documents are well formed | 10 pts |
| All required pages created | 10 pts |
| Sensible navigation is added to the site | 10 pts |
| Add to Cart buttons present and functioning on products page | 20 pts |
| Add to Cart buttons present and functioning on details pages | 10 pts |
| Cart management list functions | 10 pts |
| Remove from Cart buttons functions | 20 pts |
| Checkout operates as expected | 10 pts |
| Total | 100 pts |
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.
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.
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.
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.
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.