JavaScript Shopping Cart Tutorial - Part 5/5
Discount Code: javascript20 for 20% Discount
Full Course: telmoacademy.com/
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
Пікірлер: 511
*Next Course:* Shopping Cart with Payments and Emails: ★☆★ Full Course: telmoacademy.com/p/shopping-cart-payments
@sweetiei.8403
2 жыл бұрын
you have to pay for it....
@Karad90
2 жыл бұрын
@@sweetiei.8403 why would it be free?
@sweetiei.8403
2 жыл бұрын
@@Karad90 why would not be? sharing is caring.
@n.nirosha.8276
2 жыл бұрын
Where is the 6th section?? For delete and increase the value???
@n.nirosha.8276
2 жыл бұрын
Where is the 6th section?? For delete and increase the value???
When my college lecturers want a full-fledged ecommerce website from us, without teaching us even a bit of javascript, you are our savior, sir. God bless you.
For people having trouble with sorting the items on the cart page, there is a bit of code missed out in the style.css script. Just add this and everything should work fine: .products { width: 100%; display: flex; flex-wrap:wrap; } .products img { width: 75px; }
@VE3DAL
4 жыл бұрын
Beautiful!!! Aston.
@gabrieltoledano4507
4 жыл бұрын
thank you very much !!
@andrejpacic2629
3 жыл бұрын
It looks even better if you add border-radius to image and some shadow 0px 0px 2px;
@fachriar1178
3 жыл бұрын
THANKYOUUU SO MUCHHH
@hiahpsasmlte7555
3 жыл бұрын
thanks for this dudee
hi Telmo, thank you for this great master class. You have impacted in our lifes in one way or the other. Please can you upload the part 6 of this video.. We have been waiting for it.. Thanks. Prompt response. One love man
Thank You! Exactly what I needed for my final uni work! Well Done
Hi Telmo! Is there anywhere in your course that one can learn how to apply discount to products?
I got this video before my project submission, and the way you explained is just next level sir!!!! hats off to you
Do you need to create a var item? where does item comes from in your displayCart() function?
Hello I am French and I understood your tutorial in English better than with French tutorials. I would like to know if you are going to publish the rest of this tutorial ??? Ohhh please tell me yesss
Olá Telmo! Estou muito feliz de encontra o seu canal. Eu estou com um probleminha com a parte da funcão displayCart(), quando eu escrevo por exemplo ${item.tag} aparece os pontinhos embaixo e quando eu vou ver está escrito assim: Property 'tag' does not exist on type 'string'.ts(2339). E ai o codigo não funciona como o seu. Você pode me ajudar a entender. Sou nova nessa área e estou muito querendo enteder. Obrigada desde já!
At 13:08, I can get the console log for the "product-container" by using query selector but I am able to get by using "getElementByClassName", is that going to affect the function or it is also method as well?
Hi ..Is this will work in codeigniter using cart session because I am using plus and minus buttons for quantity increment in codeigniter it the JavaScript is applying only for first product so
Thank you, but what should I do if I want to remove each item in the shopping cart, remove the item and clear it then delete all the elements, hope you can help me
Why are the cart items not displaying in the page? Any help is appreciated
Good day. I would be wondering why when I publish this a dmz or a simple ddns host why doesn't it work? Why doesn't put anything in the basket? i think something localstorage will be gone
Great tutorial! Spotted one small bug - at the end the total cost it's not correct. I believe the function totalcost iterates through the subtotal, giving a wrong reference for the total cost.
hello, i have a problem, i use your script for training in a food web site. i add 6 items in my products [ ] all works for the first four for adjust quantity or delete but imposible to adjust the quantity or delete the 2 last items :/ i can add the 6 in the shop but can modify only the first four. is there a link with the fact that you only have four products in your script?
Does the project file contain the last part of javscript (delete ,increment and decrement of cart Items) wanted to know before purchase?
Telmo thanks for these videos, kindly how can I use this same javascript codes to add items from different pages to cart , i.e from index.html and maybe products.html page.
You helped me out a lot. I’m going to be buying more of your courses.
hello, I have a bug in my cart page. the bug is the onloadcartnumber function. It said cannot set property 'textcontent' of null. Can you help me fix this. thank you
Please is there Part 6 anywhere ? Or he just ends just like that ? To get the ion-icon buttons working ...
@farghab1
3 жыл бұрын
@@shaahidmuhammad179 yess by put styling by own..
@sushantpoojary6898
2 жыл бұрын
@@shaahidmuhammad179 even i had the image size problem... the images appear huge and am sick of styling it now .. any help would be appreciated
@sridharsridhar5388
2 жыл бұрын
Without vedio reference it's hard to deploy the manage and delete products from cart
@joshua_226
Жыл бұрын
@@sushantpoojary6898 using CSS .product img { Width: 80px Height: 80px }
it says product is not available in your country, how can we activate the remove and spinners ?
If you was to clear the local storage and refresh the website, then click add to cart does it automatically go to your addtocart basket without refreshing the page, cause my one only works if i was to refresh the page. Can someone help me please
Hey. Man thanks alot But how do i get the icons working
Bro i am getting some errors in displayCart function please can you help me out
Hello, to know which user I buy do you need a login?
thank you for the tutorial, please I am very new to coding and was following what you were doing and would love to have the rest of the tutorial.
@hameedayanniyi1297
5 ай бұрын
if you found a solution please link me to it i'm stuck here
I have a problem with the display of the buttons . They dont appear in the correct order and kind of all over each icon. Can you help me?
where is the next part of this video?? I cant find it in his page.. Please share the link here someone. Thank You
about 4days trying to write the last code of displaycart but doesn't run I don't know where's the problem? it's not good to write and do everything very well but this code no !! please reply thanks!
Hi, Can I ask how I can delete a element with the delete button?
I am a novice front end developer from Moldova, and how many videos I have not reviewed about this, your most useful. Thank you very much.
@user-fy9wj2nv7u
Жыл бұрын
right
Great tutorial Telmo. I have an issue though. whenever i click add to cart on any project, my page scrolls up to the top of the page. Meaning i cannot add two products without having to scroll back to the part where the product is located. Did anyone experience this too and how did you solve it ?
your series helped me. thank you!
great tutorial, but my totalCost doesn't work and how do you set the up and down button for quantity and remove it
@shakilkhancbpi6581
3 жыл бұрын
I've face same problem
Hy is there a part6 of this video where you make the icon work
hy Guys i could need Help my icon are not working and i dont knwo why i just copy the link from the webside but there ist just 1 link not 2
In my function displayCart() when I write console.log(cartItems); it says in the console that it is null. I ignore it and proceeded to displaying the objects in my cart but unfortunately it just doesn't work. Theres no errors popped up, it just doesnt get the images (the tag and the name of the jpg files are correct). edit: nvm lol typo in the variable ghahaha
Hii Telmo, It was an awesome series I really enjoyed it a lot... Can you tell me instead of making product array manually how can I do that work dynamically. If I have 100 products on my website then I think it is not an efficient way to get the product. I am am using Django at my backend can you tell me how can I get details of my each clicked product in product array. If you could tell me I will really appreciate you a lot. please reply
Can this be linked to multiple product pages?
Helped me so much! Thanks a lot man!
Anybody has the code for the removing the products and changing the quantity?
my Index Page features are not loading to the Cart Page even after I have joined the pages throught the same JavaScript file. What do I do?
Do you have tutorial about deleting items from the cart and also adding quantity of the item
@codingbuddy8720
2 жыл бұрын
have you found those videos ?? please help if youve done that part...Thank you
Muito Obrigada pelos vídeos! Estão a ajudar-me imenso e já comprei o que falta! Depois mostro o que fiz com o que ensinou! Até agora, tudo ok :D
@Telmosampaio
4 жыл бұрын
Ola Albertina, espero que tenhas gostado :)
@promisevinci
3 жыл бұрын
@Telmo Sampaio Hy ... ho davvero bisogno del tuo aiuto. Le mie immagini non vengono visualizzate e spiegano gentilmente come hai usato le immagini e perché o forse mostrano come hai memorizzato le immagini nella cartella .. è davvero fonte di confusione.
Nice tutorial. My products is not showing on cart what could be the problem?
my totalCost doesn't work and how do you set the up and down button for quantity and remove it
how do i create the sending of the order form from the cart
Thank you, the explanation is more than wonderful
hey Telmo thank you for this project but if possible you can upload part 6 of it
is there any available videos to remove cart items?
Hi! How can we implement the "+ -" buttons code in the cart to add more items.?
@Jatin-xh7sm
2 жыл бұрын
Did you find out how to do it? i am having the same problem.
when I loop the items injecting into html doc, the items wont display in line but stuck top on each other.... I did everything to fix and cannt see any solution.. can anyone help?
can you please upload the part 6 of the tutorial
Please is there a continuation of this? About the delete part
Does anyone figured out how to remove certain value from local storage key? To remove an item from the cart. Does splice method worked for anyone? Cause I'm stuck on in :/
Nice tutorial but I want to be able to have multiple images and then when i click on the add to cart beneath the images, they should appear in the cart for me to either checkout or continue shopping.Please any assistance?
@hameedayanniyi1297
5 ай бұрын
calll the displaycart() function in setitems function that might help
where are rest of the parts....any link?
Hi Telmo I am following your tutorial exactly but I am not able to open CART page(href) from Home page and similarly Home Page from Cart Page . When I hover my cursor over Home or Cart or About it is not showing any links associated with it . They are just working as a normal text thats it. Please help ASAP.
@antrikshgupta418
3 жыл бұрын
I debugged the error MAN :P the problem was, in css nav I plotted the value of z-index=0 instead of 2 but I corrected it . Hey Dude Keep up the nice work .
How to print Indian rupees symbol like you get Dollar $ symbol in the cart total page?
my cart page doesn't show the image of my products nothing appear can someone help me to fix it
thank you brow, i finished my job with your help
I cannot get the images to show in the cart can anyone help me
Hello, I just paid for membership on your website so that I can access the course, but my membership status is not reflecting on your website. Please Assist
@Telmosampaio
4 жыл бұрын
Hi OMPHILE RAMADIE, your account is with full access now
hi there, i really need help, my ion icon is being added to the page, however it is invisible and has a width of 0px and a height of 35 px??? please help me!!!
@JustRJTech
3 жыл бұрын
Mine also did the same , go to ion icons and manually copy one , i used the outline one and it works now
Could someone help on how to move forward with the delete button and etc? I've been stuck for a couple of days now :(
Is there anyway i pass the cart product details to php
ion-icons doesn't show up on my page :'(. Help please
Awesome tutorial on E-Commerce, man! Just what I need using JS, CSS and HTML, keep making awesome videos, I've subscribed! Unfortunately you left the last part for paid members, so it's up to the followers of these youtube videos to complete it like some sort of school assignment/lab.
@sureshbhandari5546
4 жыл бұрын
did you complete it???
@STUPIDYOUTUBE_HIDINGMSGS
4 жыл бұрын
@@sureshbhandari5546 Yes, but the tutorial is incomplete, not e-cart, just the display...
@IXavier
2 жыл бұрын
@@STUPIDKZread_HIDINGMSGS Could you help me?
@STUPIDYOUTUBE_HIDINGMSGS
2 жыл бұрын
@@IXavier I can strongly suggest you check these fantastic Javascript authors' courses in Udemy. They are awesome and I keep going back to their courses again and again to sharpen my Javascript knowledge: Angela Yu, Shaun Pelling, Andrew Mead.
@IXavier
2 жыл бұрын
@@STUPIDKZread_HIDINGMSGS Thank you very much! Will definetly check them out!
Thank you for this tutorial really helped me a lot :)
The image is not showing on the cart page! Does anyone have a solution for this?
thank you so much for this perfect tutorial
in the 5th video the div part show error in my code plz someone help me for short out this error.
Hey did anyone do the next part where we add or decrease the quantity and remove the item from the cart if yes please reply I need the source code.
I'm following from 1 until 5 tutorials, but the final is my cart display is a problem, they just only in the center when I clicked the other product to add cart, they can't split.
@Telmosampaio
4 жыл бұрын
Hey Fah, you must have copied something wrong in your code, if you want you can get all the files in the description of the video
Good video but I need to know how to put the cart into a session so I can kill the session after the order is made. Can you do that with local storage?
@Telmosampaio
4 жыл бұрын
Hey Jon sessions and local storage are 2 completely different things
@akanbitobextinz7471
3 жыл бұрын
Yes. Actually you can do it with local storage.. With the .clear("key name") Example : I'm using localStorage.setItem("ProductInCart"); If you want to clear it you will do something like this : localStorage.clear("ProductInCart").. It will clear.. You can add the .clear() in the checkout, so that when you check out it will clear the storage.. Thank you
Your tutorial is very helpful please upload other two tutorial of this on KZread
hi i'm confused, why you could let your index and cart use the same main.js file? For me, because my cart.html has no 'add-cart' class like yours, so the addEventHandler can't work in cart.html, it said 'Cannot read property 'addEventListener' of undefined'...Did I miss something important? It would be great if someone could help me plz!!!!!!
@gloriadai400
4 жыл бұрын
if I seperate the main.js file, it works...numbers are stored in local storage so it doen't matter..but why why why you don't need to seperate...??
Hey. The tutorial is awesome. I am finding problem where you are using the back ticks. My cart images are not displayed. I tried console.log, it is showing that error file not found. My tag name and image name is same it does map it
@djkc5266
4 жыл бұрын
Mine does this to
@VE3DAL
4 жыл бұрын
I had the same problem and what I did I rename my jpg files, then the new names(without .jpg) I put on products list tag:the new names. After I clear the local storage added some new products and it works.
@stf8375
3 жыл бұрын
you need to add all the file images like this Users/project/images/pull.jpg.. and not only images/pull.jpg
@vincent6654
3 жыл бұрын
I have the same problem with the Images as it won't display on the Cart page in 19:18
@faiyazmahir5210
2 жыл бұрын
@@stf8375 hii can you help me with the increase and decrease part or the delete item part plz
Hello, Telmo. I am new and everything was going well for me from Part 1 till 15.33 in Part 5. When I typed productContainer.innerHTML += ' $(item.name) ' "Uncaught SyntaxError: Invalid or unexpected token" appeared when I inspected the local storage. May I know what is wrong and how can I remedy it? Also, may I know what is the source of "images/$(item.tag).jpg" and where do we get this from? is it from your own folder? Thank you very much.
@codingbuddy8720
2 жыл бұрын
your images need to have the same name like the product tag name in the javascript Object
@kanken2816
2 жыл бұрын
replace your ' ' with ` `
hi, can this work with mysql?
Hello I'm facing problem while using backticks it generates some error
Hey Telmo, i have made the quantity + and - buttons functional and everything is well,, the only thing is i need to refresh the page to show the changes in quantity and total cost and so... I can make the browser refresh everytime the user click + or - , but that would unpleasant user experience. Is there a way to display the changes on the page without reload?
@Temidayomodestus
2 жыл бұрын
Please can I hv ur code when the + and - buttons are functional? Please thanks
@asherlee5521
Жыл бұрын
please can i have your code for 6 and 7
@dikshagupta7138
Жыл бұрын
you can do that by calling the function displayProduct inside that for loop
@patu002
Жыл бұрын
plz send the that code plzz
@patu002
Жыл бұрын
@@Temidayomodestus if got that code plz send mee
Has anyone figured out how to add sizes & have it appear/submit to the console?
Fiquei teu fã 👍...ganhou mais subscriber..thankx a lot man.!!, now im following your React & Node js Tutorial....🖖
@Telmosampaio
3 жыл бұрын
Muito obrigado Romi :)
when you complete the rest of it?
where is the part 6 my friend pls you are literally a life saver.
Nice Job. My question is that you said in the next video you will show how to remove item on the cart and also increase and decrease the quantity of items in the cart page. please can you take me there. Thank you
Tanks Telmo it is being amazing, one question man, if i buy the project files i would see the buttons working there?
@Telmosampaio
3 жыл бұрын
Hi, yes with the project files, you get the final project all working fine :)
@avilatechnology7754
3 жыл бұрын
@@Telmosampaio thanks man
@francohforeal4480
2 жыл бұрын
How do u pay to get the rest of the tutorial am intrested
Hi, thank you so much for this tutorial! Is there a video that teaches how to make remove button functional? Thanks!
@brentvandenmuisenberg31
3 жыл бұрын
dit you fidn it ?
@daniela-georgianasterian15
3 жыл бұрын
@@brentvandenmuisenberg31 did you find it?
@lazeezbiryanii
2 жыл бұрын
@@muhammadfaiq873 can you please give me the link?
@KennyRamasawmy
2 жыл бұрын
@@muhammadfaiq873 can you share the link please thanks
@shrutisharma6901
2 жыл бұрын
@@muhammadfaiq873 can you please share the link??? plz plz plz
i am following the tutorial but cant get the right style for my cart page . can anyone explain?
I want to purchase the full course but I am already stuck as it relates to the images of my products. They are not showing. It is strange that only one image shows but that image is not in my code at all, it is in the directory yes, but I never added it to my code. I am worried that if I buy the full product I am still gonna face this problem as well
@Telmosampaio
4 жыл бұрын
Hi Jermaine, your images neet to have the same name like the product tag name in the javascript Object
@ngkenleong555
3 жыл бұрын
@@Telmosampaio do you meant the name of images file(which save all the image of products) or the name of the image of products?
Thank bro u are so helpfull but i m so sad because the next part tutorial not free to watch n i dont have lot off money for it
images are not dispalying in cart , what s wrong ?
Can You Send Me the Code please ? will you continue the app ? thank you very much
Hi I just subscribed to your course and it is awesome. I have one question. As for the decrease button and code described in videos 6 and 7, can I add plus and minus icons on the product page and use the same code developed for the cart page? Is there anything I should be concerned (e.g., function name and so on) regards,
@blowlo1464
2 жыл бұрын
bro can you help me with the decrease, increase and the delete button
@michael4ox
Жыл бұрын
I’ve spent two weeks trying to figure out how to make the decrease and increase button, help 🥺
@velaludin1706
Жыл бұрын
@@michael4ox have you figured it out?
@mhmoudgharissah4112
Жыл бұрын
@@velaludin1706 i havent can you help?
Ye but you didn't show us how to code the remove button... I'm stuck and everything looks so complicated.
Why can't I get my products to display in the cart
This is superb but it would have been better of the add to cart button changes to remove from cart after a click this will allow users remove item Incase they change their mind instead of coming into to the cart before they can remove the cart item for a better user experience