Learn how to create a shopping cart using vanilla Javascript in JavaScript Tutorial Course.
💻Setup files: https://github.com/john-smilga/setup-files-js-comfy-house
🔗Working Example: https://js-comfy-home-furniture-store.netlify.com/
🎥Course from John Smilga. Check out his channel: https://www.youtube.com/codingaddict
🔗John’s course on Udemy: https://www.udemy.com/in-depth-html-css-course-build-responsive-websites/?couponCode=ONLYTEN
—
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://medium.freecodecamp.org
And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp
Original source
21 responses to “E-Commerce JavaScript Tutorial – Shopping Cart from Scratch”
Nice project. Very good explanations. Many thanks
I use Contentful to save my images.But it still presents (Failed to load resource: net::ERR_FILE_NOT_FOUND) in console. What should I do?
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!
Where is subtitle ???
Papo, you can just say We Will (Verb). Not we will GONNA (verb)
Best teacher ever! Amazing work!
Perfect lesson for those who just finished js/es6 lectures and want to use new knowledge on close to real-job-project practice!
this is just exactly what it saying ( ReferenceError: can't access lexical declaration `products' before initialization)
Thanks so much for the tutorial, but I'm getting error as this "products is not defined" at line 67 and I've reviewed it severally with your same code and it kept repeating the same error, I'll be glad if you help me out. thanks
the products are not showing too when we switch .product to the ui class in app.js…please help
i have a problem with the preview server it's not showing how can I fix it
Is it possible to make money by creating my own e commerce website?
After much coding I have learnt that this is the worst possible and unsafe way to run a cart. NEVER use localStorage as your data point .. It is easy to change it before paying with any payment module and you end up with the customer paying what ever they want and it will still get processed. Time to investigate other solutions.
is amazing lesson, thank you Sir !!!!
Thank you very much.Learnt so much from you
Complete source code available for this project?
So, I thought it was only on my version, but I checked your deployed version and it also has the bug. When you add an item to the cart, if you click on the actual icon of the cart both texts "Add to bag" and "In cart" keep displayed, and if you keep only clicking on the little cart icon it just keeps adding without disabling the button
i got a problem with my code i get the error: " app.js:56 Uncaught (in promise) TypeError: Cannot set property 'innerHTML' of null
at UI.displayProducts (app.js:56)
at app.js:69" even though i followed the tut, what should i do?
I am getting a CORS error. How were you able to call your JSON file and not have that issue? I installed npm live server and it only works for me that way.
All you really need to go with free code academy, is someone willing to do a live video service like screen share, and with a small group of people, and code with you while teaching theory, you will no longer need a college class after that
Just login when instructor sends notifications that they are online, and login to a live screen share session with that person so you can code with them
In other words, an actual virtual classroom
excellent tutorial best ive seen and been a great help. Thank you for giving up your time to do this, you are very good at explaining all the code.