Ecommerce Website | Add to Cart | Delete from Cart | HTML, CSS & JavaScript

#html #css #javascript #tutorials
Here we will learn to create a product page design and its functionality.
Using the map method, we will add items to the cart and delete the individual item from the cart.

[@learning-axis]

source code: shorturl.at/htH12

[@Hlord_Minecraft]

thanks(;

[@ericstewart6760]

You should do everything with it eventually.

[@harshitgaminghk]

not working

[@SMARTBOY-ri8sz]

link not working

[@learning-axis]

check again@@SMARTBOY-ri8sz

[@samoeurnartjr9535]

It kind of videos of video that help us to improve for build website using HTML CSS and JS , good videos

[@kdeyvlog9225]

First like video thank q very much

[@likeaboss5736]

TU ES O SALVADOR!!!! OBRIGADO RONALDO DE DESENVOLVIMENTO WEB

[@ThomasBui359]

I can't get enough of this video. It's one of those rare gems that you want to watch over and over again, and each time you notice something new and exciting.

[@learning-axis]

Thank you

[@akejeludavidojoshimite646]

Hello @Learning Axis, I really like your video but i cant find a way to figure out how to use the localstorage to keep the igem in cart after refresh of page.

[@teresiaaritonang4457]

Thankyou, sir. It's work 🙏

[@FaiZunGaming]

Could you provide source code??

[@hakoware101]

thanks for your work! hoping for more videos in the future!

[@learning-axis]

sure

[@ayen0449]

you use innerHTML a lot and it is said to be a bad habit as far as security is concerned. is it on purpuse?

[@sahilrana-hq6gq]

Its just osm❤😊

[@shishirislam8948]

Nice Video...Very helpful

[@learning-axis]

thank you

[@learningprogramming1308]

What datatype u have choose for image column?

[@christiandavebuco]

thank you so much for this

[@_Rajkhatri_]

can i get complete code please reply?

[@kidstime220]

Thank you sir

[@Study-ce3zl]

how to get it saved , so even if i open it after closing the items i put on carts are still there

[@tasabehahmed5950]

Can you please explain local storage for this code?

[@momanali6103]

Sir! Hum java k code ki jaga image ka code wasay nai likh skty div me simple ??

[@jimboymaningas5967]

Hello, i liked your video tutorial, can you please help me to add the add to cart into database phpmyadmin, and how to display the add to cart into checkout page and the checkout is also added into database

[@Franciscoanselem]

what if is a multiple time you select a goods like 30times would you be clicking add to cart 30 times

[@sheharyarahmed6829]

Brilliant, brilliant, brilliant!!!!

[@funwithlaiba7186]

Amazing Video! I always had cart problems and every video i had seen was not-responsive or something like that. Your video was all I needed to achieve my whole website up to the point. Great Work, Keep It Up! Also, do you have a video on a login/sign up page in html? Please Inform me.

[@learning-axis]

thank you

[@priyankanbd1939]

Hlw sir, Js code mai error aa rhii h sir!? Plz correction btaa dijiye

[@andresmandique3405]

Thank you, your video is awesome!

[@learning-axis]

Thanks

[@pcelarstvosanovic5083]

Hello. I like your video its so easy to follow, great work. I have a question, how to add to cart products based on weight, example 14€/kg,?

[@learning-axis]

first, you have to add weight and unit price to objects of the array. Next, create a function that calculates the price according to the weight. Last, call that function into the main function

[@mdmydulislam819]

when the page reloads the cart is empty. but I won't stay the cart element

[@starexgenius6388]

I think posting the image links will help too 😊

[@learning-axis]

I provided the link with source code and image files in description

[@DurgaDevi-en9eh]

​@@learning-axiswhere is the source code?

[@alexallcool]

@Learning Axis, Hi the page looks great, I opened the page using the code you provided to download, I noticed if a few products added to cart the image container starts stretching down the page moving images, could you please check that?

[@learning-axis]

ok, you have to create different div container for cart items. I think I have used single div container for both (Products and cart items).

[@Cheetohzz]

amazing job! i had an easy time following along and recreating it. My only question is how can I make it look better on mobile phone? when i pull it up on my phone, it looks squished

[@natashamuhanjiavugwi1807]

You can use media queries for all screens to be responsive, that's what I usually use and it works well.

[@Andre-oz7cw]

@@natashamuhanjiavugwi1807 what is media queries

[@abulbashar68]

Awesome video am watch your full video. if you give me your source code I would benefit. Thank You so much for uploading this kind of video.

[@learning-axis]

source code: shorturl.at/htH12

[@olivierbakoyogo1324]

Hello sir @Easy Learn Axis, thank for this amazing video, just wonna know what font awesome is used for and how to use it on your code ? Im a beginner in coding thx. 1:32

[@bojacksworldwideweb]

Font-awesome is a library of CSS classes and icons that you can import into your code via a script tag that you copy and paste. they have basic and premium subscriptions.

[@brayanbrianoliveira2159]

hello, do you have github?

[@giacoco2726]

do i make it work if the page from where i add the item are different from the one of the cart?

[@learning-axis]

yes you can

[@yanamax193]

Awesome channel. Thanks a lot. Is it possible for each lesson source code? Thank a lot again.

[@learning-axis]

Yes I will provide saource code, Thank you

[@kavipriya8871]

@@learning-axis source code

[@learning-axis]

@@kavipriya8871 source code: shorturl.at/htH12

[@PoojaJadhav-kx2by]

Thank you so much, i really want it, thank you thank you thank you really thankful 🤧🤧

[@learning-axis]

thank you,

[@Nothing1997i]

How can I show the total price on this page from a different page? (Payment page from your video)

[@learning-axis]

you need to create a separate component for that

[@Misslevelup-]

how are you getting the image to appear from js to the browser. because i followed the steps and the images are not showing please.

[@Misslevelup-]

because i put all my images in res, i'm really new to this.

[@learning-axis]

enter correct paths of all images

[@mari-oo6co]

Hello, this is a bit of a stupid question but how do you get the whole program to run on google chrome (because right now I only get the HTML one running on chrome without the css and javascript)? Thank you for your video, it is great!

[@learning-axis]

The whole program is running on your chrome. You just need to open html file on chrome

[@pandipatipavan3804]

​@@learning-axis Please share the code files and the links in the description as soon as possible 🙏 thank you so much

[@qpunisher8999]

hello, great video, but what if my cart is on a diffrent html page?

[@qpunisher8999]

for those who have the same problem i think that if you link the two html to the same .js it should work

[@user-qx8in6oc8k]

share another link for the code please the link you sent doesn't work

[@MrWirus36]

How could i add separed category to this products. I would like to see something like this: category a: products; category b: products etc. I would like to get sample code if you want to help

[@learning-axis]

You can do it by using the filter method. And I will also create a video on this within 2 or 3 days. Thank you

[@MrWirus36]

@@learning-axis But what about adding products to a separate category (after click buy), it requires some complex stuff, indexing everything and so on.

[@learning-axis]

hello hope you are fine below is the link for category filter: kzbin.info/www/bejne/bGO0na15Z6iJmdE

[@vishnupriyapriya6729]

Can you please tell how to connect it to my website 😭my sir is gonna check tomorrow!

[@shamaafrin4031]

Why so much java script code ? 🙄

[@editox_plays]

It's real beauty 😂 of Javascript

[@user-yu3lv4ii7u]

image error pls help me

[@studyingwithsetsow3728]

The downloaded code is running yet when i copy and paste it does not run do you know what might be causing this?

[@atharvdesai2638]

kidhar se download kiya bhai?

[@syra7567]

Kindly help me with this... I am unable to understand that why he is writing the html code in js file ... What it's called and where I can learn about it 8:08 Help please...

[@obinnambalisike6491]

...same,what happend there

[@shyamsharma6257]

Bhai video mai song daalne ki wajai explain karna jyada sahi hota hai

[@cricketjourney7771]

How to host HTML ecommerce website through C-panel

[@chroeurnvathana1241]

Bro mean code ot

[@thejanaabeydeera]

How to add another set of products to the next row

[@learning-axis]

you just need to put image and details in array of objects

[@baraahawa]

We can't find the source code in the description! Can you give it here to us please.

[@learning-axis]

source code: shorturl.at/htH12

[@animeanime8907]

Hello, anyway to send the cart's info to email?

[@learning-axis]

yes it can be sent by usingPHP

[@thejanaabeydeera]

cart image is not showing..pls provide th fontawsm link

[@learning-axis]

you should create your own fontawsm account

[@nikolatomic4306]

What if your cart is table? How to add all these things inside the table?

[@learning-axis]

Just use the table tag and assign it an id.

[@nikolatomic4306]

@@learning-axis i already did it, but i want when press add to cart button to move product name, price, img etc. to the table but not working well

[@learning-axis]

@@nikolatomic4306 See this video kzbin.info/www/bejne/mJPEg5l-grNnrqs I used table tag for cart items. It may help you.

[@zckai756]

Hello how to send cart details to database?

[@learning-axis]

using php

[@azimattar5961]

Is this project suitable for a resume for beginners?

[@learning-axis]

may be

[@learning-axis]

you may combine videos(pagination, category filter, and add to cart) to make project for resume.

[@unisarofah3869]

Maaf mau tanya itu bagaimana ya cara memanggil fotonya di JS?

[@learning-axis]

dengan memanggil jalur gambar

[@tallywacker1059]

It seems that the link for the source code cannot be reached?

[@learning-axis]

No, it's working

[@youtubevideo557]

How photo???

[@doraimeha4823]

thank uuu

[@learning-axis]

you welcome

[@NUMBER-_-ONE]

Responsive??

[@gideonaidoo9604]

how-to-add-items-to-the-cart-from-different-html-pages-using-javascript

[@mdleyan118]

Please source code give in the description plzz

[@gitanjaliyadav7598]

I got error at line number 36 and 37 in js file ...please help

[@learning-axis]

there may b a erroe in your code. see description for source code

[@deepbhikadiya8070]

Source code link is not working please give another link fast

[@learning-axis]

source code: shorturl.at/htH12

[@bojacksworldwideweb]

holy-shitt balls, this is the moust challenging application I have made!! those returns stamtents aint NO joke!!

[@learning-axis]

cool

[@bojacksworldwideweb]

@@learning-axis thank you for your guide, I learned new techniques I didn't know.

[@learning-axis]

thank you@@bojacksworldwideweb

[@balochzaicoding5871]

Could you provide source code ?? I have same this one project

[@learning-axis]

source code: shorturl.at/htH12

[@drazmooo8498]

​@@learning-axis .

[@learning-axis]

@@drazmooo8498 yes

[@arpitapazare1039]

can you provide the source code of this video?

[@learning-axis]

source code: shorturl.at/htH12

[@zareentaj1960]

@@learning-axis it's not working

[@learning-axis]

@@zareentaj1960 check again it's working

[@coolpatatas9659]

How can to add check out button below the total

[@coolpatatas9659]

Like storing the total into MySQL db

[@learning-axis]

@@coolpatatas9659 it can be done by using php

[@coolpatatas9659]

Can you do another tutorial using this project?

[@learning-axis]

@@coolpatatas9659 Now I am just making front-end tutorials. Later I will start back-end.

[@ii_Faz3a]

where images?

[@nileshyadav8645]

How to add payment structure

[@learning-axis]

watch this video: kzbin.info/www/bejne/r3zUlniCeZaertU

[@AmeenaSattar-id3ox]

sir i have a question k java ma img ka name likhna apnay sath image b likha wo kis liya likha ha meri image show hi nai hu rai ma nay likha tu kindly plz reply

[@learning-axis]

imgae ka complete path likhna prta ha. image main image file store krty hain phir us ko map method main call kraty hain.

[@AmeenaSattar-id3ox]

@@learning-axis sir i cant get your point plz tell in detail

[@learning-axis]

@@AmeenaSattar-id3ox first I declared image element in object of array as you can see In javascript. after that I use map method and then I call image from that array.

[@Nothing1997i]

Please answer my comment 🙏🏻​@@learning-axis

[@Tech_Tarzan1999]

why we have use [...new set ] line no 27

[@learning-axis]

to destructure the array

[@zizijaafar3852]

What is the src image in

[@learning-axis]

These images are stored in array of object. When we need any image we call it from that array.

[@sajanmj9625]

How can I change the images

[@learning-axis]

from the array of objects in javascript

[@lyric-lover]

Can I add 50 product in same page?

[@learning-axis]

yes just add objects in given array.

[@presentkhoza6769]

Can you please share the source code with us. Please🥺

[@learning-axis]

see description

[@Podcasthub513]

One problem images are not showing

[@learning-axis]

did to write the correct path of images?

[@meriyemelhajoui4083]

please code Source

[@izunduchukwuemika7915]

My Images are not showing

[@learning-axis]

source code: shorturl.at/htH12\ check this code if it is working?

[@sanasingha7600]

You link is not working

[@learning-axis]

@@sanasingha7600 source code: shorturl.at/htH12

[@sanasingha7600]

Thanks now it's working 🥰

[@anatatowatashi9377]

3:55 5:57

[@satyajeetsankpal8668]

Image is not showing plzz help

[@learning-axis]

first you have to download images, then write the correct path of each image

[@learning-axis]

source code: shorturl.at/htH12

[@anvu-gm4nw]

when i click on the button it shows an error .....Cannot set properties of null (setting 'innerHTML')

[@learning-axis]

source code: shorturl.at/htH12 see this code you may get your problem.

[@anvu-gm4nw]

@@learning-axis thanks you

[@razajawwad9967]

Source Code Please.....

[@learning-axis]

source code: shorturl.at/htH12

[@poorveshsharm_ram7625]

I want the code please the full code

[@learning-axis]

see description

[@mahinsurana1706]

hi can you provide the source code for this video

[@learning-axis]

there is a code link in description

[@atharvdesai2638]

nahi hai desc mai lavde@@learning-axis

[@learning-axis]

source code: shorturl.at/htH12@@atharvdesai2638

[@vallientertainment4956]

how to add ₹ instead of $

[@learning-axis]

replace $ with ₹

[@carlvintlouisecalang3146]

where is the cartItem Id?

[@learning-axis]

it is in the array of objects

[@nody6989]

I want the source code

[@learning-axis]

source code: shorturl.at/htH12

[@MaxStudioCG2023]

another incomplette cart video ...(where is the case when customer add same product more times ,should have also that option with a + - arrow to select in the cart )

[@son3038]

source code pls?

[@learning-axis]

source code: shorturl.at/htH12

[@Ahmed-Shalaby]

❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤

[@karam_ah1359]

How can you add a discount code to this?

[@learning-axis]

you mean promo code discount?

[@karam_ah1359]

Yeah so you can enter a code and then you get a percentage of money of your total

[@learning-axis]

@@karam_ah1359 watch this video: kzbin.info/www/bejne/mJPEg5l-grNnrqs

[@karam_ah1359]

@@learning-axis good vid! , but are you able to add the promo code to this code instead? If you can, would be much appreciated bro

[@ubaid.ur.rehman921]

Can y provide code ?

[@learning-axis]

source code: shorturl.at/htH12

[@ubaid.ur.rehman921]

@@learning-axis Thanks

[@Vicky-og9em]

Source code plZ

[@learning-axis]

source code: shorturl.at/htH12

[@serranogiffd.5744]

source code?

[@learning-axis]

source code: shorturl.at/htH12

[@mahadevmushrooms]

kasooti

[@ezramelaku4075]

Source Code???

[@learning-axis]

source code: shorturl.at/htH12

[@annatodor6903]

nu inteleg ma pis pe el