Simple Shopping Cart with JS/JSON

#javascript #events #json

With JavaScript is an object-oriented programming language for front-end developers. With JavaScript you are able to manipulate what the front page of your website displays and the different interactive elements to enhance user-experience. These elements includes, clicking, hovering, submitting, searching, etc.

To start off, I already have a Rails backend setup, with three models: products, cart_items, cart. This is my ruby seed data transformed into JSON:

Now we setup our frontend, first create an index.html file. Depending on what code editor you are using, there will be a pre-established html:5 function which you can type in and it will generate a simple html setup:

After we create our JavaScript file where we will put most of our code in, index.js. Remember to add it to our index.html file with a script tag. Remember to put defer in front, which will tell the index.html file to run our index.js last so that it can read and display what our code is trying to output:

As you can see, I also added a couple "div" tags, which will be where our information displays. "clothes-box" is where we will show all our clothes. "SideNav" is where we will display our shopping cart, with the list of items, and all the way at the bottom of the sideNav we have another "div" where we will display the price and checkout button.

Now that we have our HTML setup, we can start writing our code for JS. From here on out, all the code will be in our index.js file. First we have to fetch our JSON data with:

These line of codes fetches the data from our API and transform the response into readable JSON, and then transforms it into an array of objects that can then be called on by another function to display each data to our liking. Don't worry about RenderAllProducts, it will be a function we will be creating next:

RenderAllProducts we're calling on an array with forEach to display each product with another function RenderOneProduct inside:

In our RenderOneProduct function first find the "clothes-box div" to display all our products and set it to a variable with document.querySelector. Next create a new div element and set it to a variable. Next using the JS method innerhtml, we will write out html code for how our products will be displayed. Our product card will have the image, name, price, and "add to cart" button. Remember to add the id of the button so that we can target it later. Then we add it to our "clothes-box" by using the append method.
Our products will display like this:

Next we have to render all the products we have in our cart by fetching our data again:

This time, we will only want the price and name of the product with a "delete" button.
It will display like so:

Now that everything is rendering like we want we can start making our buttons work with the method "addEventListener". First we start with our "add to cart" button. Inside our renderOneProduct function, we will write our event listener:

Let walkthrough what we did. First find the element for our button, good thing we gave it an ID earlier, so that we can set it to a variable. Next we add a "click" event listener which will give a response every time we click the button. Set a variable for the "list-of-items" to our global scope, so we can call on it later. We then set "list-of-items" to empty string so that our cart-items dont repeat themselves when we add them to the shopping cart. To save it in our backend so that it doesnt dissapear when we refresh the page, we need to create another fetch with the method "POST". "POST" creates a new cart_item, with the attributes of cart.id and product.id, then we send it to JSON and JSOn will respond by appending it to our renderALlCartItems. It will work like this:

Next we create our eventListener for "remove" button in our RenderAllCartItem function. This will delete the product from our cart:

Lets walkthrough the code. First set variable for the "remove" button, next create our event listener "click". The (.remove()) method deletes the selected element, which is our newLi. In order to save it to the backend we need to create another fetch, this time with the method "DELTE", and then with the response we sent to JSON and receive from JSON we push it to renderAllCartItem. It should work like this:

Finally we will write the code for our checkout div. Like what we did for everything else, first set the variable for our "checkout" div. Then we create a new div element:

Our checkout will have subtotal, tax (the subtotal * our set tax rate), total (the subototal + tax), and a checkout button. The different variables are the equations that will add up the price and show up in our checkout. Then we append it to our checkout variable. It should look like this:

Now we create our event listener for the checkout button:

When we set click the checkout button, there will be an alert box, everything will go back to $0 and the cart will return an empty array.

If you want to add some CSS to it to make it look alot more appealing you can visit this blog and learn how to: https://dev.to/iqramqra/5-basic-design-concepts-for-front-end-devs-19am

If you follow everything and add some css to it, it will look like this: