JavaScript Shopping Cart Tutorial - Part 2/5
Project files: gum.co/pSpaA
★☆★ My Courses: telmoacademy.com/
★☆★ 1-on-1 Mentorship: calendly.com/telmosampaio
★☆★SkillShare 2 Months FREE : skl.sh/2Q2LsTi
★☆★ Best Website Hosting:
partners.hostgator.com/c/43399...
★☆★UDEMY COURSES:
*The Complete JavaScript Course 2018: bit.ly/2Ci2Fzk
*Modern JavaScript From The Beginning: bit.ly/2Br13BM
*JavaScript: Understanding the Weird Parts: bit.ly/2Epdgu2
*React 16.6 - The Complete Guide (incl. React Router & Redux): bit.ly/2Br2ikq
*The Complete React Web Developer Course (with Redux): bit.ly/2zXq9IH
* React Front To Back: bit.ly/2STDUPo
★☆★Best laptops for Coding:
Acer Aspire: amzn.to/2FJrOVh
Macbook Pro 2013: amzn.to/2NbYIUp
Asus VivoBook Pro: amzn.to/2YgrCUG
Macbook Pro 2019: amzn.to/2Xzi4qG
★☆★Best JavaScript Books
John Duckett JavaScript: amzn.to/2EAEvkj
JavaScript Easy Steps: amzn.to/2VRM4sN
JavaScript Good Parts: amzn.to/2EFul1V
Eloquent JavaScript: amzn.to/2Quq5qH
You dont know JavaScript: amzn.to/2K9I9VX
My Social Media:
Twitter: / devtelmo
Instagram: / sampaiotravels
Пікірлер: 116
I absolutely love this tutorial. Well structured, easy to understand, very useful. I subbed!
I’m just 6 minutes into this video and your JavaScript makes so much sense! Other people make it seem over complicated. Thank you!
This just keeps getting better. Best tutorial channel I've come across so far.
@Telmosampaio
4 жыл бұрын
Wow, thanks!
the best tutorial I have found. you have an amazing way of explaining, you go straight to the point, you are very clear, you manage to keep the attention on what you say. Thank you so much, it was really helpfull. I will follow yours tutorials from now on.
Best explaination of web storage on the whole youtube universe. Thanx a ton!!
Too Good!!!You have explained it so well. Slowly and step by step....I enjoyed this tutorial thoroughly...Thanks alot!!!!
I'm watching you video for the first time today it's now 2nd video. I feel totally understandable. Your way of explanation is amazing even a kid too can learn. Keep doing your great job bro. I'm in love with javascript after your teachings. Thank you so much. Subbed 🥰
This must be one of the well explained tutorial in JavaScript , Javascript seems more Easy, Thank you sir
There is nothing better than this explanation! thank you
Very good tutorial - and explanation of the console messages.
I found this tutorial after 4 days and believe me no one can explain so much easy that you explain thnkyou sir ❤❤❤
thx you so so so so much for this tutorial all the tutorials didnt help and they didnt explain but you DID all you explained your code was simple (for me) but worked perfect so thank you 1000000 times for this tutorial
Thank you so much. You explained everything clearly.
This can be hard for people who don't know very good english (like me), but can be even hardest for people don't know javascript very well (like me too). Despite this, very good explanation
Hi @telmo what if i am querying my products from the database, hw do i get them to the products variable in the main.js file?
Thank you so much Telmo. Appreciate it.
0:01 how did you put a size to your products? they're all the same sizes, how's that?
How is your "Add to Cart" button acts like a button without those inputs ?
as u have added let products =[{}]. what if we have 100's of products, how can we add all of them in our array?
sir for me in the cart button in navbar the number is not increasing or decreasing
This is so helpful! Thank you so much
8:22 i have quest for help, i doing step by step and then i check console like you at the same time after first click it show "null" second click show 1. there my problem?
Thank you so much my friend, you helped me a lot
Wonderful explanation. Kudos brother.
i am stuck on step 1, when I use querySelectorAll, carts length remains 0, I have checked the spelling and everything but nothing works, please help!
How do you do this when your products are stored at backend say Im using Firebase. Need HELPPP!!1
Hey. My cart span is not updating. What could be the cause of it?
it does not work with my becouce the cart[i] is not function
Man, even if I put in the same tag than my image, all the products that I select in the « application » have the same tag and proprietaries than the first product …. Can you help me please ??
Great tutorial. Bravo !
Hello, where do you get those data?
thanks bro . have nice day !
Thank you Telmo Sampaio...
Why I am getting file not found error when I try to get images in cart
nice one. but how do you limit quantity?
Thank you so much ❤️ helped me alot
Probably is the italian accent that let me understand most of the stuff! THX
then I used your function onLoadCartNumbers() { let productNumbers = localStorage.getItem('cartNumbers'); if (productNumbers) { document.querySelector('.cart span').textContent = productNumbers; } } onLoadCartNumbers(); I get console error Uncaught TypeError: Cannot set property 'textContent' of null in line document.querySelector('.cart span').textContent = productNumbers; I try document.querySelector('.cart span')[0].textContent = productNumbers; but still get console error. any advise?
Sir, after refresh cart value not returns to 0. Sir please help it's urgent. Waiting for reply sir.
thank you my brow for this super tutorial
clear explain thank you , good bless you😇
i love u telmo
Great tutor Sir you are, thank you so much !❤
Hi, I am trying to add the products but it won't work. I have buttons on my site. I did copy your script exactly . I tried to wrap the button but not sure , also added the add-cart in the button class but I realise you need this hyperlink maybe. Add to cart
The LocalStorage part doesnt work for me
thank you so much
Sir this is the best video to learn how to add items to cart but please explain how to remove them
So helpful!! thank you so much!
@AntonioRodrigues-ko2js
3 жыл бұрын
lml
Excellent course 10/08/2020
Thanks
Man, you just saved my degree life
what software is he using?
very well explained :) 10x mate
Hey, I'm having an issue, I don't understand how you were able to pull the products just by the tag name, I mean where is that tag declared exactly cuz I got confused...
@Telmosampaio
4 жыл бұрын
your images, should have the same name as the tagName
Hey I have an error in cartNumbers(); at the line 6 I do not know why ?
@Telmosampaio
4 жыл бұрын
Hey check the files in the description
Hello, i'm having a bit of an issue in the 1st line when i type "let carts = document.querySelectorAll (".btn"); " , (my ".btn", is the add-cart in your case), i keep getting an error called "Parsing error: Unexpected token carts". I'm confused since i just copied u in that part, i didn't see u define it anywhere else expect in the .js file? Is there a way to fix this error? or can you explain it in a simple way, since i'm still new this javascript
@chaudharyahmad2991
4 жыл бұрын
dont type .
@dylanpilotto4368
3 жыл бұрын
did you get a solution man?
Hi, may I know why my console.log("running") can't show in Google chrome console??
@surreal9558
3 жыл бұрын
this is an oldercomment, but remember that
@applezhe19
3 жыл бұрын
@@surreal9558 alright thanks bro
@vladcristian5106
3 жыл бұрын
@@surreal9558 thank you dude, I searched the same thing and reached your comment
if i have .add_cart::after how can i change it in js file?
@dmns18
3 жыл бұрын
Portuguese
It's black friday, can you give us a discount code for the files? :)
it does not work when i have the same like you ;/, what about your images? where are they from?
@Telmosampaio
4 жыл бұрын
Hey Kristyan, you can use any images you would like, there is also a link on the description to download the files and images if you want of course....
@krystianwojtowicz9305
4 жыл бұрын
@@Telmosampaio if I dont have any photo in one of that 4 parts it is possible to click add card, I can't do it otherwise
Thank you , obrigado Telmo.
@Telmosampaio
2 жыл бұрын
De nada Mauro, espero que tenha ajudado
THANK YOU!!!!
Can this make transactions
thank you !!! 😁😁😁😁
Hi I have a problem with onLoadCartNumbers function. I think that is about that you forgot to put else after if.
@TheRegan0704
4 жыл бұрын
i also have an error here. when i go to the cart page it says "Uncaught TypeError: Cannot set property 'textContent' of null at onLoadCartNumbers"
@TheRegan0704
4 жыл бұрын
nevermind, forgot the add the cart class to cart.html page
I am dong this tutorial twice because it is one of the best tutorials telmo. btw, is using he local storage like this used in the job also? like in a real production applications for front end or is this just for learning purposes?
Awesome tutorial. Cheers to you dude. But How Can I get the data from my database table which is in array format and use it in javascript code as an object...
@avinash6097
3 жыл бұрын
Did you get the solution bro?
@kshitijkumarsaini9501
3 жыл бұрын
@@avinash6097 yes
@avinash6097
3 жыл бұрын
@@kshitijkumarsaini9501 please help me too bro. I am using firebase as my database and JavaScript as backend
@kshitijkumarsaini9501
3 жыл бұрын
@@avinash6097 try this kzread.info/dash/bejne/lHqol6d6aZjYfrA.html
@avinash6097
3 жыл бұрын
@@kshitijkumarsaini9501 it will be a great help if this will work fam. Can you give your discord or something where can I hit you up if I have further doubts? mine is NEMEBRO#4751.
AT 10:15 Google Chrome only shows the first product that I type in, the second product that I type in is not showing at the console. Is it because that, I create one product in one html page( not same as you, you have all product in one html page)? Can anyone help me please, I need help for my assignment. Thank you so much
@Javous12345
3 жыл бұрын
do you fix it because im having the same error like you so i need some help pls
@ngkenleong555
3 жыл бұрын
@@Javous12345 I am not really remember how to fix the error, but i remember that i was missing some steps (code) from the video. Just watch the video again carefully . Hope this can help you. Good Luck, dude!
@Javous12345
3 жыл бұрын
@@ngkenleong555 it ve been a month ago bro 😝 but i just relearn local storage and do my own and then i ve no errors 😉
@ngkenleong555
3 жыл бұрын
@@Javous12345 I see🤣. Congrats bro🎉
Hello, this has been so helpful, I will like to ask, what if in the case where you have a lot of products, how do you reference the products, do we list them in the products object like you created or is there any other way to get the object when you click on add to cart. i tried to use the getElementByClassname but it was not giving me the required result.
@danielway6223
4 жыл бұрын
yeah I'm having the same problem and I can't figure out what is going on if i do find anything I will let you know
@TheTallOne1996
3 жыл бұрын
Same issue! @Telmo Sampaio do you have an answer?
@hussienalzeer4975
3 жыл бұрын
i was about to ask the same thing, in my case i have database with all the information so they will have the same classes names , i cant do the same as him ,and making like dosnt is bad idea when you have huge database ,please someone answer me ,i have looking for an answer for so long .
Thank youuuuuuuuuuu
Nice!
good!!!!!!!! I like it
keep having error
super
I am unable to download the code please can u assist or can u send me the code on my email id
@Telmosampaio
4 жыл бұрын
Hi Siddharth, did you buy the files?
U did not define carts From the beginning why ?
@n.thelegend9671
4 жыл бұрын
I need ur help plz
@ftnesrine8183
2 жыл бұрын
I'm facing the same problem, did you fix it ?
12
let carts=document.querySelectorAll('.add-cart'); let products=[ { name:'Gray T-Shirt', tag:'Graytshirt', price:15, inCart:0 }, { name:'Blue T-Shirt', tag:'Bluetshirt', price:20, inCart:0 }, { name:'Yellow T-Shirt', tag:'Yellowtshirt', price:10, inCart:0 }, { name:'Lowers T-Shirt', tag:'Lowersshirt', price:25, inCart:0 } ] for(let i=0;i{ cartNumbers(products[i]); }); } function cartNumbers(product){ console.log(product); let productNumbers=localStorage.getItem('cartNumbers'); productNumbers=parseInt(productNumbers); if (productNumbers) { localStorage.setItem('cartNumbers',productNumbers+1) document.querySelector('.cart span').textContent=productNumbers+1; } else{ localStorage.setItem('cartNumbers',1); document.querySelector('.cart span').textContent=1; } } function onLoadCartNumbers(){ let productNumbers=localStorage.getItem('cartNumbers'); if (productNumbers) { document.querySelector('.cart span').textContent=productNumbers; } } onLoadCartNumbers();
Me in 2022 using copilot to predict the code...
no thanks, prefer other methods like cookies and ajax products from db
Sorry but this series is an exact copy of another done by someone who knows the subject matter.
Ak dam bekar h