In this exercise we explore a common scenario in eCommerce, adding and removing items from the cart, and calculating the total. Your final solution should look like this:
- Implement a dynamic front-end app that uses shared state
- Use the
index.htmlfile as a starting point. index.jscontains the initial state - a list of items available to purchase and an empty cart- Images for each item are in the assets folder
- The HTML required for the items in the list and the cart items are provided in the
templates folder - Implement the following requirements
- A user can view a selection of items in the store
- From the store, a user can add an item to their cart
- If the item is already in the cart, increase the item's quantity in the cart
- From the cart, a user can view and adjust the number of items in their cart
- If an item's quantity equals zero it is removed from the cart
- A user can view the current total in their cart
- Add filters to the store ie. filter by item type; when a user clicks a filter they will only see items of that type
- Add sorting to the store ie. sort by price or sort alphabetically; when a user clicks sort they will see a sorted list of items. This should work with the filters implemented in extension 1.
- Add a form that allows new products to be created for sale. This can either be on the same page, hidden until the user clicks on a button, or a separate page.