Js cart problem: How can i add product into cart page?

I am developing an e-commerce website for my client where I have a product page and a cart page( i.e product.html and cart.html). What I want is that when I someone clicks on an add product button the product is added to the cart.html page using only vanilla JS. I know how to add a product in when the cart on the same page. How can I do it? I would really appreciate your help!

1 Like

What do you have for the back end?

I just started learning JS in freecodecamp. I don’t have anything for back end.

I recommend you to start react directly. All the annoying DOM stuff you learn in JS are automatically done in react.

In my opinion what you need to learn about JS is more about data manipulation and algorithm.

4 Likes

What is algorithm? I would like to know

just be able to manipulate object, arrays and conditions to start React

2 Likes

So, this means I cannot add product to my cart without data manipulation and algorithm?

You have to create 2 arrays, one with objects products and another for your cart.
Every time you add one product to cart you have to insert the object product to your cart.

Can do in vanilla JS, but it is easier to do in react as you don’t have to manage DOM

3 Likes

An algorithm is basically a sequence of instructions designed to perform a specific task ( or solve a problem ).

For more insight : https://en.wikipedia.org/wiki/Algorithm

Oh! Thanks @NielsDom! Do you have any tutorial in your mind for doing these ?

I know nothing about react! Well, I think I’ll try react.js soon.

I use only vanilla to do small scripts but never for website, therefore I can only show you this example with React:

You can see edit, create, delete methods that are pure js code that you can use for pure js project.
I created this repo to teach react to some colleagues.

tnx @NielsDom ! For your help.

You can do that with Javascript only. You just have to a create the model of a cart in JS that adapts to the one you have in HTML(depending what data it contains like for example: Quantity for each product if you have that or only total quantity, total price and/or individual price) and then insert it in HTML using DOM operations

Oh! I know nothing about DOM operations. Can you please tell me @Osiris how can I learn DOM operations and find resources to build what I am trying to build.

You can find on MDN( Mozilla Developer Network) for example if you search how to insert HTML elements: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
Also this is about DOM some explanation: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
From the second link you can go through the left menu to see different things about it.
Here are some methods and properties: https://developer.mozilla.org/en-US/docs/Web/API/Element

If you’re not into reading and more like watching videos, type, I suggest you go through some tutorials about Javascript that also include DOM manipulation

Thanks @Osiris ! I really appreciate your help. If i have any problems regarding it can i contact you personally ? If not, it’s all right.

Let’s say you have the products on your page and each of them has a “add to cart” child button. (so you can access the product itself as the parentNode :slight_smile:
let currentProduct = button.parentNode; )

Store your actual product into an object for example. The cart itself can be an array, so when you click on any “add to cart” button, it will know the parent product, so you can use Array.push(currentProduct). If you want to display the products as well, just create a forEach loop on the cart array, and insert a html for every one of the items.

I just did a similar project ( comments are foreign language sorry :smiley: ) Check it out if would like to. It uses localStorage, so cart is not deleted when you refresh the page.

Im sure there are other solutions, mine is just one of them:

1 Like

I would say e-commerce website is not the best first thing you can develop for a client, but I really wish you good luck :slight_smile:

Alternatively, if luck isn’t an option, you could start with something like Shopify and slowly introduce more and more custom elements

1 Like

Hi,

Within the product.html page, you can collect all the products added to cart in an object and store it in a Cookie or localStorage. Then call this Cookie or localStorage on the cart.html page. Once you receive the data on the cart page, you can paint the DOM using that.

1 Like