Assignment 7: The Store
In this assignment you are going to build an e-commerce site. You may work alone on these assignments or in groups of 2 or 3. If you are working in a group, only one of you should submit the assignment and you should place the names of all team members in a comment at the top of your code. You should also briefly describe what each team member contributed to in terms of each part of this assignment.
Your site is going to consist of a single page with five main sections: (1) banner; (2) storefront; (3) product details; (4) cart; and (5) checkout. (You are welcome—even encouraged–to create a more complex site).
Start by looking at the demo that shows the working parts of what you will write. Don’t bother looking at the source; we have obfuscated the html code so that you cannot read it.
Complete the following three parts of the store (see the section Suggestions below for how you might organize all of these parts).
Banner
Select a name for your company. Design an attractive and informative banner that runs across the top of your site. This should be done with Javascript and the drawing functions provided by processing.js.
Storefront
Select a range of products that you will sell. These can be anything: clothing, motorcycles, food, music, services, etc. You should have at least 16 distinct products in your inventory. Create a virtual storefront that highlights each product. This should include, at a minimum, a photo of the product and the name of the product.
Product Details
When a user selects a product in the storefront, more details about that product should appear in this section. This should include the picture, name, price, description, and anything else that you’d like to add (ratings, suggestions for other products, shipping information, etc). This section should also have a “add to cart” button which when selected will add a product to the user’s cart.
Complete the cart portion of the store (see the section Suggestions below for how you might organize all of these parts).
Cart
This section should show an enumerated list of all items in the user’s cart including the item name and price. At the end of this list should be the total cost of all items in the cart and a “checkout” button which when selected will reveal the checkout section.
Suggestions
We have only provided a rough sketch of how your e-commerce store should work. We encourage you to add more features and to expand beyond the bare-bones structure that we described. Before you start coding, however, think carefully about your design, work-flow, what information you will need where, and your overall user experience.
Here are a few things that I learned when I implemented my e-commerce site. Some of these may be useful to you but don’t feel obligated to implement things the way I did — there are many perfectly valid and reasonable ways to build this site.
- You will need to know the names, descriptions, prices, etc of the products in different parts of the site. I created arrays containing these individual pieces of information where each element of the array pertains to a different product. This approach has the advantage that I only had to enter this information in one place.
- When the webpage is first loaded, I used a bit of javascript code to populate from these arrays the names, descriptions, prices, etc. of the products in the storefront.
- When a product is selected in the storefront, I call a javascript function that populates the information in the product details section and makes this section visible. This was accomplished by using the “onclick” feature with the “img” tag to call the appropriate javascript function. This function call passed the javascript function a variable (an index into the arrays from step 1 that specifies which object was selected). At this stage, I also assign to a global variable the product id (an index into the array in step 1 above) that can be used to determine what product should be added to the cart (see below).
- When the “add to cart” button is selected, I call another javascript function that populates the information in the cart section and makes this section visible. I keep track of the cart using a simple array of integers, each of which corresponds to an index in the array specified in step 1. The javascript function iterates through this array building some html code needed to display the contents of the cart in a reasonable fashion (I used an enumerated list). This function should also compute the total amount of the products in the cart. In my implementation I don’t allow a user to specify the quantity of an object (but they can add it to the cart multiple times). A nice feature would be to make it such that if a product is added multiple times, it shows up just once in the cart with the appropriate quantity.
- When the “check out” button is selected, I call another javascript function that makes visible the checkout section. This final section consists of a single form that will be sent back to the server when the submit button is selected. In order to send the order information, you will also need to send to the server the contents of the cart (in any type of format). You can do this by creating an input field of type “hidden”, putting the contents of the cart in this field, and then this information will be sent to the server, but the user won’t see its contents in the checkout form (which would be redundant with the information in the cart section). When creating this input field, remember that you need to use “name” to refer to the input field on the server and “id” to refer to the input field in the javascript code – you’ll need both in this case.