JavaScript Shopping Cart Tutorial for Beginners
In this video we will learn how to utilize JavaScript to add functionality to a shopping cart. We will cover how to check if the document is loaded, and how to query the document for elements by class, how to add events to elements. We will then combine all of these techniques to make the shopping cart in our web page work in an intuitive way.
Also, let me know if there are any other JavaScript topics you want me to cover in further depth.
Starting Code:
github.com/WebDevSimplified/Introduction-to-Web-Development/tree/master/Introduction%20to%20CSS/Lesson%203
Finished Code For:
github.com/WebDevSimplified/Introduction-to-Web-Development/tree/master/Introduction%20to%20JavaScript/Lesson%201
Make The Shopping Cart Accept Payments:
kzread.info/dash/bejne/n32Tj5Otkqy-gaw.html
Band Website HTML Series:
kzread.info/dash/bejne/dKp-u7qlYtzdhag.html
Band Website CSS Series:
kzread.info/dash/bejne/haqTsKOxmcLQftY.html
Twitter:
DevSimplified
GitHub:
github.com/WebDevSimplified
CodePen:
codepen.io/WebDevSimplified
#Javascript #WebDevelopment #ShoppingCart
Пікірлер: 986
If you enjoyed this video, make sure to checkout my video on using Node.js and Stripe to make the shopping cart accept credit card payments. kzread.info/dash/bejne/n32Tj5Otkqy-gaw.html
@SpiritualFacts
5 жыл бұрын
Please also add shopping cart in php, all the videos in KZread are not good
@luanschuindt2837
4 жыл бұрын
You're very good at explaining, thanks for making this for free!!
@hanesmitter1469
4 жыл бұрын
Could you do the same using php as the server side language plz
@poojaagarwal2208
4 жыл бұрын
Thank you for such amazing tutorials with great content! :)
@keerthineeraj7937
4 жыл бұрын
I didnt understand why at 10:41 we put a for loop, can you please explain.
You not only teach me how to write code, but also teach me how to think. That is highly effective.
@danish7335
9 ай бұрын
Bro can you refer some course to learn JavaScript
Hey I really like your style of teaching. You don't make everything sound so intimidating, but at the same time, you don't sound like you're teaching a baby how to walk.
@WebDevSimplified
5 жыл бұрын
Thanks! I am really glad you enjoy the videos!
This series has by far been the best web dev tutorials I have seen by FAR. Your way of teaching is perfect for visual learners like me I need to see something to understand how it works and you nailed it. Thank you for taking the time to make these tutorials.
Whenever I need to refresh my JavaScript I watch this video, just so I can get a grip of the basics. This is amazing!
@Ali-mc4le
4 жыл бұрын
same haha
I know other users have already said it but the way you explain/demonstrate line by line is exceptionally good. I have been trying to learn to build a simple website for a while but I threw myself into html, css, js, php, frameworks etc etc. This tutorial is so well presented it has given me a good idea on how to get to the goal. One of the shocking things I have learnt is using a console command for debugging. I was totally oblivious to it. Anyway thank you so much.
Thanks for your tutorials! I really enjoyed following along! I just finished this last part of the website building and plan on continuing on learning from your page! I decided to personalize my site a bit more which created some interesting debugging ... opportunities. Hehe! All in all I probably spent around 2.5 hours on this tutorial, but I enjoyed the process of learning JavaScript. I also really appreciate how you explain what is happening behind the code that you are typing. Thanks for taking the time to make this for us!
@WebDevSimplified
5 жыл бұрын
Congratulations! I am really glad you decided to do your own tinkering and customization. That is where the true learning comes in, and it sounds like you did a lot of tinkering which probably really increased your understanding of javascript. Good luck with the rest of your journey!
@antoniofuller2331
2 жыл бұрын
True
@aboodibajaman9975
2 жыл бұрын
hi but how can i add a form with the cart like i want the user to enter his name, number etc with the cart and that to be submitted with products in the cart. i want to get the data of the cart and the form
nice tutorial. breath of fresh air to have a functioning total package as a lesson. Now i can pull the code from here, manipulate it to my needs and really start to understand how to put my own code together. will be looking for more like this from you!
This was one of your better videos, because you went through it slowly, and took the time to explain each concept thoroughly as you executed it
@micklowe5232
2 жыл бұрын
He was talking 19,000 mph. I could hardly understand a word he was saying.
Hello! I know this video has been up for a good while now, but I came across it recently (and the HTML and CSS too) and just wanted to say: THANK YOU! You sir helped me pass my first coding/programming exam. I couldn't have done it without your tutorials. They are amazing and really easy to follow. Keep up the good work!!! ♡ thank you again!
@WebDevSimplified
5 жыл бұрын
I'm really glad I could help! I love hearing about people's success and knowing that I was able to help them get to where they are. I hope your next test goes just as well.
@aymenob2484
2 жыл бұрын
@@WebDevSimplified Yes u are M glad i found your channel ,this was alot of help
Thank you sooo much for creating this project!. I watched it easily about 10 times straight just so I could wrap my mind about the logic of being able to rebuild this project from scratch on the js side. This tutorial is going to be the heart and soul of my shopping cart I'm planning on build for my Nintendo website I'm currently finished with I just wanted to add a cherry on top to wow my future employers. :D Thank you again Web Dev Simplified your such a great teacher I seriously wouldn't have understood the DOM if it wasn't for this project and once I'm done with my shopping cart page I'm going to dive straight into learning react. :) FYI: When I'm done with my website I'm going to post it in the comment section so you can see the masterpiece you help inspire to be built. :D
Hello WDS, I really appreciate the effort you put in place just to tutor this amazing courses. I am hoping to see more, it helps a lot. Thank You
This channel is a gold mine and I am a miner :D Seriously great practical examples! Liked & subscribed, working on my web dev knowledge! Keep it up man, cheers!
One of the best, high quality, easy to understand JavaScript tutorials!!
great tutorial man.. i feel like i want to watch every single video you have.. because i keep learning something new doesnt matter how much i know of the subject you are talking about... great work
@WebDevSimplified
5 жыл бұрын
Thank you! Comments like yours are what make me love doing this so much.
@mackynikat8833
3 жыл бұрын
just copying and still doing wrong
@mackynikat8833
3 жыл бұрын
thanks bdw sir. I've used your calculator and this as my guides and now im on the starting point doing my own codes. svg nalang kulang
I really appreciate how you explain everything including the basics. Thanks man!
@WebDevSimplified
5 жыл бұрын
You're welcome!
I was intimidated at first but as the topic moves on, everything feels right. This is simple but powerful! Absolutely perfect.
@antoniofuller2331
2 жыл бұрын
Get lost you skeptic
I have been struggling with JavaScript for months, and I felt like I would never be able to code. But I have tears in my eyes because I feel I can do it, after watching your video. You are just amazing. God bless you!
@jakubgodlewski2506
Жыл бұрын
take into account that the video is 4 years old. Some of the methods used in the video are obsolete. Nevertheless, 90% of the course is still up to date.
@Seekingtruth-mx3ur
Жыл бұрын
yeah man its been a struggle. I want to change my life for the better but web dev is hard.
@user-cr1ez2sb6l
Жыл бұрын
@@Seekingtruth-mx3ur Likewise, it will be fine soon, keep powering through :)
Very well done - I know no Javascript and I was able to completely follow your logic - Thank you. I don't feel as dunted considering learning Javascript.
@WebDevSimplified
5 жыл бұрын
Thank you so much. Kind words like this are what make me love making videos so much. I was worried when I created this video that people with no JavaScript or programming experience would struggle to follow along so I am really glad that you were able to. Thanks again for the compliment.
@arfanm9440
4 жыл бұрын
@@WebDevSimplifiedCan confirm, I had little JS knowledge and this video explains really well such that I was able to follow along and refresh my JS.
This video saved my life! One of the best tutorials I've seen!
Finally i made it with some help from different forums lol, but i really needed a tutorial with Vanilla JS. I am new to JS since 3-4 months but I know how to make modals,contact forms and some basic stuffs but when it comes to building larger projects like you did with a shopping cart I try to search for tutorials on KZread and I learnt a lot for next projects, even I know it's not so good to be based on others tutorials and build from yourself, but I am doing this because I struggle with larger projects like i said and i learnt a lot in this tutorial. Thanks again and keep going Vanilla JS :)
@WebDevSimplified
5 жыл бұрын
I am really glad I was able to help. Keep up the good work!
@roydonk2878
4 жыл бұрын
@User 97 I disagree, I think it's good and necessary to follow tutorials for the simple stuff so that you obtain the blocks to build with. Then you combine and expand upon those blocks to make your own more advanced projects. But if you don't follow along to see what's possible, it's going to take you forever to try and build even the simple things on your own.
This is an invaluable tutorial, with some effort I can tweak it to suit a project I want to do. For your detailed logical explanation and non-use of external libraries and packages I hereby christen you "The King of Vanilla Javascript". God bless you.
I just stopped by while in the midst of this series to tell that this is the best course I have been so far. I have been struggling learning web development with other online turorials(fellow self taught!), but this series is a fckin solid foundation where students can look back and play around with thier codes, and eventually modify it. Bro, you are the best! How to give you a free coffee? You deserve it!
Incredible video, amazing tutorial, I am still in disbelief you gave us something like this for free and I am extremely thankful for your good will and effort! After spending so much time on different tutorial which explains all the different options in html, css and js, this course of yours helped me put them together in one whole picture, that I was desperately missing. Finally I have a feeling like I am making an actual progress in learning how to make functional websites and one day hopefully, become even a true web-developer :D So, once again, thank you so so much for whole this course :D And now, I move on to your other videos, especially the ones that are dedicated to the card payments :D
Yet again, an impressively well organized and straight forward tutorial. Wish you had something similar using React, though maybe I just missed it going through the feed. Thanks!
Very nice tutorial I also used another if statement to check if the cart isnt empty when your click the purchase button. Being able to do that myself after this tutorial means that is actually learned something!! Thank you!
Finally an Vanilla JavaScript without jQuery and that explains easy and understandable. Had some struggles with my code and i was stuck what to do, but found your video and i learnt a lot so thank you and keep doing more Vanilla JavaScript videos.
@WebDevSimplified
5 жыл бұрын
Thanks. I love vanilla JS so I definitely won't stop.
Thank you, man! You're the best! All my problems are solved now!
@WebDevSimplified
5 жыл бұрын
Thanks! I'm glad the video was able to help you.
finally a good channel recommended by KZread. Great effort and nice video
@WebDevSimplified
5 жыл бұрын
Thank you so much! I hope the rest of my videos are just as helpful for you.
@gopinathkrm58
5 жыл бұрын
@@WebDevSimplified Do you make videos on Angular too ?
@WebDevSimplified
5 жыл бұрын
@@gopinathkrm58 I do not, because I have not taken the time to learn angular yet. When I do get a chance to learn and use angular though I plan to make tutorials for it.
@gopinathkrm58
5 жыл бұрын
@@WebDevSimplified Ok bro no problem.
Dude, it's awesome!! I looking for same information for a long time on rutube, but there were nothing essential. Thank you very much!!
you are my savior!!!! I’ve been struggling with my library system project (though may seem unrelated to a cart) but this video helped sooo much!!! bless you and your family and good luck on your future videos!!!
Awesome vid! One question, when you grab hold of the 'cart-row' class in updateCartTotal(), why does it not need a [0] after it when all the other instances of document.getElementsByClassName do? For example if you don't use one for 'cart-items' the console throws up an error. I'm just unsure as to why not using a [0] causes an error for one and not the other
Hi! I really love this tutorial - it's been so helpful for me. I'm wondering if it's possible to change the purchase link to be a button which sends an email to a desired email address with the summary of the cart (basically, an email receipt). I don't need the actual purchase functions (ie. I don't need to gather credit card information because the "items" on my site are not products for sale), but I would like my users to be able to send themselves a copy of the list of items in the cart. Thanks again for this!
@WebDevSimplified
5 жыл бұрын
I'm really glad you liked the video and found it useful. In order to have a button that sends an email to the user you will want to setup a server that you can call from the JavaScript which will send the email for you. I have a few videos on Node.js which you can checkout that will help you get started on setting up a basic server. I would recommend the weather app tutorial I have. If you combine the javascript that calls the server from the weather app tutorial with your app and make it so the server sends an email to the user that will be all you need. If you have no experience with servers or APIs then my video on how to build your first REST API will also be useful. I would also probably look into a library called Node Mailer for managing sending emails. I haven't used it myself but it seems to be a good email option for Node.js. Hopefully that will be enough information to get you pointed in the correct direction building your app.
@soltiscd
4 жыл бұрын
@@WebDevSimplified sounds like more of the video to continue? It would be cool to see this connected to a small personal database.
@RexArvind
4 жыл бұрын
Please, can you add a button which creates a summary of the cart, which can be sent using WhatsApp API, Please, Please, Please
@ahmadalfan9022
4 жыл бұрын
@@RexArvind I need to make something like this too. How do you send the summary message auto typed on whatsapp? Maybe if you have the tutorial link. I'm building a site for online shop just like yours. Would appreciate your repy 🙏🏻
Kyle, thank you very much for the course, I completed every video (from html to js) and I feel that my skills have evolved. Great !
a man who share code and don't deceive people has my respect also a permanent subscription.
Thanks! Great tutorial! Just one question: does this code work between multiple pages? For example, you have one page for the products to be added and one page for the actual cart.
@g.r2780
2 жыл бұрын
Its doesn't work. I'm facing this issue as well. Have you get any solution about this issue? 🙂
@appsenence9244
2 жыл бұрын
Use session variable. You need a server for this and to use php.
@yadusolparterre
2 жыл бұрын
@@g.r2780 use localstorage
@briannguyen5057
2 жыл бұрын
i was wondering same question
@cedricblacer974
2 жыл бұрын
@@yadusolparterre how?
Firstly,Thanks for the tutorials. They were easy to understand. Secondly, I stuck in the code, I am having errors in the var quantity = quantityElement.value. The error says uncaught typeerror:cannot read property "value ' of undefined .please what can I do?
@anubodhkarki6929
3 жыл бұрын
Mind sharing the solution if you found it?
Awesome! Simple and easy to understand! Thank you for looking forward to more similar videos
I like this video because I still learned from it, BUT, this is not the proper way to go about a shopping cart. However, going through a real shopping cart is far out of the scope of what you're trying to teach as it requires cookies and setting up a backend, a DB, and then contacting the backend API to query an inventory DB. There's actually a lot more to it to, because you have to account for the transaction. But, like I said, far out of the scope of what you're trying to teach. Regardless, I appreciate the video and what you're doing. Thank you, Web Dev Simplified!
@WebDevSimplified
5 жыл бұрын
I'm really glad you enjoyed the video and learned something from it. Shopping carts are deceptively complicated especially when you start dealing with inventory and adding things to a cart while browsing, etc. I plan to cover many of these topics such as databases, backend languages, apis, etc. in future tutorials, but as you mentioned they are far out of scope for this video. I have a huge list of tutorial ideas. I just wish I had more time to plan them out and create them.
@elliotsherman9894
4 жыл бұрын
AlexTechie you absolutely right, however this is the first stage in the build up of what you are talking about, once you get the visual skeleton to work you can start adding in the back end, this can go both ways you can also start from the back end to the front end
Your tutorials are great but in this episode I think there is too much going on
@adehenry9591
3 жыл бұрын
lolzzzz
Such great and practical tutorials you make, buddy. I love them.
I have just completed your tutorial. Great thanks! I havent seen any better tutorial yet.
Learn by doing. On my own, the tidbits I've learned were just the puzzle pieces of javascript but your videos help me put those pieces together. Love the content, keep it up sir!
I ve just built my first time JS shopping cart thank you bro. there is no clearer than that !
It's crazy how easy you make all of this look. I wish I had the brains/experience you do to make it all look so simplistic.
@WebDevSimplified
4 жыл бұрын
The only reason I make it look easy is because I create the entire project before recording the coding. That way I can reference the code while recording and speaking. I struggle a lot more than this when making the project before I record.
Awesome tutorial. You have just saved me days of coding and debugging! Thanks!
Thank you so much! This really helped me a lot to clear my doubts. Much appreciated!! 🙌🏻😊
@WebDevSimplified
5 жыл бұрын
I am really glad you enjoyed it!
thank you! I am from India, it's easy to understand and use your codes to my projects, thank you so much...
Thank you man, you helped 2 desperate students to pass their web class. You are the best
@WebDevSimplified
5 жыл бұрын
Thanks! I'm really glad I could help!
I was searching for info, and just by coincidence stumbled on this video i thought this shopping cart project was going to be done with classes (ex. Class Product) but still i learned more things, thank you for the video and for explaining so well, im going to check some of your other tutorials.
Simply amazing, I really enjoyed working with the code following the video. That's a lot of hard work you did. I really appreciate it. thanks
This is a perfect example of a GOOD Tutorial. great work
simply amazing. hands down the best tutorial out there for newbies learning javascript!
Amazing! This is so much help for a js beginner because you explain it to simply.
dude watching this gave a smooth start rather than udemy or any courses
thank you so much for this video, it was very helpful to my first Exam in JS.
I felt really good about having done the JS for this...I know html/css fairly well but haven't had any experience with js. Typically I can recall functions well when first learning but I went to try and update something within the JS file and I was at a total blank. I think this one is going to take me some extra learning time. I find that visual things like width, height, display, etc are really easy for me to understand because they have titles that usually match up to their direct description, but with script languages I really have found there to be a larger learning curve. That being said, I felt really good having this be my first real deeper dive into the language itself.
Thank you so much for your tutorial; very generous of you. I particularly liked your summary at the end.
Absolutely outstanding tutorial - thank you!
Best js video ever, i didint knew even basics of js but had a idea about programming. This video taught me most of the js things. Thank you so much
before i watch anything i know that you saved my day
Thank you so much made my own website and applied this video to it for the shopping cart works perfectly.
Such a good tutorial, thank you so much for spending your time on making this.
thank you,this helped me a lot to understand a lot of things in JavaScript
@WebDevSimplified
5 жыл бұрын
Glad I could help!
you are amazing. i have learned a lot of JS on this short video. thank you.
Unlike other's you get straight to the point!
Definitely worth liking and subscribing. Good job man. This helped out a lot in my assignments
nice!!!!. oh my godness. this is what absolutely what we need. right now i understand how to use javascript. Thanks mate!!!
@WebDevSimplified
5 жыл бұрын
You're welcome!
Thank you so much I've been looking for tutorials likes this.😀
Great! I'll will clone this for my DOM project at school, Very clear and efficient . Thanks alot
Thank you so much man!! Awesome tutorial !!!
At long last, thanks to these brilliant tutorials, I am starting to understand js syntax and concepts! I was able to work out which functions could be deleted (removed from the "ready" event), and which functions or statements needed to stay there. I was also able to create my own function to display all totals in the format of "£0.00". Excellent tuition - thank you!!
@himanshu1304
Жыл бұрын
hello firenzaman, i am facing an issue can u help me pls
amazing that was a totally complete tutorial..
Thank you so much u made me get a good grade in my class
I really enjoyed this video, Thanks mate!!!
I followed you from free code camp. Awesome tutorial. You are good and I'm glad to have discovered your channel
@WebDevSimplified
5 жыл бұрын
Thank you. I am really glad you enjoyed the videos. If you are interested in expanding the functionality of the shopping cart make sure to check out this video as well. kzread.info/dash/bejne/n32Tj5Otkqy-gaw.html
Best thing since Sliced Bread Your Tutorials Are AWESOME!!!
Hello ! With the series i manage to create my first web page. Simple but powerfull, Thanks for the content !
Thank you sooo much!!!! Please make more tutorials !! Making a portfolio etc? Love youuuu !!!
Love your videos, cant wait for more!
@WebDevSimplified
5 жыл бұрын
Thank you! My next video comes out in just a few hours.
love you man, this video help me finish my project
i havent any javascript knowledge but it really helped want me to learn this language.
@WebDevSimplified
5 жыл бұрын
That is great. Good luck on taking your learning even further.
it was an amazing tutorial! Thank you so much!
Hey, quick question: when removing the child nodes from the .cart-items after the "purchase", is there any difference between looping through removing every node and simply setting the innerHTML of the to ""? Thank you for the tutorial, once again, it is very thoroughly explained.
Thanks much, really recommend these tutorials for beginners.
Thank you so much for these great tutorials!
Thanks for this video which helps me to build my web site ! Great explanations !
many thanks from Syria we appreciate this efforts 🌸🌸
Thank you very much, you saved me 3 times thank you, u're my hero.
Thank you very much, I learned many things that my teacher can't teach us. Thank you
This is very helpful, thank you!
Thank you for making this video! It's been extremely helpful in helping me with my JavaScript project.
Wow!! Thank you so much for simplifying this literally. You are awesome.
Hi from Brazil. Your videos helps me a lot! Thanks!
I really like your tutorials, great explanation, thank you very much!
this is how all tutorials throughout youtube should be
Thank man, helped me a ton!
Thank you so very much! You are a saviour!!!!! God Bless YOu!
Would it be easy to implement this if I have products on separate pages and the Cart Checkout is it’s own page?
Billions of thanks dude ...!!!