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

[@hakoware101]

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

[@learning-axis]

sure

[@teresiaaritonang4457]

Thankyou, sir. It's work 🙏

[@shishirislam8948]

Nice Video...Very helpful

[@learning-axis]

thank you

[@sahilrana-hq6gq]

Its just osm❤😊

[@andresmandique3405]

Thank you, your video is awesome!

[@learning-axis]

Thanks

[@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.

[@christiandavebuco]

thank you so much for this

[@Hstiklv2007]

Very helpful, thank you so much❤

[@learning-axis]

Thank you

[@kidstime220]

Thank you sir

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

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

[@Study-ce3zl]

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

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

[@momanali6103]

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

[@learningprogramming1308]

What datatype u have choose for image column?

[@Franciscoanselem]

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

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

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

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

[@PoojaJadhav-kx2by]

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

[@learning-axis]

thank you,

[@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.

[@tasabehahmed5950]

Can you please explain local storage for this code?

[@FaiZunGaming]

Could you provide source code??

[@_Rajkhatri_]

can i get complete code please reply?

[@priyankanbd1939]

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

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

[@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).

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

[@mdmydulislam819]

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

[@doraimeha4823]

thank uuu

[@learning-axis]

you welcome

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

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

[@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: ruclips.net/video/62QlzC2CVco/видео.html

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

[@shyamsharma6257]

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

[@brayanbrianoliveira2159]

hello, do you have github?

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

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

[@cricketjourney7771]

How to host HTML ecommerce website through C-panel

[@thejanaabeydeera]

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

[@learning-axis]

you should create your own fontawsm account

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

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

[@user-yu3lv4ii7u]

image error pls help me

[@animeanime8907]

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

[@learning-axis]

yes it can be sent by usingPHP

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

[@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 ruclips.net/video/bbaRfHMN4xI/видео.html
I used table tag for cart items. It may help you.

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

[@zckai756]

Hello
how to send cart details to database?

[@learning-axis]

using php

[@shamaafrin4031]

Why so much java script code ? 🙄

[@editox_plays]

It's real beauty 😂 of Javascript

[@mhkk1491]

I am not sure at all what you were expecting

[@chroeurnvathana1241]

Bro mean code ot

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

[@unisarofah3869]

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

[@learning-axis]

dengan memanggil jalur gambar

[@vishnupriyapriya6729]

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

[@mahadevmushrooms]

kasooti

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

[@anatatowatashi9377]

3:55
5:57

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

[@deepbhikadiya8070]

Source code link is not working please give another link fast

[@learning-axis]

source code: shorturl.at/htH12

[@gideonaidoo9604]

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

[@tallywacker1059]

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

[@learning-axis]

No, it's working

[@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.

[@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.

[@lyric-lover]

Can I add 50 product in same page?

[@learning-axis]

yes just add objects in given array.

[@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.

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

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

[@Tech_Tarzan1999]

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

[@learning-axis]

to destructure the array

[@Ahmed-Shalaby]

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

[@sajanmj9625]

How can I change the images

[@learning-axis]

from the array of objects in javascript

[@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 🥰

[@youtubevideo557]

How photo???

[@presentkhoza6769]

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

[@learning-axis]

see description

[@NUMBER-_-ONE]

Responsive??

[@ii_Faz3a]

where images?

[@mdleyan118]

Please source code give in the description plzz

[@razajawwad9967]

Source Code Please.....

[@learning-axis]

source code: shorturl.at/htH12

[@Podcasthub513]

One problem images are not showing

[@learning-axis]

did to write the correct path of images?

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

[@son3038]

source code pls?

[@learning-axis]

source code: shorturl.at/htH12

[@nody6989]

I want the source code

[@learning-axis]

source code: shorturl.at/htH12

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

[@poorveshsharm_ram7625]

I want the code please the full code

[@learning-axis]

see description

[@vallientertainment4956]

how to add ₹ instead of $

[@learning-axis]

replace $ with ₹

[@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 )

[@serranogiffd.5744]

source code?

[@learning-axis]

source code: shorturl.at/htH12

[@meriyemelhajoui4083]

please code Source

[@Vicky-og9em]

Source code plZ

[@learning-axis]

source code: shorturl.at/htH12

[@ubaid.ur.rehman921]

Can y provide code ?

[@learning-axis]

source code: shorturl.at/htH12

[@ubaid.ur.rehman921]

@@learning-axis Thanks

[@carlvintlouisecalang3146]

where is the cartItem Id?

[@learning-axis]

it is in the array of objects

[@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: ruclips.net/video/bbaRfHMN4xI/видео.html

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

[@ezramelaku4075]

Source Code???

[@learning-axis]

source code: shorturl.at/htH12

[@inbarajan3189]

Why image is not showing???

[@learning-axis]

you should download images. than write correct path of each image

[@learning-axis]

you can also download source code.
link: shorturl.at/htH12

[@inbarajan3189]

@@learning-axis i already have a image in my system

[@inbarajan3189]

@@learning-axis it's possible to call a image in array of objects??

[@learning-axis]

@@inbarajan3189 yes you can call