How To Add To Cart Shopping using HTML CSS and Javascript
Vložit
- čas přidán 15. 10. 2023
- How To Add To Cart Shopping using HTML CSS and Javascript.
Let me code the function Shopping Cart using #html #css and #javascript
The channel is building 2 series: CSS tutorial and Javascript tutorial
See more code HTML CSS javascript with Lun Dev
Download code: www.lundevweb.com/2023/10/cre...
-----
This youtube channel not only revolves around topics about website programming using HTML CSS Javascript, but also website design, ideation and implementation.
All codes are free. Sharing will help us grow faster.
-----
Design Slider - Carousel web: • Animation Card Slider ...
Design Template Website: • Parallax Scrolling Web...
Design Parallax SCrolling Effect: • Reponsive Parallax Scr...
Effect Image using HTML CSS Javascript: • How To Make Zoom Image...
Design Animation Menu Web: • Design Navigation Menu...
Design Effect Card: • How to make Awesome CS...
There are many other series: www.youtube.com/@lundeveloper...
-----
Contact With me:
Instagram: / lundev.web
Email: hohoang.dev@gmail.com
Buy me a cup of coffee by clicking the thanks button on any video. Thank you very much for your support.
Subscribe to the channel to see more videos and codes every day ❤🎉
Greetings sir, Pls How did you add more items in the shopping cart
@lundeveloper
sir, send a github link of this project
I'm new to this thing when i downloaded the codes my cart did not look even close to yours which is what i was hoping for , the codes are just not the same , its like they made half on purpose , they are just incomplete , thanks for helping us but i guess we need more help .
Keyword in the video: localStorage is a web storage technology in web browsers that allows websites and web applications to store key-value pairs in a client's web browser. It provides a simple way to store data on the client side, which can be useful for various purposes, such as caching data, storing user preferences, or maintaining the state of a web application.
Wow this is an awesome tutorial and you explained everything s easily. Thank you!
Very useful tutorial.. Thanks a lot ❤
khi trưa mk kiếm video này hôm trước,
tks Lùn 🎉
Có video sớm tí là hay rồi ^^
Really awesome projects. Learn a lot of new things and how DOM works in JavaScript. It gives me very confidence. Thanks to you for this amazing video.
Thank you so much 😍😍
Thank you for making this great video. I found it at the right time as I'm working on a simple e-commerce project for practice but this add-to-cart functionality was a problem. Now I can translate what I've learned here to make my project work. Keep making cool videos like this. And I'm a subscriber now!
It's great that my sharing can help you a little
Very Useful tutorial.
creat video with audio it makes easy to understand please continue teaching us the same way sir...
Thank you so much sir ❤❤❤❤
Beautiful work 🙌🏽👏🏽 I subscribed.🙏🏾
Thank you so much ❤️❤️❤️❤️
Adding Product Data (JSON) : 14:40
Fetching Data from JSON: 15:37
Changing Product Info: 17:53
Add to Cart Function: 18:07
Product ID: 18:51
Website Memory: 24:45
Increase Decrease Function: 26:01
Thank you so much 😍😍😍
Hay lắm bro
One word awesome
great job👌thx a lot ❤
hoping you're doing well, Lun
could it it possible to create that using classes? and if yes, it'll be much simper with classes than this way?
Thankyou for this just earned a new follower
🥰🥰🥰 Thank you so much
hi dude, excelent video, could you drop the link for the complete file finished
thank you
Hi lun, thanks for explaining clearly on point to point
And one requirement from my side how to filter the products using search in real time can please explain if possible
Hello. A video with detailed instructions on how to search and filter products based on many conditions will be made in the near future.
good
Hey In my website shopping cart is not working when add a class on body and try to refresh page cart is not showing up. just following your code. Can you please Help me with this. Many thanks
top top🤩 🤩 🤩
is there a reason to not directly put products info in html but using json to store the info? thx
is it possible to use this method on a pre-existing website?
ultimate
How about the check out and mode of payment function
I think a semi transparent glassmorphism effect shopping cart panel background instead of black would be better and not as jarring for the user. Or let the cart view take up only 33% of the screen instead of half and the product items collapse items into a single column on mobile 2 on tablet etc so the user can scroll thru items and ads them to the cart on the side all whist keeping tabs on their cart
Hey, I just wanted to ask why the Github doesn't have most of the shown code in the video
everyone who visits my site will have to run a local host to use this poducu isn't it ?
or when i get a hosting sever they'll automatically see it all ???
Can you please combine the product details video with this video and and make a final one with both product details and add to cart functionality.
Of course it can be done. That video will be published soon ❤️
Hi. That topic video has been published. Go to my youtube page to watch it
❤
🥰🥰🥰🥰🥰🥰
Watch videos in your home language by: Settings icon in video ⚙️ -> subtitles -> Automatic translation.
để xem tiếng Việt: Cài đặt -> Phụ đề -> Dịch tự động ❤️
Dạ cảm ơn vì video của anh ạ. Rất bổ ích, Mà em lại không thể chuyển thành dịch tiếng việt được ạ
@@hunggledinh1476 Ấn vào biểu tượng bánh răng -> rồi mới vô phụ đề -> nó sẽ có dịch tự động -> chọn ngôn ngử tiếng Việt nhé
Great and useful video. It’s been easy to understand everything you did. Best wishes from Ukraine 🙂
And sorry for my English, I might have made some mistakes )
Thank you so much, love Ukraine 😍😍
thank you so muchyour all videos are superb
🥰🥰🥰🥰🥰 Thank you 🥰🥰🥰
Whats is your version of vs code?
Hi, actually i am doing the same code in visual studio 2022 (community)
I am having probelm when you downloaded live server in vs live server is not available hence i am unable to select go live option
Please help me
hello, I have one small project can you doit. which is similar to given video
top top 🤩
😍😍😍
Fetching data from JSON is not seems complex. I have clear and re-write the code multiple times yet it didn't work. please help
Nice explanation, can slow down the video speed a little bit
Thank you brother 😍
Dạ anhh ơi cho em hỏi là mình làm sao vừa qua trang xem chi tiết xong , mua sản phẩm nó hiện qua trang khác để điền thông tin lấy sản phẩm được ko anh
Có á. Em xem video thì em sẽ thấy mình đã lưu data vào bộ nhớ rồi. Thì đi qua trang nào củng sài được. Trong page có 1 video " thêm giỏ hàng và thanh toán " á. Em xem tham khảo nha. Nhưng video đó lưu data bằng cookie. còn video này lưu bằng Localstorange. Em thay cookie bằng localstorange là được
anh ơi phải học js như nào thì mới ứng dụng vào web được anh,em học cơ bản nhưng thấy không giống gì với thực tế hết.Mong anh rep
Nếu em cảm thấy cách học hiện tại của mình ( học cơ bản từng cái từng cái) không hiệu quả.
Thì hãy đổi sang phương pháp khác, đó là làm bài tập lớn luôn.
Video này chính là một bài tập lớn.
Khi em xem em sẽ đụng chạm tới nhiều kiến thức về Javascript trong 1 lần luôn.
Thì em sẽ học được cơ bản nhiều kiến thức trong 1 lần và biết cách vận dụng nó vào 1 bài tập thực tế luôn.
Đồng thời cách này củng khiến mình học đúng những thứ cần để giải quyết bài toán.
Không cần phải học luyên thuyên những thứ mà có khi thực tế không bao giờ sử dụng.
Cách học này nó hơi đau đầu nhưng hiệu quả lại có nhanh hơn so với cách của em.
Ngày xưa khi đi học anh học theo cách này nè ^^
Mỗi người sẽ phù hợp với một phương pháp khác nhau, anh để lại comment củng chỉ để chia sẽ và mang tính " góp ý", chứ nó sẽ không luôn luôn đúng nhé ^^
Add to cart 0 number is not getting visible when I did width 30px
Nice tutorial. Thanks.
Please do you have a video where we add the total amount and proceed to checkout?
I already made it, please visit my page to see it 😍
@@lundeveloper okay. Thanks 🙏🏽
Hey I am unable to get the JavaScript code tht you have told i am not getting output I.e clicking on icon the shopping cart is not displaying do you have any solution for that...??
Control u Karin
Can you tell me the name of extension of your visual studio code rgb ? So awesome !
It's a theme I created myself, you'll see it in the video description ❤️
excelent video man. Hey which font are you using for your visual studio code ?
Hi, I'm using JetBrains Mono font
Why you don`t use simple localStorage instead of creating json file?
Hi, how do you connect the data to a google sheet, etc so that the seller can track it?
Hi. There will soon be a video detailing how to get data from Google Sheets
Can I Used the used the code please ??
ClassList is not showing as a function in my visual studio code does anyone know why?
downloaded and imported the code for the font but it wont light up :(
Really awesome! How do i send the total to paypal?
Up!! I need to know too
@@estherquarterolli9572 Yep
I have an object on product obj
My minus and plus sign is not adding up in shopping cart how can you help me
how to save it in cookies instead of local storage and retrieve it back and update
Thanks you so much for this video but How can I make the product details.
Have watched explanations of it on your channel but it is not working pls i need ur help
I used the one with the json file
hi how is the are the arrows located in the btn class when they are in the quantity div class? everything works fine up till you get to the 28 minute mark then the code can't find the .image so any idea why that happens?
I fixed it I had to make an if statement to check if 'info' was a boolean and it worked
I'm really grateful for your work.
5:01
If the basket is another page, what should I do?
Same problem
beautifull. what is your vs code theme?
It is a theme I created myself using CSS. Go to the page and watch the latest video about it
oh thanks@@lundeveloper
Hello, when I click on the arrow to change the quantity the number does not change instead it adds 3 more items to the cart and when I refresh it's not loaded, it only ads more items when I click on add to cart. Where could the mistake be? (I cannot remove any item due to that)
It's hard for me to identify your error this way. One suggestion is to download my code, then compare it with your project to find errors
@@lundeveloper Thanks I managed to fix it this way
anh người việt hạ sao mà bắn tiếng anh như gió đỉnh z anh
dùng tool mà b
When you enter the showcart class body, you can't see the display, what's the solution?
I think you're giving space in your css file for body.Showcart .cartTab{ inset 0 0 0 auto; }
Dont put space bewtween body. Showcart
Fetching data from JSON is not seems complex. I have clear and re-write the code multiple times yet it didn't work. please help... if you have a repository where i can copy the code i dont mind. i have been on it for hours
You can download the code in the video in the description of this video. Also, are you having the same problem as 16:00. See this to fix it
im having the same problem did you figure it out?
i am downloading the code and it isnt working
what app are you using?
Visua studio Code ❤️
các thuộc tính display :gird là j v a
Nó dùng để chia cột á em
em làm phần giỏ hàng chạy ra khi click chuột mà vẫn không được anh ạ, giờ không biết sửa sao luôn T.T
Em bật F12, chuyển qua tab console rồi click chuột để bó hiện giỏ hàng xem nó báo lỗi gì
HOW at 11:30 are you adding more items to the box? I don't see anything indicating that step. Please help!
I just temporarily added it directly to the browser, you don't need to worry.
Or if you want more, go to the HTML file, add more 'item' classes.
@@lundeveloper thank you!!! This whole time I thought I was missing a step.
It does not have total price
Im not sure what im doing wrong but my images will not all load i have followed step by step. it says nothing it wrong please help i wasted hours doing this just for my images to not load only one. i need to know what i need to name my product price and product name...
Do you using extension live server in VSCode like this video ?
yes is their a certain one i must use? it loads one of my images but thats it and all my links to the images are correct
@@lundeveloper
im a collage student going for IST more leaning to the coding side so just trying to learn how to do these things because these are the types of websites i will be making to make money from hopefully
@@lundeveloper
try this images/yourpicture
My JSON file doesn't work. Can you tell me why?
what is it saying when you console log the listProducts array like he does at 17:00
Which extensions are you using?
in this video. Im using Live Server Extension
Actually the video make sense but how do I params item on cart to params to the next page when a user click on checkout and it also display total price
Don't worry, I made another video to show people how to put this information on another page simply,
Please visit my site, find the video "shopping cart and checkout javascript"
el codigo de descarga no tiene nada
I've checked and everything works fine, please check again
where is full source code
All videos on my channel will have all the code provided in the description
@@lundeveloper I'll copy paste but it's not working properly
@@pgmigaming6199 You'll have to watch the video to see why and how to make it work
@@lundeveloper I'll see 4 to 5 Times it's not solving 🙂
Video is too fast nothing is clear
Gwe oyagala laba buli kimu, olowoza world wide web ya'nykoko?
No bro video id okay you must know the basics to understand
How is explaining every single step possible and making code clear as arctic water too hard for your mind to comprehend
Watch it at slow speed. )
These codes are missing, can you send them all?
lun dev
hey there anybody has a solution for: "Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON datta"
i dont get why im getting it and ive already opened the page with the live server