1 | Project Setup & Templates
Part 2 | Update Cart
Overview:
This section will cover changing the quantity of items in our cart and removing items once the quantity goes below zero.
We’ll be able to cover this part in a single step since most of the functionality was completed in the last module. All we need to do here is add some classes to our up/down arrows and custom attributes for the product ID and action type.
Step 1 | "Add" & "Remove" Clicks
00:35:39
Add Class
Just like we did with the "add' buttons in store.html, go ahead and add “update-cart” class to the up and down arrows in cart.html.
Custom Attributes ("action" & "procuct")
Also add the custom attribute of product and action also to the image.
For the "up" arrow; set the action to “add” and for the "down" arrow “remove”
Because we already added the event handlers in cart.js, items will now be updated when we click on the arrows and update accordingly.
You should now have the ability to increase/decrease the quantity of items in your cart. Remember that all the functionality and event handlers will be built in to cart.js, so take a minute to study how things work.