E-Commerce JavaScript Tutorial - Shopping Cart from Scratch
video description
Date: 2022-03-14
Related videos
Comments and reviews: 9
ANUJ
If you are stuck at -01:46:00,
Here I don't know why the code worked in video however, in actual what you have in product(variable) is an Array-like object and not an exact array(forEach, slice, pop only work on array). So you need to convert it to array, and for that there are many methods like .prototype etc... However, I prefer(ES2015):
Change the let products = data.items; - let products = Array.from(data.items)
Some people are saying to use DOMContentLoaded event at the start, but in my case it made the issue worse by making Add to Bag button un-operationl.
PEACE!
reply
If you are stuck at -01:46:00,
Here I don't know why the code worked in video however, in actual what you have in product(variable) is an Array-like object and not an exact array(forEach, slice, pop only work on array). So you need to convert it to array, and for that there are many methods like .prototype etc... However, I prefer(ES2015):
Change the let products = data.items; - let products = Array.from(data.items)
Some people are saying to use DOMContentLoaded event at the start, but in my case it made the issue worse by making Add to Bag button un-operationl.
PEACE!
reply
Sunshine.
Hi, Someone please help. InnetText is not working for me. when addtocart button is clicked it's not changing text to -in Cart- also same issue with it's not updating amount on top of cart icon. I check console and Price is being multiplied with qty and it show total QTY(amount) it means code is working fine but innertText is not displaying itemsTotal ( cartItems.innerText) i checked HTML there is no typo with class. Anyone can help. At Video time stamp 2:27:08 (Line 99 ) not working for me.
reply
Hi, Someone please help. InnetText is not working for me. when addtocart button is clicked it's not changing text to -in Cart- also same issue with it's not updating amount on top of cart icon. I check console and Price is being multiplied with qty and it show total QTY(amount) it means code is working fine but innertText is not displaying itemsTotal ( cartItems.innerText) i checked HTML there is no typo with class. Anyone can help. At Video time stamp 2:27:08 (Line 99 ) not working for me.
reply
Audra
John is my new favorite tutor!!!! I appreciate the pace, the explanations, and the conscientious amount of time spent on the code explanations. E.g. I learned grid a couple of years ago, but haven't used it and forgot a lot. It was so great to get a refresher on autofit and minmax in the midst of a JS project ... and John's explanations make sense! No BS, and no whizzing through stuff. The whole tutorial was thoughtful, helpful ... and funny, to boot! He made me LOL.
reply
John is my new favorite tutor!!!! I appreciate the pace, the explanations, and the conscientious amount of time spent on the code explanations. E.g. I learned grid a couple of years ago, but haven't used it and forgot a lot. It was so great to get a refresher on autofit and minmax in the midst of a JS project ... and John's explanations make sense! No BS, and no whizzing through stuff. The whole tutorial was thoughtful, helpful ... and funny, to boot! He made me LOL.
reply
More
Did anyone had this problem? I managed to get to the 3 hour mark, to make the Empty cart button to work. But after I Empty the cart, the Total resets to 0, but the Item still appears in the cart, and in the little cart icon from the banner, it appears 0, but there are items in the cart.
Edit: in the console I get this after I empty the cart
HTMLCollection(1)
0: div.cart-item
length: 1
__proto__: HTMLCollection
reply
Did anyone had this problem? I managed to get to the 3 hour mark, to make the Empty cart button to work. But after I Empty the cart, the Total resets to 0, but the Item still appears in the cart, and in the little cart icon from the banner, it appears 0, but there are items in the cart.
Edit: in the console I get this after I empty the cart
HTMLCollection(1)
0: div.cart-item
length: 1
__proto__: HTMLCollection
reply
iDevBrandon
HTML/CSS
36:40 Our products section
53:54 Cart section
JavaScript
1:10:55 Variable sections
1:17:50 General setup with 3 classes
1:22:00 Get products in Product class
1:32:33 To get a clean product data as a Array, instead of Object
1:39:07 displayProducts method in UI class
1:49:44 Implement localStorage in saveProducts() in Storage class
1:55:00 Issue with click product
reply
HTML/CSS
36:40 Our products section
53:54 Cart section
JavaScript
1:10:55 Variable sections
1:17:50 General setup with 3 classes
1:22:00 Get products in Product class
1:32:33 To get a clean product data as a Array, instead of Object
1:39:07 displayProducts method in UI class
1:49:44 Implement localStorage in saveProducts() in Storage class
1:55:00 Issue with click product
reply
K-nig
hey thanks a lot for the tutorial. but at 2:27:27 I somehow cant setup cart Total and the amount that goes up!
i get this error on console
Uncaught TypeError: Cannot set property 'innerText' of null
at UI.setCartValues (app.js:99)
at HTMLButtonElement. (app.js:83)
setCartValues - app.js:99
(anonymous) - app.js:83
reply
hey thanks a lot for the tutorial. but at 2:27:27 I somehow cant setup cart Total and the amount that goes up!
i get this error on console
Uncaught TypeError: Cannot set property 'innerText' of null
at UI.setCartValues (app.js:99)
at HTMLButtonElement. (app.js:83)
setCartValues - app.js:99
(anonymous) - app.js:83
reply
Giwrgos
how do you say this tutorial is awesome? i spent literally 5 days to complete it and nothing. i did all from following the exact ways he showed + i copy everything just to be sure. Cart doesnt work and also if i dont add the images in html i only see the 1st one we added before. if anything-someone , HELP!
reply
how do you say this tutorial is awesome? i spent literally 5 days to complete it and nothing. i did all from following the exact ways he showed + i copy everything just to be sure. Cart doesnt work and also if i dont add the images in html i only see the 1st one we added before. if anything-someone , HELP!
reply
itech
Having issue where in the console logs for removing a single item i am getting the correct item and datset etc. But in the cart in local storage it removes all items from the cart, any thoughts as to why this might be?
reply
Having issue where in the console logs for removing a single item i am getting the correct item and datset etc. But in the cart in local storage it removes all items from the cart, any thoughts as to why this might be?
reply
Joe
Far and away the best tutorial I've seen. Following it requires more work on my part, but it's worth every bit of the toil.
reply
Far and away the best tutorial I've seen. Following it requires more work on my part, but it's worth every bit of the toil.
reply
Add a review, comment
Other channel videos
