How To Add To Cart Shopping using HTML CSS and Javascript

Подписаться 104 тыс.

Просмотров 235 тыс.

50% 1

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.

Опубликовано:

20 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 162

@lundeveloper 11 месяцев назад

Subscribe to the channel to see more videos and codes every day ❤🎉

@davidibeh4356 9 месяцев назад

Greetings sir, Pls How did you add more items in the shopping cart

@davidibeh4356 9 месяцев назад

@lundeveloper

@Coder_of_Bihar_0005 5 месяцев назад

sir, send a github link of this project

@peterjohns6216 4 месяца назад

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 .

@Sportgameww 4 дня назад

congrats on 100K subscribers bro you deserve it.

@irfanullah2910 9 месяцев назад

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 9 месяцев назад

Thank you so much 😍😍

@lundeveloper 11 месяцев назад

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.

@daniyellaharmon 6 месяцев назад

Wow this is an awesome tutorial and you explained everything s easily. Thank you!

@BrianAlex-u1c 9 дней назад

dude! you are like sent from heaven.keep up the good work

@minhhoahuynh6625 11 месяцев назад

khi trưa mk kiếm video này hôm trước, tks Lùn 🎉

@lundeveloper 11 месяцев назад

Có video sớm tí là hay rồi ^^

@dotportal 9 месяцев назад

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 9 месяцев назад

It's great that my sharing can help you a little

@lowEndAppsAndGames 14 дней назад

I regard this tutorial as complex. How many years of experience do you have sir. But i appreciate everything after all i find this complex - The extensive nature of the code you've written

@bdhanunjaya7447 6 месяцев назад

Very useful tutorial.. Thanks a lot ❤

@chenzoe6991 Месяц назад

@NIXO3D 10 месяцев назад

Beautiful work 🙌🏽👏🏽 I subscribed.🙏🏾

@lundeveloper 10 месяцев назад

Thank you so much ❤️❤️❤️❤️

@kuanjarlo 10 месяцев назад

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 10 месяцев назад

Thank you so much 😍😍😍

@SoundarG-w3d 3 месяца назад

One word awesome

@bnmlara 7 месяцев назад

creat video with audio it makes easy to understand please continue teaching us the same way sir...

@DougDimmadome__ 2 часа назад

Love the video, I’m having trouble with padding around the first image. It will not appear

@kuan-weihuang5214 4 месяца назад

I'm really grateful for your work.

@codinglife128 8 месяцев назад

Thank you so much sir ❤❤❤❤

@josephdias6226 8 месяцев назад

Very Useful tutorial.

@hemalathagatta2583 9 месяцев назад

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 9 месяцев назад

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 9 месяцев назад

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 9 месяцев назад

Of course it can be done. That video will be published soon ❤️

@lundeveloper 9 месяцев назад

Hi. That topic video has been published. Go to my youtube page to watch it

@VastuGuruji 2 месяца назад

ultimate

@co_pratikshaahire9841 11 месяцев назад

thank you so muchyour all videos are superb

@lundeveloper 11 месяцев назад

🥰🥰🥰🥰🥰 Thank you 🥰🥰🥰

@artemnakonechny6852 5 месяцев назад

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 5 месяцев назад

Thank you so much, love Ukraine 😍😍

@hitmusicworldwide 2 месяца назад

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

@iconic_robbott 3 месяца назад

Nice tutorial. Thanks. Please do you have a video where we add the total amount and proceed to checkout?

@lundeveloper 3 месяца назад

I already made it, please visit my page to see it 😍

@iconic_robbott 3 месяца назад

@@lundeveloper okay. Thanks 🙏🏽

@adelnasr576 6 месяцев назад

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?

@faithmuraya 10 месяцев назад

Thankyou for this just earned a new follower

@lundeveloper 10 месяцев назад

🥰🥰🥰 Thank you so much

@VitalPetBolivia 6 месяцев назад

hi dude, excelent video, could you drop the link for the complete file finished

@killer-fl8rm 3 месяца назад

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 2 месяца назад

Control u Karin

@eriklarcher 3 месяца назад

excelent video man. Hey which font are you using for your visual studio code ?

@lundeveloper 3 месяца назад

Hi, I'm using JetBrains Mono font

@makslezhanin-xx5qt 7 дней назад

What your device? Function on in react our typescript

@fariadworld446 15 дней назад

Nice project, but i am wondering why not use a fake API rather than fake date json data?

@ongngo9750 5 месяцев назад

thank you

@travailensa3338 9 месяцев назад

top top 🤩

@lundeveloper 9 месяцев назад

😍😍😍

@lokeshgandreddy4798 8 месяцев назад

good

@MVIMAT 9 месяцев назад

Hay lắm bro

@rafstrings3289 8 месяцев назад

How about the check out and mode of payment function

@MegaNAISman 4 месяца назад

Can you tell me the name of extension of your visual studio code rgb ? So awesome !

@lundeveloper 4 месяца назад

It's a theme I created myself, you'll see it in the video description ❤️

@ScratchersTrio 9 месяцев назад

Nice explanation, can slow down the video speed a little bit

@lundeveloper 9 месяцев назад

Thank you brother 😍

@kuan-weihuang5214 4 месяца назад

is there a reason to not directly put products info in html but using json to store the info? thx

@bigjoshallen 11 месяцев назад

Really awesome! How do i send the total to paypal?

@estherquarterolli9572 10 месяцев назад

Up!! I need to know too

@bigjoshallen 10 месяцев назад

@@estherquarterolli9572 Yep

@heena_art_.19 3 дня назад

Its a responsive website or not??

@sotubodammy844 5 месяцев назад

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 5 месяцев назад

I used the one with the json file

@omgitsaafi8701 6 месяцев назад

is it possible to use this method on a pre-existing website?

@travailensa3338 10 месяцев назад

top top🤩 🤩 🤩

@axoa_g Месяц назад

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

@Dani-ib8ik 8 месяцев назад

Hey, I just wanted to ask why the Github doesn't have most of the shown code in the video

@firecross-w2h 27 дней назад

How about checkout or database?

@sapan6503 5 месяцев назад

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

@ДавидБогданов-о2с 6 месяцев назад

Why you don`t use simple localStorage instead of creating json file?

@Legend_55481 4 месяца назад

Can I Used the used the code please ??

@utkg-TECH 8 месяцев назад

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

@mariyapatel9407 10 месяцев назад

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

@Demon_T8_ 4 месяца назад

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 ???

@itstechking 7 месяцев назад

beautifull. what is your vs code theme?

@lundeveloper 7 месяцев назад

It is a theme I created myself using CSS. Go to the page and watch the latest video about it

@itstechking 7 месяцев назад

oh thanks@@lundeveloper

@yoru574 Месяц назад

what if i am using Django how do i link json and js file

@deenadayalan5388 7 месяцев назад

Whats is your version of vs code?

@manasikarke8177 7 месяцев назад

Add to cart 0 number is not getting visible when I did width 30px

@leandrohenrique6056 11 месяцев назад

❤

@lundeveloper 11 месяцев назад

🥰🥰🥰🥰🥰🥰

@tambakinicholas6965 6 месяцев назад

My minus and plus sign is not adding up in shopping cart how can you help me

@Inservergoa 2 месяца назад

how to save it in cookies instead of local storage and retrieve it back and update

@euphoriaorphan 6 месяцев назад

downloaded and imported the code for the font but it wont light up :(

@reallyscarus 6 месяцев назад

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 6 месяцев назад

I fixed it I had to make an if statement to check if 'info' was a boolean and it worked

@nguyenkhang9651 11 месяцев назад

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 11 месяцев назад

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

@happylifeinteriorsLLP 9 месяцев назад

hello, I have one small project can you doit. which is similar to given video

@lundeveloper 11 месяцев назад

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 11 месяцев назад

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 11 месяцев назад

@@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é

@lehoangtuan5171 11 месяцев назад

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 11 месяцев назад

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é ^^

@dominickoh5402 9 месяцев назад

Hi, how do you connect the data to a google sheet, etc so that the seller can track it?

@lundeveloper 9 месяцев назад

Hi. There will soon be a video detailing how to get data from Google Sheets

@aldin.suljic.28 9 месяцев назад

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 9 месяцев назад

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 9 месяцев назад

@@lundeveloper Thanks I managed to fix it this way

@euphoriaorphan 4 месяца назад

HOW at 11:30 are you adding more items to the box? I don't see anything indicating that step. Please help!

@lundeveloper 4 месяца назад

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 4 месяца назад

@@lundeveloper thank you!!! This whole time I thought I was missing a step.

@kempermcghee978 9 месяцев назад

what app are you using?

@lundeveloper 9 месяцев назад

Visua studio Code ❤️

@Moneychaser24.7 7 месяцев назад

ClassList is not showing as a function in my visual studio code does anyone know why?

@utkg-TECH 8 месяцев назад

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 8 месяцев назад

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 8 месяцев назад

im having the same problem did you figure it out?

@DuaWali-yp7hd 3 месяца назад

My JSON file doesn't work. Can you tell me why?

@lawrence6972 3 месяца назад

what is it saying when you console log the listProducts array like he does at 17:00

@kempermcghee978 9 месяцев назад

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 9 месяцев назад

Do you using extension live server in VSCode like this video ?

@kempermcghee978 9 месяцев назад

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 9 месяцев назад

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 9 месяцев назад

try this images/yourpicture

@thanhtranghuynh5247 6 месяцев назад

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 6 месяцев назад

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ì

@hauangvan5167 10 месяцев назад

anh người việt hạ sao mà bắn tiếng anh như gió đỉnh z anh

@DVHcoding 10 месяцев назад

dùng tool mà b

@user-ds9rc1cd4y 10 месяцев назад

If the basket is another page, what should I do?

@arunsri2558 5 месяцев назад

Same problem

@asriakmaliyahsyahfitri4011 10 месяцев назад

When you enter the showcart class body, you can't see the display, what's the solution?

@TyzanGaming 6 месяцев назад

I think you're giving space in your css file for body.Showcart .cartTab{ inset 0 0 0 auto; }

@TyzanGaming 6 месяцев назад

Dont put space bewtween body. Showcart

@user-ds9rc1cd4y 10 месяцев назад

I have an object on product obj

@majdalanini7711 8 месяцев назад

i am downloading the code and it isnt working

@Blue_Pumpkin 8 месяцев назад

5:01

@HyfemExpress 5 месяцев назад

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 5 месяцев назад

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"

@tuannoobdev 11 месяцев назад

các thuộc tính display :gird là j v a

@lundeveloper 11 месяцев назад

Nó dùng để chia cột á em

@OnyekaPrince-m4o 8 месяцев назад

It does not have total price

@db00g 9 месяцев назад

Which extensions are you using?

@lundeveloper 9 месяцев назад

in this video. Im using Live Server Extension

@byssol 4 месяца назад

el codigo de descarga no tiene nada

@lundeveloper 4 месяца назад

I've checked and everything works fine, please check again

@saudjavaid566 2 месяца назад

lun dev

@hurkanbuyukyldz3601 5 месяцев назад

These codes are missing, can you send them all?

@pgmigaming6199 4 месяца назад

where is full source code

@lundeveloper 4 месяца назад

All videos on my channel will have all the code provided in the description

@pgmigaming6199 4 месяца назад

@@lundeveloper I'll copy paste but it's not working properly

@lundeveloper 4 месяца назад

@@pgmigaming6199 You'll have to watch the video to see why and how to make it work

@pgmigaming6199 4 месяца назад

@@lundeveloper I'll see 4 to 5 Times it's not solving 🙂

@BEASTOFGOD7_YT 8 месяцев назад

Video is too fast nothing is clear

@savagemotiv 7 месяцев назад

Gwe oyagala laba buli kimu, olowoza world wide web ya'nykoko?

@SarbJeet-js8tl 5 месяцев назад

No bro video id okay you must know the basics to understand

@my_metal_gear_is_solid 5 месяцев назад

How is explaining every single step possible and making code clear as arctic water too hard for your mind to comprehend

@AlexSkaeg 4 месяца назад

Watch it at slow speed. )

@thebeyonderearth6167 Месяц назад

The video is clear you don’t understand JavaScript

@jtgames8919 День назад

24:43

@MythSkull 2 месяца назад

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