No video
How To Add To Cart Shopping using HTML CSS and Javascript
Рет қаралды 217,573
10 ай бұрын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....
-----
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.co...
-----
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.
@lundeveloper 10 ай бұрын
Subscribe to the channel to see more videos and codes every day ❤🎉
@davidibeh4356 8 ай бұрын
Greetings sir, Pls How did you add more items in the shopping cart
@davidibeh4356 8 ай бұрын
@lundeveloper
@Coder_of_Bihar_0005 4 ай бұрын
sir, send a github link of this project
@peterjohns6216 3 ай бұрын
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 .
@lundeveloper 10 ай бұрын
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.
@irfanullah2910 8 ай бұрын
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.
@lundeveloper 8 ай бұрын
Thank you so much 😍😍
@kuanjarlo 9 ай бұрын
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
@lundeveloper 9 ай бұрын
Thank you so much 😍😍😍
@daniyellaharmon 5 ай бұрын
Wow this is an awesome tutorial and you explained everything s easily. Thank you!
@user-mz6mk2fd3v 2 ай бұрын
One word awesome
@bdhanunjaya7447 5 ай бұрын
Very useful tutorial.. Thanks a lot ❤
@minhhoahuynh6625 10 ай бұрын
khi trưa mk kiếm video này hôm trước, tks Lùn 🎉
@lundeveloper 10 ай бұрын
Có video sớm tí là hay rồi ^^
@dotportal 8 ай бұрын
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!
@lundeveloper 8 ай бұрын
It's great that my sharing can help you a little
@VastuGuruji Ай бұрын
ultimate
@NIXO3D 9 ай бұрын
Beautiful work 🙌🏽👏🏽 I subscribed.🙏🏾
@lundeveloper 9 ай бұрын
Thank you so much ❤️❤️❤️❤️
@codinglife128 7 ай бұрын
Thank you so much sir ❤❤❤❤
@kuan-weihuang5214 3 ай бұрын
I'm really grateful for your work.
@co_pratikshaahire9841 10 ай бұрын
thank you so muchyour all videos are superb
@lundeveloper 10 ай бұрын
🥰🥰🥰🥰🥰 Thank you 🥰🥰🥰
@hitmusicworldwide Ай бұрын
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
@user-lr2pw3ib1e 6 ай бұрын
creat video with audio it makes easy to understand please continue teaching us the same way sir...
@josephdias6226 7 ай бұрын
Very Useful tutorial.
@lokeshgandreddy4798 7 ай бұрын
good
@artemnakonechny6852 4 ай бұрын
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 )
@lundeveloper 4 ай бұрын
Thank you so much, love Ukraine 😍😍
@hemalathagatta2583 8 ай бұрын
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
@lundeveloper 8 ай бұрын
Hello. A video with detailed instructions on how to search and filter products based on many conditions will be made in the near future.
@adarshdash7022 8 ай бұрын
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.
@lundeveloper 8 ай бұрын
Of course it can be done. That video will be published soon ❤️
@lundeveloper 7 ай бұрын
Hi. That topic video has been published. Go to my youtube page to watch it
@ongngo9750 4 ай бұрын
thank you
@MVIMAT 7 ай бұрын
Hay lắm bro
@faithmuraya 9 ай бұрын
Thankyou for this just earned a new follower
@lundeveloper 9 ай бұрын
🥰🥰🥰 Thank you so much
@travailensa3338 8 ай бұрын
top top 🤩
@lundeveloper 8 ай бұрын
😍😍😍
@iconic_robbott 2 ай бұрын
Nice tutorial. Thanks. Please do you have a video where we add the total amount and proceed to checkout?
@lundeveloper 2 ай бұрын
I already made it, please visit my page to see it 😍
@iconic_robbott 2 ай бұрын
@@lundeveloper okay. Thanks 🙏🏽
@eriklarcher 2 ай бұрын
excelent video man. Hey which font are you using for your visual studio code ?
@lundeveloper 2 ай бұрын
Hi, I'm using JetBrains Mono font
@adelnasr576 5 ай бұрын
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?
@travailensa3338 8 ай бұрын
top top🤩 🤩 🤩
@lundeveloper 10 ай бұрын
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 ❤️
@hunggledinh1476 10 ай бұрын
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 ạ
@lundeveloper 10 ай бұрын
@@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é
@leandrohenrique6056 10 ай бұрын
❤
@lundeveloper 10 ай бұрын
🥰🥰🥰🥰🥰🥰
@user-kn1pf9ri8x 5 ай бұрын
hi dude, excelent video, could you drop the link for the complete file finished
@rafstrings3289 7 ай бұрын
How about the check out and mode of payment function
@killer-fl8rm 2 ай бұрын
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...??
@vismine Ай бұрын
Control u Karin
@ScratchersTrio 8 ай бұрын
Nice explanation, can slow down the video speed a little bit
@lundeveloper 8 ай бұрын
Thank you brother 😍
@bigjoshallen 10 ай бұрын
Really awesome! How do i send the total to paypal?
@estherquarterolli9572 9 ай бұрын
Up!! I need to know too
@bigjoshallen 9 ай бұрын
@@estherquarterolli9572 Yep
@MegaNAISman 3 ай бұрын
Can you tell me the name of extension of your visual studio code rgb ? So awesome !
@lundeveloper 3 ай бұрын
It's a theme I created myself, you'll see it in the video description ❤️
@Blue_Pumpkin 7 ай бұрын
5:01
@sotubodammy844 4 ай бұрын
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
@sotubodammy844 4 ай бұрын
I used the one with the json file
@Inservergoa Ай бұрын
how to save it in cookies instead of local storage and retrieve it back and update
@itstechking 6 ай бұрын
beautifull. what is your vs code theme?
@lundeveloper 6 ай бұрын
It is a theme I created myself using CSS. Go to the page and watch the latest video about it
@itstechking 6 ай бұрын
oh thanks@@lundeveloper
@user-fm3zb1nq4f 5 ай бұрын
Why you don`t use simple localStorage instead of creating json file?
@Dani-ib8ik 7 ай бұрын
Hey, I just wanted to ask why the Github doesn't have most of the shown code in the video
@axoa_gamer 5 күн бұрын
bro help please i type all this but i had some problems i make a folder called image and i call the chair image/1 cuz this (/) cant be a name and it didnt work because of this i'm stuck i cant do any think else
@kuan-weihuang5214 3 ай бұрын
is there a reason to not directly put products info in html but using json to store the info? thx
@omgitsaafi8701 4 ай бұрын
is it possible to use this method on a pre-existing website?
@manasikarke8177 6 ай бұрын
Add to cart 0 number is not getting visible when I did width 30px
@Demon_T8_ 3 ай бұрын
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 ???
@Legend_55481 3 ай бұрын
Can I Used the used the code please ??
@sapan6503 4 ай бұрын
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
@utkg-TECH 7 ай бұрын
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
@hauangvan5167 9 ай бұрын
anh người việt hạ sao mà bắn tiếng anh như gió đỉnh z anh
@DVHcoding 9 ай бұрын
dùng tool mà b
@tambakinicholas6965 5 ай бұрын
My minus and plus sign is not adding up in shopping cart how can you help me
@mariyapatel9407 9 ай бұрын
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
@euphoriaorphan 5 ай бұрын
downloaded and imported the code for the font but it wont light up :(
@deenadayalan5388 6 ай бұрын
Whats is your version of vs code?
@reallyscarus 5 ай бұрын
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?
@reallyscarus 5 ай бұрын
I fixed it I had to make an if statement to check if 'info' was a boolean and it worked
@user-ds9rc1cd4y 9 ай бұрын
I have an object on product obj
@dominickoh5402 8 ай бұрын
Hi, how do you connect the data to a google sheet, etc so that the seller can track it?
@lundeveloper 8 ай бұрын
Hi. There will soon be a video detailing how to get data from Google Sheets
@happylifeinteriorsLLP 8 ай бұрын
hello, I have one small project can you doit. which is similar to given video
@euphoriaorphan 3 ай бұрын
HOW at 11:30 are you adding more items to the box? I don't see anything indicating that step. Please help!
@lundeveloper 3 ай бұрын
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.
@euphoriaorphan 3 ай бұрын
@@lundeveloper thank you!!! This whole time I thought I was missing a step.
@Moneychaser24.7 6 ай бұрын
ClassList is not showing as a function in my visual studio code does anyone know why?
@aldin.suljic.28 8 ай бұрын
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)
@lundeveloper 8 ай бұрын
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
@aldin.suljic.28 8 ай бұрын
@@lundeveloper Thanks I managed to fix it this way
@nguyenkhang9651 10 ай бұрын
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
@lundeveloper 10 ай бұрын
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
@user-ds9rc1cd4y 9 ай бұрын
If the basket is another page, what should I do?
@arunsri2558 4 ай бұрын
Same problem
@DuaWali-yp7hd 2 ай бұрын
My JSON file doesn't work. Can you tell me why?
@lawrence6972 2 ай бұрын
what is it saying when you console log the listProducts array like he does at 17:00
@utkg-TECH 7 ай бұрын
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
@lundeveloper 7 ай бұрын
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
@mooneyfounas5321 7 ай бұрын
im having the same problem did you figure it out?
@asriakmaliyahsyahfitri4011 9 ай бұрын
When you enter the showcart class body, you can't see the display, what's the solution?
@TyzanGaming 5 ай бұрын
I think you're giving space in your css file for body.Showcart .cartTab{ inset 0 0 0 auto; }
@TyzanGaming 5 ай бұрын
Dont put space bewtween body. Showcart
@lehoangtuan5171 10 ай бұрын
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
@lundeveloper 10 ай бұрын
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é ^^
@thanhtranghuynh5247 5 ай бұрын
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
@lundeveloper 5 ай бұрын
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ì
@majdalanini7711 7 ай бұрын
i am downloading the code and it isnt working
@HyfemExpress 4 ай бұрын
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
@lundeveloper 4 ай бұрын
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"
@kempermcghee978 8 ай бұрын
what app are you using?
@lundeveloper 8 ай бұрын
Visua studio Code ❤️
@kempermcghee978 8 ай бұрын
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...
@lundeveloper 8 ай бұрын
Do you using extension live server in VSCode like this video ?
@kempermcghee978 8 ай бұрын
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
@kempermcghee978 8 ай бұрын
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
@RichieCarinugan 8 ай бұрын
try this images/yourpicture
@user-iv4yo4zs5q 7 ай бұрын
It does not have total price
@tuannoobdev 10 ай бұрын
các thuộc tính display :gird là j v a
@lundeveloper 10 ай бұрын
Nó dùng để chia cột á em
@db00g 8 ай бұрын
Which extensions are you using?
@lundeveloper 8 ай бұрын
in this video. Im using Live Server Extension
@byssol 3 ай бұрын
el codigo de descarga no tiene nada
@lundeveloper 3 ай бұрын
I've checked and everything works fine, please check again
@pgmigaming6199 3 ай бұрын
where is full source code
@lundeveloper 3 ай бұрын
All videos on my channel will have all the code provided in the description
@pgmigaming6199 3 ай бұрын
@@lundeveloper I'll copy paste but it's not working properly
@lundeveloper 3 ай бұрын
@@pgmigaming6199 You'll have to watch the video to see why and how to make it work
@pgmigaming6199 3 ай бұрын
@@lundeveloper I'll see 4 to 5 Times it's not solving 🙂
@hurkanbuyukyldz3601 4 ай бұрын
These codes are missing, can you send them all?
@BEASTOFGOD7_YT 7 ай бұрын
Video is too fast nothing is clear
@savagemotiv 6 ай бұрын
Gwe oyagala laba buli kimu, olowoza world wide web ya'nykoko?
@SarbJeet-js8tl 4 ай бұрын
No bro video id okay you must know the basics to understand
@my_metal_gear_is_solid 4 ай бұрын
How is explaining every single step possible and making code clear as arctic water too hard for your mind to comprehend
@AlexSkaeg 3 ай бұрын
Watch it at slow speed. )
@thebeyonderearth6167 15 күн бұрын
The video is clear you don’t understand JavaScript
@saudjavaid566 27 күн бұрын
lun dev
@MythSkull Ай бұрын
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
@kuldeepgautam6267 8 ай бұрын
Learning Axis
Рет қаралды 301 М.
SALEM EPISODES
Рет қаралды 659 М.
Techy Guy
Рет қаралды 45 М.
Sharathchandar K
Рет қаралды 5 М.
CarpoolVenom
Рет қаралды 612 М.
SALEM EPISODES
Рет қаралды 659 М.