JavaScript Shopping Cart Tutorial - Part 3/5
Вставка
- Опубліковано 4 жов 2024
- Project files: gum.co/pSpaA
★☆★ My Courses: telmoacademy.com/
★☆★ Treehouse Discount Code: bit.ly/2FtkrPL
★☆★SkillShare 2 Months FREE : skl.sh/2Q2LsTi
★☆★ Best Website Hosting:
partners.hostga...
★☆★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
Guys this video was missing from the playlist, really sorry about that, and thanks for those of you who let me know
Hey can you solve my error please??
Hello
Everything was going good but then now I am getting the error "My cartItems are null" at 9:25.
Please help
Thank You
@@trishanksingh6110 same problem, did you solve it?
thanks man u are really good, but where can I fine the last video pleas ??
@@ernestochin1914 Have you tried copy-pasting the word cartItems and not typing it, that's what I did, seems to work for me.
I've watched a lot of video tutorials but only this time I can understand clearly. Thanks Telmo!
I have honestly been looking for this video for over a year now. You are a life saver
FOR THOSE HAVING THE product: undefined ISSUE IN CONSOLE:
I literally spent the whole day solving the issue and read the code for a zillion times but to no avail.
What you have to do is, simple add "let " in the for loop you created.
INSTEAD OF:
for (i=0 ; i < carts.length ; i++) {
carts[i].addEventListener("click", function() {
cartNumbers(products[i]);
})
};
RATHER DO:
for (let i=0 ; i < carts.length ; i++) {
carts[i].addEventListener("click", function() {
cartNumbers(products[i]);
})
};
and the issue is solved 😭
Hey.....
Did you solved that problem.... 🥺
I tried it, bt the result is same 😭,and I need to submit my project tomorrow... Can anyone help me for this problem?
@@uarts5336 yes i did- so so sorry for the late reply.
wow, thank you so much
thanks bro
"Simple and perfect!"
this is for those who got undefined while pass array as object on cartNumber(product) just use foreach instead of for loop due to some reason of index problem ok by hope you fix it if you have problem thanks by
buy_btn.forEach((btn, index) => {
btn.addEventListener("click", () => {
cartNumber(product[index]);
});
});
Doesn’t work either
Love the accent, and the tutorial was super easy to follow and made learning js so much simpler when you explained it all so clearly and informativly. Love the work keep it up dude!
It's better to make a product object inside setItems function every time we call it because, in your case, for every new product we add to the website we would have to ad a new object to the products array. Or we could make products array automatically create new product when the product is clicked. There are numerous ways that would make this solution programmatic/automated, as it actually needs to be in programming.
I'm following along great series thanks telmo!
Thank you Joe :)
Telmo Sampaio thank you for the video I absolutely love this video it's exactly what I was looking for as far as building a shopping cart for my project to show employers once this cov-19 ends. :D I did have a newbie question I'm fairly new to js compared to many others I only been working with the language for a few months and I noticed almost every tutorial or concept is something new... is that a normal situation throughout your learning or is it because I'm missing on basic concepts dealing with the language?
Hi, I'm facing a problem. Where during my first click on the button, the console stated "..... are null", and its added to the cart, yet as in the application part, the number added is falling 1 click behind. thanks
I am also facing same problem 😅
you know what ?! i dont know who u are , but i love u so much brooo :((( thank uuuu. i was trying add to cart 2 days , and u make my word happpier now . thank u
You are just amazing. I clearly understand each and every step.thankyou so much.
i am getting error at incart count code is right but its showing undefined
I have a separate page for each product and it only show the first product when i console.log(product); how do i fix this
same problem... did you solved it?
I also have the same problem. Did you ever solve it?
@@scarbelly32 Nope i still have this problem, i think that a solution might be to do a product gallery where in one page you put every product you, have separated with some text or something
Can someone explain me this:
let cartItems = {
[product.tag]: product
}
what is that for and why he isn't just putting in the product itself into setItem as an value --> it is at 5:48
array of objects. so that it can later get converted to json string
hi, your video is great. My object 'inCart' is an array not a number like you did. So could you pls guide me how to store the number of cart items in 'inCart' array?
Telmo, Best Explain ever seen. Thank you so much!
I am getting an error saying that "My cart items null" in the console. It worked until 8:55. I followed as you did. Can I get a solution?
line 64 "console.log("My cart items are", cartItems);" delete it and write it after line 72 "localstorage.setItem("productsInCart", JSON.stringify(cartItems));"
had the same error and found it this solution that worked for me
@@youssifsamirr8209 thank you!
@@youssifsamirr8209 THANKS!!
@@youssifsamirr8209 thanks bro, u save me there.
When I add second product it is showing null in my inCart. Can anybody please help me?
Great series, I purchased the files, however I am not seeing a way to add clothing sizes. Can you help?
At a moment I was like "Dudeee,is not working,there is a bug. What have you done,why is it working on your project but on mine is not, I wrote exactly the same thing" ...waits 2 minutes "Aaaaa.....so this isn't the final version of the function,yeah it makes sense"
Hi telmo,
I have error in line69 (...cartItems,)
Plss help. It says unexpected token or syntaxerror.
I've learned far more from your contents than my college lecturers. Thank you.
Amazing Telmo. Great Work. If this was 2009
I would give you 50BTC right now.
I get the data from api and whenever i click on the add to cart button it overwrite the previous one
Any suggestion??
Bro did you find a solution for this problem I am facing the same.
hi, after buying the full code, i still couldn't grasp on how to add new products in. when I tried, it would always like me to the previous 4 products instead of the new products
Send me code bro
Did you later find out how to add more products?
Cause I'm having the sane issues as yours when I tried to add more products and I click on it it refers me to the previous ones have done
@@crazyboychandu4391 check repository in his github you would get the code there
Hi, thanks for this tutorial but I have a problem when I read the product
values from the database and write in the object it gives an error that the product is undefined,
where is the problem?
Re-read your code, cause it could be as simple as a typing mistake or spelling mistake. I've had that happen to me heaps.
I have the same problem lol💔💔
Me too
Bro ye vali query hui solve
Dude why my code is not running? Whenever I click on add cart it displays a message on the console 'The product clicked is undefined' .
same with me i have write same cide but this error is appear
The
cartItems[product.tag].inCart +=1;
line is causing an error for me. " cartItems[product.tag] " becomes undefined no matter what I do. Any solutions?
He addressed it at 14:00
For some reason when I put console.log("The product you clicked is"), product; it gave me undefined, what could be the reason for this since I copied the code exactly how you have it?
Same issue! How did you solve it?
@@sarymsikander5251 use let before the "i" in your for loop
@@iqmatolaniyan8728 i am the same person who you thanked in another comment XD this is an older comment. when i solved it, i commented the solution later. 😄
@@sarymsikander5251 ohh, I just saw that😅
Thank you Telmo Sampaio...
I am trying to use the same logic on TypeScript but apparently the spread operator does not work as shown here. It keeps telling me that it only works on objects even though I parsed the JSON string from the Local storage into a JSON object.
Sir, what would I do if my products are on different web pages?
just like an example if your index page has no add to cart button and if I click that image it will open a different webpage for details and having add to cart button there then how will I get the product in the cart?
Did you find out how to do it? I have the same problem, I have multiple pages with different products but it is not working properly.
@@Jatin-xh7sm no, till now
Hey guys, is there any one now how we can dynamiclly feed the array with dynamic product.
Thanks for your help.
You can create a products api with ExpressJS that adds the products to a database and deploy with Heroku. You can use Firebase Firestore for the database, and with vanilla JS, you can fetch the products, loop the products and display it dynamically by appending it to the DOM.
at 15:57 when you get the error of 'undefined' i do not, it just console logs the item that is already locally stored... please help me!!!
In this you have created "products" but many times u have called "product" so where u have made product? I can get that so plz help
Thank you for making this, it was extremely helpful
it help me a lot.
If we want product inner product then ....?
Hi! I would like to know, why does my clicked item says it’s “undefined”😔 I tried to follow the whole tutorial but I still have the same problem. I would like very much to have an advice. Greetings from Mexico
Hola Rosita, can you send me your code through codepen maybe, and I will have a look :)
Oh me too!!!!!! Did you find the solution???? Very confused...
@@Telmosampaio help I have same problem.
Rosa
I got solution your number of divs o products must not be equal to the total number of array index hope this helps
How did he assign the name of the product into the [product.tag] ? I cant seem to figure that part out
i am having the same problem did you figure it out?
with [product.tag] you probably wrote "products" instead of "product"
@@Luchiittooo20 no no, i have same problem with cartItems[products.tag].inCart+=1;
and it not working doesn matter if you write S/ or no, because its about how you added the property.
Seus vídeos são mto bons, congratulations man.
Obrigado Raphael!!
Why does in my undefined code it still has an error? I already followed your code 1 by 1
same problem in my code.. plzz tell me if u got the solution...
Hello, I have an error at this part. In the setItems function it says "Property 'inCart' does not exist on type 'string' "
I have same problem, U solved it or someone else?
First you should check if your .getItem and .setItem have the same key (in the video we have "productsinCart", try to check it letter by letter), otherwise you can put (cartItems = parseInt(cartItems)) instead of (cartItems = JSON.parse(cartItems))
Telmo Sampaio thank you man
great video, but how can I add information from a radiobutton in the product list?
if anyone is new here and facing an Error that products are not adding so here is the code just copy and paste it
function setItems(product) {
let productNumbers = localStorage.getItem('cartNumbers');
productNumbers = parseInt(productNumbers);
let cartItems = localStorage.getItem('productsInCart');
cartItems = JSON.parse(cartItems);
if(cartItems != null) {
let currentProduct = product.tag;
if( cartItems[currentProduct] == undefined ) {
cartItems = {
...cartItems,
[currentProduct]: product
}
}
cartItems[currentProduct].inCart += 1;
} else {
product.inCart = 1;
cartItems = {
[product.tag]: product
};
}
localStorage.setItem('productsInCart', JSON.stringify(cartItems));
}
thank you
Telmo, ppl have problem wiht you Cod, with .inCart
HOw solved that?
I have problem here:
setItems(products)---function:
if (cartItems != null) {
cartItems[products.tag].inCart += 1;
} else {
products.inCart = 1;
cartItems = {
[products.tag]: products
}
}
Can someone help my, and explain why it not work? I have problem with this (any property)
Could you solve it? I'm in the same situation lol
It really helped me man
i thank you a million time
why when i click on first product i get inCart the number of the item ,, when i click on the sound product i get inCart '011'
I have the same problem, did you find a solution for this?
JavaScript is adding it as a string put a + before the product
@@kennyakins3536 same problem, idnt solution
What's the difference between product(at 1:28) and products (at 1:04)
you're godsent
Thank you so much such Allah bless you
I got an undefined error in products
How do you round the cart total??
How can i use JSON? Because i have promblem with the code.
I was doing fine until 6:00, I don't understand what cartItems = {
[product.tag] : product
} is or what is declares. like why is it in an array [product.tag]
If you look ahead 7:36 I show you that [product.tag] : product is going to be a new object with a key of "greytshirt" and value is another object
@@Telmosampaiothanks for the reply, I was probably not familliar with the syntax. I only learned from codecademy lol but why is it in brackets instead of " "? also the ...cartItems rest operator was new to me. I will have to look into that
You need to use the brackets because thats the only way you can use the variable in there, if you use " ", you can't inject the value of your product.tag there, the output would be exactly = "product.tag", meanwhile if you use the [product.tag] the output will be exactly = "greyTshirt"
@@Telmosampaio oh right right! I totally forgot the rules of notations and how variables, parameters, special characters, number or strings with spaces have to be in brackets.
Telmo Sampaio i have a problem in 9:25 my cartItems are null
super video thanks for making
Excellent course
10/08/2020
wat for is the stringify dude? , its like u send the code like loopings
a life saver
When I click on something the console says the clicked item is undefined..? Help
Use forEach instead bro.
did you find the solution?
@@samarthanirmal3875 it works!!!! thanks bro!!
@@samarthanirmal3875 Where do you use forEach?
Great videos! It helps a lot
Very nice
help my if statement is not working in inCart it doesn't plus 1
Did u get solution for this problem
@@crazyboychandu4391 did u solve it
Great video !! But how do i get the array of productos from my html? Here you put it manually ! (Im have started coding since two month ! !!)
use tenplate literal,
*template
@@theopenstack sure, how can i send u?
@@theopenstack yes , how can i send?
@@theopenstack ohh it's find I'll send u link to my drive wait a moment
Amazing tutorial!!!
Hello, there's two things that I don't understand (i'm a beginner in js, currently learning) :
First, I'd like to know why you used the operator "..." is it supposed to do something in the code ? In these lines :
cartItems = {
...cartItems,
[product.tag]: product
}
Secondly, what is the use to convert a json to JS object (or the contrary) ?
@Gabriel Andy Fono I still don't get exactly what is going on with this spread operator.
There are like a "shortcut". Instead of saying:"take everything what was already selected(take the black t-shirt,the grey one etc) " you just put "..." in that way the compiler will add to the old selected products the new selected one,without writing much code. Hope it helped! :)
my cartitems are null i don’t know what are the problem is can anyone help me?
Hello Telmo,
On your lesson on 2:31, when I do the the CONSOLE.LOG for my object array, all of the items on the object array displays. This is my JS code how can i just display one item at a time?
let product = document.querySelectorAll(".add-cart");
var school = [
{
name: "Luxury Swiss Crown Watch",
price: 100,
inCart: 0
},
{
name:"Vincero The Rogue Watch",
price: 100,
inCart: 0
},
{
name:"Biden Mens Watch",
price: 25,
inCart: 0
}
];
for(i=0;i
because inside function Cartnumbers() { } needs to be function Cartnumbers(school) { }
function Cartnumbers(school) {
console.log(school);
var conelly = localStorage.getItem("Cartnumbers");
conelly = parseInt(conelly);
I am getting null on my log after using json.stringify(cartItems). how to resolve this? pleaseeeee HELP!
search in stack overflow
thank you so much sir , you helped me alotttt...
Hi Richa, you are most welcome :)
Thank you so much, sir :)
Hey How can I send the data which I fetched from the database to the cart page when a particular product is clicked?
Learn firebase
You are, truly great.
Thank you so much, hope you are enjoying the course :)
My (if cartItems != null) function is not working, any solutions?
hey did u solve this?
@@Gabriel-hx1yh line 64 "console.log("My cart items are", cartItems);" delete it and write it after line 72 "localstorage.setItem("productsInCart", JSON.stringify(cartItems));"
had the same error, found this solution that worked for me
@@youssifsamirr8209 Why would a console.log cause the issue though, it doesn't even interfere with the code
@@writbanalim2715 apparently it didn’t work for me and for others but fixed it with the solution above
Hi, please add the PayPal, button.
Hello, I have a big problem. On my website my products are located in different HTML files. like store/products/product_1. In that case the for loop doesn't work and i only get information about the 1st product i have. I tried using local storage but it didn't work.
I have the same problem did you find anything ?
same!!!
thanks for your turtorial bro
You are welcome bro!
Hey mate,
why when you do the following...
localStorage.setItem("productsInCart", JSON.stringify(cartItems);
(cartItems));
does it create the error :- Uncaught Syntax error: missing ) after argument list
but when is like this
localStorage.setItem("productsInCart", JSON.stringify(cartItems));
(cartItems);
it does not create the error??
this did not happen with your javascript code but did with mine, has something changed since you uploaded this tutorial?
Thanks
Dude its localStorage.setItem("productsInCart", JSON.stringify(cartItems));
thank you for the tutorial..Very good
Welcome 😊
You are the best!
Reference to finish my Hollywood account
Hey Telmo!
could you please help me to fix the, Uncaught ReferenceError: setItems is not defined?
setItems -> setItem ( not "s" )
@@tuancaovanthanh3911 i have defined it with s..but in the function i did a spelling mistake. so that's where the error was showing.
Anyway, Thank you so much.
Sorry how do i get the images used in the project?
you can use your own, or find the link in the description
i dont get when i put this it won't change it i dont get to see all the info at console
let cartItems = localStorage.getItem('productsInCart');
8:20
someone please explain
yeah me too try this console.log ("My cartItems are", product); it works but still have errors
bro also find the missing Letters on your codes to target it properly
not product ! your object name is a products
Can anyone help me why this code is showing
Uncaught TypeError: Cannot set property 'inCart' of undefined
at setinCart (script.js:49)
at Innercart (script.js:46)
at HTMLHeadingElement. (script.js:23)
let products=[
{
name:"Tshirt-1",
tag:"Tshirt-1",
price:150,
inCart:0
},
{
name:"Tshirt-2",
tag:"Tshirt-2",
price:180,
inCart:0
},
];
let cart =document.querySelectorAll('#add-cart');
for (var i = 0; i < cart.length; i++) {
cart[i].addEventListener('click',()=>{
Innercart(products[i]);
});
}
function mycart(){
let productNumber=localStorage.getItem('cartNumber');
if (productNumber) {
document.querySelector('#cart span').textContent=productNumber;
}
}
function Innercart(product){
let productNumber=localStorage.getItem('cartNumber');
productNumber=parseInt(productNumber);
if (productNumber) {
localStorage.setItem('cartNumber',productNumber + 1);
document.querySelector('#cart span').textContent=productNumber+1;
}
else{
localStorage.setItem('cartNumber',1);
document.querySelector('#cart span').textContent=1;
}
setinCart(product);
}
function setinCart(product){
product.inCart=1;
let cartItems= {
[product.tag]:product
}
localStorage.setItem("ProductsInCart", JSON.stringify(cartItems));
}
mycart();
Hi Riazul! If you are still struggling to figure out what is going wrong I can try to help?
It looks like the `product` parameter of the `setInCart()` function is `undefined`. Apologies if you already know this, but the reason you are getting this error: `Uncaught TypeError: Cannot set property 'inCart' of undefined` is because you are trying to set the property `.inCart` on `product` e.g. `product.inCart = 1;`.
It is likely that the product you are clicking on in the HTML does not have an equal/match in the `products` array you defined at the top, so when you are doing the `for` loop, and passing a specific product to the `innerCart(products[i])` function, the product does not exist in the array. e.g. `innerCart(products[3])` or something like that, and you only have 2 products in the product array.
Hope that makes sense, if not, or you wanted further help, if you create a Codesandbox then I can give you a hand :) e.g. codesandbox.io/s/elastic-cannon-rvoym?file=/src/index.js or I can view it anywhere so I can take a look, I can see what the problem is.
I got the same problem,Did you get solution?
says that product is undefined
show your code
The day i understood Using Javascript with html = The day i watched this Video
ua-cam.com/video/tEAl7L62GEw/v-deo.htmlm20s I get 'null' when I click Add to Cart. Second click adds item. If I click another item, it adds the last item I clicked, second click adds correct item. It's like the sequence is out by 1. What could cause this?
hello man , did you got solution for this?
@@senaity I can't actually remember if I did, but I don't think I ever fixed it. This was over a year ago. I had a bit of trouble following this implementation so I think I used a different method for updating the shopping cart.
@@stephencurran5678 hoo, anyway thank you brother
kice dutch
hey telmo
i got this error and i don't know where this error came from
line 58 = setItems(product);
line 27 = cartNumbers(products[i]);
script.js:58 Uncaught SyntaxError: Identifier 'cartItems' has already been declared
at cartNumbers (VM1076 script.js:58)
at HTMLAnchorElement.carts.(anonymous function).addEventListener (file:///C:/Users/sm990222/Desktop/Project/js/script.js:27:4)
cartNumbers @ VM1076 script.js:58
carts.(anonymous function).addEventListener @ VM1076 script.js:27
thank you verymuch
did you find the solution?
i lost here
Hi, thanks for this tutorial but I have a problem when I read the product
values from the database and write in the object it gives an error that the product is undefined,
where is the problem?
The problem was solved
@@behnamnabati8412 how you solved the problem?
@@EiliSaya I solved it by declaring a parameter on the function prototype, like instead of setItems(){...}, make it to setItems(item){...}
@@starryphantasm i don't undertstand it
@@egist4121 write a variable inside the bracket, for example 'item'
I am getting an error saying that "My cart items null" in the console. It worked until 8:55. I followed as you did. Can I get a solution?
hey i got the same error ¿did you find a solution?
Hello man, i had the same error,did you find the solution?thnx
Ya I had the same problem. Did you find what was wrong?
cartItems = {
[products.tag]:product
}
is rezolvation for this error
because is the tag's productS not product (at singular)
@@olivezavrankova1341 cartItems = {
[products.tag]:product
}
is rezolvation for this error
because is the tag's productS not product (at singular)
I am getting null on my log after using json.stringify(cartItems). how to resolve this? pleaseeeee HELP!
same please reply