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!
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.
What is algorithm? I would like to know
just be able to manipulate object, arrays and conditions to start React
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
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.
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
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
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 ) 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:
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
Alternatively, if luck isn’t an option, you could start with something like Shopify and slowly introduce more and more custom elements
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.