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:
https://github.com/WebDevSimplified/Introduction-to-Web-Development/tree/master/Introduction%20to%20CSS/Lesson%203
Finished Code For:
https://github.com/WebDevSimplified/Introduction-to-Web-Development/tree/master/Introduction%20to%20JavaScript/Lesson%201
Make The Shopping Cart Accept Payments:
Band Website HTML Series:
Band Website CSS Series:
Twitter:
Tweets by DevSimplified
GitHub:
https://github.com/WebDevSimplified
CodePen:
https://codepen.io/WebDevSimplified
#Javascript #WebDevelopment #ShoppingCart
Original source
46 responses to “JavaScript Shopping Cart Tutorial for Beginners”
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. https://youtu.be/mI_-1tbIXQI
Good Night the video is very excellent and helped me a lot, however, I will like to learn how to add the item from the description page to a separate cart page, please with the same functionality.
Thank you so much u made me get a good grade in my class
can i convert this to php is it possible is it the same logic ?
feels a bit long-winded…
Thank you so much for this video. It helped me a lottt!! But i wonder if its possible to change the dollar currency to other currency?
Superb explanation !! Really awesome !!
Just a question: It is possible to seperate the CART into another page? Not with the items? Thank you very much!
ebaniy english sukkaaaa!!!
when you're adding rows, what if you have a separate page for the cart (say cart.html) how does it work ?
Thank you very much!!!
increasing the quantity is not increasing the total price. i am in localhost. please help
I really enjoyed this video, Thanks mate!!!
I am getting this error
Uncaught TypeError: Cannot read property 'value' of undefined
at updateCartTotal
Amazing! This is so much help for a js beginner because you explain it to simply.
Anyone else experience the 'Add To Cart' button not working on mobile? I click it and nothing happens
The information stored in the cart, how could I create a pdf with that information? By clicking on the purchase button, generate the pdf.
Thank you for this tutorial i learned so much from you which i can be used when i create my very own website 😃
Thats for saving me ass my dude. My teacher only told us few basic commands and gave pretty much same excersie as homework. I cannot stress enough how basics of C++ do not fucking cover basics of js!!!
sir I want to see the shopping cart on a separate page what to do for that sir ? please help me out
May I ask a question on how to do it if the data is stored in a database and not manually?
can i use it for php project?
Great video — but it doesn’t work on mobile. Add to Cart button doesn’t do anything when I click it on my iPhone. Anyone know how to fix this?
you are amazing. i have learned a lot of JS on this short video. thank you.
Anybody have an example to create cart using Javascript classes (oop)?
save my life ,
Hey I downloaded the code like you advised and the html and the other files are different than the code you are using in your video. Would it be too much to ask that you upload the original code you used in the video?
Sorry to be a pest.
Thanks
What happens when you refresh the page with a full cart before actually purchasing?
Hey, Why the source code you gave is slightly different from the one in the video
Thank you very much
Very good video.Thank you very much for even sharing the code for free that is a blessing…..good work.
Extremely helpful video. Liked, subbed, 🤜 bro first.
my ${imgsrc} does work and even highlight in the vs code!why?
i'm having this error in my title innertext. Uncaught TypeError: Cannot read property 'innerText' of undefined
at HTMLButtonElement.<anonymous>bag.js:46. please i need a way out this's waste two days of mine!
Really enjoyed this video! If you want to display the cart to another html page you must use local storage but how do i do this with your example?
You are Great. Thanks.
how can i change the dollars sign to my country money?
Hello, can data be brought from a database with php?
Bye.
Hello, I have a website that I,m trying to write the code for, so my site will function like that! You can email me at digitaleara@gmail.com to let me know your prices!
Thanks in advance,
Shawn!
Nice tutorial but I have a quick question. I was wondering how would you save the added items to the cart after refreshing the page.
edit: I want to use session storage but I'm not sure what I var I should store
Excellent work, sir. Your videos are very educational and helpful. However, if I may give you some unsolicited feedback: personally I would love to see you delve just a little bit deeper when first going over a new concept (loops, functions etc). By deeper I mean maybe spend say 1 to 2 minutes max explaining how it works and perhaps sharing a resource of where someone could learn more about them. I think that will be very beneficial for us newbies. Cheers.
thank you
Web Dev Simplified indeed. Wasted 2 weeks learning add to cart feature from most viewed videos here in youtube but learned it for 45mins with this video. P.S. Can you please do some tutorials on php mysql with javascript. Thankyou and Godbless!
Too many ads
Nice and clean explanations. You solved half of my project. Thank you
1 year later, still clean and efficient