• Thursday , 16 July 2020

JavaScript Shopping Cart Tutorial for Beginners

Code Canyon



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:

GitHub:
https://github.com/WebDevSimplified

CodePen:
https://codepen.io/WebDevSimplified

#Javascript #WebDevelopment #ShoppingCart

Original source

3d Ocean

Related Posts

46 Comments

  1. Web Dev Simplified
    December 11, 2019 at 07:41

    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

  2. Akeme Moore
    December 11, 2019 at 07:41

    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.

  3. Tomás Pacheco
    December 11, 2019 at 07:41

    Thank you so much u made me get a good grade in my class

  4. Hermes Tiwaz
    December 11, 2019 at 07:41

    can i convert this to php is it possible is it the same logic ?

  5. Stephen M
    December 11, 2019 at 07:41

    feels a bit long-winded…

  6. Maq dè Lé
    December 11, 2019 at 07:41

    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?

  7. Prashant Bedekar
    December 11, 2019 at 07:41

    Superb explanation !! Really awesome !!

  8. RubenOchoaPerez
    December 11, 2019 at 07:41

    Just a question: It is possible to seperate the CART into another page? Not with the items? Thank you very much!

  9. Богдан Недашковский
    December 11, 2019 at 07:41

    ebaniy english sukkaaaa!!!

  10. Jagruthi G
    December 11, 2019 at 07:41

    when you're adding rows, what if you have a separate page for the cart (say cart.html) how does it work ?

  11. RubenOchoaPerez
    December 11, 2019 at 07:41

    Thank you very much!!!

  12. Ashikur Rahman
    December 11, 2019 at 07:41

    increasing the quantity is not increasing the total price. i am in localhost. please help

  13. MeTubeTiTube
    December 11, 2019 at 07:41

    I really enjoyed this video, Thanks mate!!!

  14. Gaurang Shroff
    December 11, 2019 at 07:41

    I am getting this error
    Uncaught TypeError: Cannot read property 'value' of undefined
    at updateCartTotal

  15. Never No
    December 11, 2019 at 07:41

    Amazing! This is so much help for a js beginner because you explain it to simply.

  16. The Answer
    December 11, 2019 at 07:41

    Anyone else experience the 'Add To Cart' button not working on mobile? I click it and nothing happens

  17. O Magno Peralta
    December 11, 2019 at 07:41

    The information stored in the cart, how could I create a pdf with that information? By clicking on the purchase button, generate the pdf.

  18. Demi God
    December 11, 2019 at 07:41

    Thank you for this tutorial i learned so much from you which i can be used when i create my very own website 😃

  19. karol chruzik
    December 11, 2019 at 07:41

    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!!!

  20. Raghav Pujari
    December 11, 2019 at 07:41

    sir I want to see the shopping cart on a separate page what to do for that sir ? please help me out

  21. Ptr Zle
    December 11, 2019 at 07:41

    May I ask a question on how to do it if the data is stored in a database and not manually?

  22. Davron Khudoyberdiev
    December 11, 2019 at 07:41

    can i use it for php project?

  23. The Answer
    December 11, 2019 at 07:41

    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?

  24. Joc kst
    December 11, 2019 at 07:41

    you are amazing. i have learned a lot of JS on this short video. thank you.

  25. Mohsin Rahman
    December 11, 2019 at 07:41

    Anybody have an example to create cart using Javascript classes (oop)?

  26. السعيدة الناجحة
    December 11, 2019 at 07:41

    save my life ,

  27. scott mcmahon
    December 11, 2019 at 07:41

    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

  28. vibonacci
    December 11, 2019 at 07:41

    What happens when you refresh the page with a full cart before actually purchasing?

  29. bryen yap
    December 11, 2019 at 07:41

    Hey, Why the source code you gave is slightly different from the one in the video

  30. Zulu Writer
    December 11, 2019 at 07:41

    Thank you very much

  31. KurryKinG455
    December 11, 2019 at 07:41

    Very good video.Thank you very much for even sharing the code for free that is a blessing…..good work.

  32. REP Gaming
    December 11, 2019 at 07:41

    Extremely helpful video. Liked, subbed, 🤜 bro first.

  33. Tåwhïd Úl
    December 11, 2019 at 07:41

    my ${imgsrc} does work and even highlight in the vs code!why?

  34. Tåwhïd Úl
    December 11, 2019 at 07:41

    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!

  35. Zanneleen Wallace
    December 11, 2019 at 07:41

    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?

  36. Oliver Mathi
    December 11, 2019 at 07:41

    You are Great. Thanks.

  37. Red Swift
    December 11, 2019 at 07:41

    how can i change the dollars sign to my country money?

  38. german hernandez
    December 11, 2019 at 07:41

    Hello, can data be brought from a database with php?

    Bye.

  39. Moneico Robinson
    December 11, 2019 at 07:41

    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!

  40. Abubaker BinHaidrah
    December 11, 2019 at 07:41

    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

  41. Andrei
    December 11, 2019 at 07:41

    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.

  42. IND Tejash
    December 11, 2019 at 07:41

    thank you

  43. zj robin
    December 11, 2019 at 07:41

    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!

  44. mattrex94
    December 11, 2019 at 07:41

    Too many ads

  45. testing oracle
    December 11, 2019 at 07:41

    Nice and clean explanations. You solved half of my project. Thank you

  46. flysolomac
    December 11, 2019 at 07:41

    1 year later, still clean and efficient

Leave A Comment

You must be logged in to post a comment.