JavaScript Shopping Cart Tutorial for Beginners
ฝัง
- เผยแพร่เมื่อ 3 ต.ค. 2024
- 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/Web...
Finished Code For:
github.com/Web...
Make The Shopping Cart Accept Payments:
• How To Setup Payments ...
Band Website HTML Series:
• Introduction to HTML |...
Band Website CSS Series:
• How to Style a Modern ...
Twitter:
/ devsimplified
GitHub:
github.com/Web...
CodePen:
codepen.io/Web...
#Javascript #WebDevelopment #ShoppingCart
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. th-cam.com/video/mI_-1tbIXQI/w-d-xo.html
Please also add shopping cart in php, all the videos in TH-cam are not good
You're very good at explaining, thanks for making this for free!!
Could you do the same using php as the server side language plz
Thank you for such amazing tutorials with great content! :)
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.
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.
Thanks! I am really glad you enjoy the videos!
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!
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.
yeah man its been a struggle. I want to change my life for the better but web dev is hard.
@@Seekingtruth-mx3ur Likewise, it will be fine soon, keep powering through :)
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.
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!
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.
@@WebDevSimplified Yes u are M glad i found your channel ,this was alot of help
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
He was talking 19,000 mph. I could hardly understand a word he was saying.
Whenever I need to refresh my JavaScript I watch this video, just so I can get a grip of the basics. This is amazing!
same haha
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.
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.
@@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.
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.
I was intimidated at first but as the topic moves on, everything feels right. This is simple but powerful! Absolutely perfect.
Get lost you skeptic
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!
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!
True
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
Hello ، i have problems could you please help me 😢??
@@WebDevSimplifiedhey thank you for this tutorial, but console.log doesn't show anything to me , it doesn't work for me 😢
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
Thank you! Comments like yours are what make me love doing this so much.
just copying and still doing wrong
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
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!
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.
I really appreciate how you explain everything including the basics. Thanks man!
You're welcome!
Thank you so much made my own website and applied this video to it for the shopping cart works perfectly.
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 !
With the series i manage to create my first web page. Simple but powerfull, Thanks for the content !
This video saved my life! One of the best tutorials I've seen!
Thank you very much, I learned many things that my teacher can't teach us. Thank you
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 TH-cam 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 :)
I am really glad I was able to help. Keep up the good work!
@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.
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!!
hello firenzaman,
i am facing an issue can u help me pls
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
One of the best, high quality, easy to understand JavaScript tutorials!!
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!
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!
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
a man who share code and don't deceive people has my respect also a permanent subscription.
finally a good channel recommended by TH-cam. Great effort and nice video
Thank you so much! I hope the rest of my videos are just as helpful for you.
@@WebDevSimplified Do you make videos on Angular too ?
@@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.
@@WebDevSimplified Ok bro no problem.
Thank you so much I've been looking for tutorials likes this.😀
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!
I ve just built my first time JS shopping cart thank you bro. there is no clearer than that !
Thank you, man! You're the best! All my problems are solved now!
Thanks! I'm glad the video was able to help 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!
What if I want to have the cart on a separate HTML page?
That is what am currently working on but I couldn't get it right
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.
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!
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.
@@WebDevSimplified sounds like more of the video to continue? It would be cool to see this connected to a small personal database.
Please, can you add a button which creates a summary of the cart, which can be sent using WhatsApp API, Please, Please, Please
@@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 🙏🏻
Unlike other's you get straight to the point!
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.
Its doesn't work. I'm facing this issue as well. Have you get any solution about this issue? 🙂
Use session variable. You need a server for this and to use php.
@@g.r2780 use localstorage
i was wondering same question
@@yadusolparterre how?
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.
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 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
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
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?
Mind sharing the solution if you found it?
Thanks much, really recommend these tutorials for beginners.
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!
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.
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
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.
Thanks. I love vanilla JS so I definitely won't stop.
Your tutorials are great but in this episode I think there is too much going on
lolzzzz
love you man, this video help me finish my project
many thanks from Syria we appreciate this efforts 🌸🌸
Thankyou So Much You Are The Best Guy On TH-cam Sorted My Problem Pls I Wish You Reach 10mil In This Month
Dude, it's awesome!! I looking for same information for a long time on rutube, but there were nothing essential. Thank you very much!!
This video taught me so much which is exactly what I want
Thank god a pure english tutorial
I have just completed your tutorial. Great thanks! I havent seen any better tutorial yet.
Best thing since Sliced Bread
Your Tutorials Are AWESOME!!!
Thank you man, you helped 2 desperate students to pass their web class. You are the best
Thanks! I'm really glad I could help!
Thank you for making this video! It's been extremely helpful in helping me with my JavaScript project.
i havent any javascript knowledge but it really helped want me to learn this language.
That is great. Good luck on taking your learning even further.
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!!!
Thanks a lot WEB DEV SIMPLIFIED. This has been a headache. I just want to let you know that this knowledge is going a long way to raise funds for less fortunate children in Kenya. I would want to give you the credit when the project goes online. WITH YOUR PERMISSION.
Thank you sooo much!!!! Please make more tutorials !! Making a portfolio etc? Love youuuu !!!
Great! I'll will clone this for my DOM project at school, Very clear and efficient .
Thanks alot
Thank you this video very help me for my college project
Wow!!
Thank you so much for simplifying this literally. You are awesome.
an year ago I used to find it so complex to look at, but the tables have turned now
this is how all tutorials throughout youtube should be
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.
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!
Awesome tutorial. You have just saved me days of coding and debugging! Thanks!
Hi from Brazil.
Your videos helps me a lot!
Thanks!
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 !
Thank You So Much for this wonderful video..........🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻
Thank you so much man!! Awesome tutorial !!!
Very clear explanation. I rate ⭐⭐⭐⭐⭐.
thank you very much, sir!!
I had so much fun following along...
It was my first working web page
thank you, sir.....I hope to learn more from you😁😁😁
simply amazing. hands down the best tutorial out there for newbies learning javascript!
Thank you so much for direct way of explanation, all of your videos are great and your channel is a gold mine, you just need to slow down your speed, i cant catch up with you while i write . I just need the javascript code to check with my own because i have an issue with add to cart button and updating the total.
Thank you
I understand also forloop clearly thanks keep rocking
The teaching was very good👍
simple and understandable.
Such great and practical tutorials you make, buddy. I love them.
Billions of thanks dude ...!!!
thankyou so much bro. your awesome tutorial. also this tutorial helped me at perfect time.
amazing video, it made everything so easy to understand and frankly i wish you were my professor
Awesome! Simple and easy to understand! Thank you for looking forward to more similar videos
Very simplified Explanation
dude watching this gave a smooth start rather than udemy or any courses
Thank you so much for your tutorial; very generous of you. I particularly liked your summary at the end.
This is very helpful, thank you!
Thank you so much for these great tutorials!
Nice and clean explanations. You solved half of my project. Thank you
You're welcome!
I really like your tutorials, great explanation, thank you very much!
Thank you, thank you, thank you.
However, you remind me of my calculus teacher. Each class he would explain all sorts of stuff but our text book homework was nothing like what he was talking about. 🤪
Anyway, Thank God for TH-cam videos.
I can go back and watch this over and over again.
Thank you for sharing this project tutorial, it helps a lot even though I consume a lot of time trying to analyze your code.
Great will try to join your course if I have a fund to pay.
It was a good practice of my newly learnt JS skills.
Thank you❤
My brother thank u very much for making this useful video... It helps us to understand coding very easily... Thanks once again... Love u bro
amazing that was a totally complete tutorial..
best explanation and great video. Thank you
Thanks alot... as always (explanation was top notch..)
Thanks for this video which helps me to build my web site ! Great explanations !