Chapter 10. A Practical Example
For this final chapter, I thought it would be a good idea to see several of the things that have been demonstrated in small examples throughout the previous chapters. What better way to do that than with a shopping cart?
Building a Shopping Cart
Let’s begin by defining the goals of the shopping cart:
- Include a category selection to allow easy filtering of products
- Display a list of products for a given category
- See how many items are currently in the shopping cart
- Add an item to the cart
- Remove an item from the cart
- Display the running total of items in the cart
- Include some simple animations when adding/removing from the cart
I think that covers the core features of a typical shopping cart. By looking at these features, I see an immediate need for three arrays:
- List of categories with their available items.
- List of available products for the active category.
- List of items the user is interested in purchasing.
In addition to these three arrays, we want to keep track of the current running total.
Example 10-1 shows the HTML that covers the shopping cart’s features.
Example 10-1. HTML for shopping cart
<title>Yet Another Shopping Cart