E-Commerce JavaScript Tutorial - Shopping Cart from Scratch

Learn how to create a shopping cart using vanilla Javascript in JavaScript Tutorial Course.

--

[chrisandrebelle]

This tutorial would have been so helpful 8 months ago! I built a cart like this from scratch for a client and it took forever to figure it out. It's interesting to watch this now and see how you solved the same problem.

[FANSasFRIENDS]

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!

[Harkiiee]

IF THE PAGE DOESN'T LOAD @ 1:46:13 don't stress! The issue is, you cant render products.json data in an HTML file.

The reason for that is your product data is correctly fetching from the JSON file but,

the products-center container is not rendered when you try to grab it so it returns a null object.

The solution is to, at the very start of the "app.js" file put down "document.addEventListener("DOMContentLoaded", () => {" and have it go throughout the entire of the app.js file!

I spent many hours trying to work this out so please like for the next person so they can get the help they need!

ps. as a personal note "<script srs="./js/app.js">" wasn't working for me so I had to change it to "<script type="text/javascript" src="app.js"></script>"
Often you don't have to define the type but i had to for some reason.

Hoped this helped!

[emmanueloluwafemi]

This guy made me a programmer today. He's so calm and nice. God almighty bless you. You are a wonderful person. I wish to meet you someday. Best tutor ever

[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

[sandortudja]

I am only halfway to get this tutorial, but I already can tell you this is a nice job. I am a rookie but still can understand perfectly. You are a very good tutor. Congratulation!

[chopperinbound]

Perfect lesson for those who just finished js/es6 lectures and want to use new knowledge on close to real-job-project practice!

[Maalik.]

Finished the entire project alongside him (_except for the official publishing at the very end_) but I must say, I have learnt a lot from this tutorial.
He goes through the code very thoroughly while explaining all the reasoning behind it, and it is very beginner friendly.
It is structured very well, and he makes it easy to follow along by showing us all the small changes that occur and how everything is interconnected to each other.

If you're wondering on whether you should start on this project or not, I would highly advise doing so.

I learnt alot of the fundamentals of creating a web application.

[audraogilvy]

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.

[muhammadwaqasiqbal]

this Guy is my favorite teacher. His tutorials are full of lessons and the way he teaches is so fun.

[artificialstyle]

looks like i'll be staying up 4hrs late tonight when I come back to this video after getting off of work

[joemckenna]

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.

[williamparrish]

I made it all the way to Netlify (the last 5 min) and I keep getting a "page not found" error. The worst part is that one of my other repos will load! But still 5 stars man! I bought your Udemy course on Bootstrap because of this. I will also look at your 15 JavaScript projects tutorial.

[jamesgow]

Such a great tutorial! Aiming to learn vanilla JS and get the basics before moving on to a framework so this really helped a lot!

[pogrammerinthehouse]

Timestamp for myself:
0:00 - HTML, CSS Layout
1:11:10 - JS from here onwards..setting up
1:21:55 - to render product dynamically with JS
1:47:06 - working on add to bag feature and cart
3:38:36 - Javascripting ends here!
3:40:00- Using Contentful

[mitri-dvp]

Thanks so much! I've learn so much from this, now I finally have a working shopping cart

[StefanKo]

The hardest part for me is CSS, i know and understand mostly everything about js and object orijented programming, because i know c# and java good, but CSS is too hard

[sambitmahapatra]

2:59:27 Please Explain me what's happening here, why "this"points to button

[agustinvon]

This was one of the best tutorials I've seen so far, so thanks!

[rajonahmed]

This is a brilliant tutorial. Learnt a lot and it was very easy to follow. Thank you so much.