Create a Shopping Cart With Vanilla JavaScript | ES6

code explains is hi today we're going to build a shopping cart using javascript so i'm going to show you now what we're going to build at the end of this tutorial so i have here some products and i can add these products to my cart or to the cart using this button here so if i click on this one now this t-shirt number one is added to the cart i can also click on this again to like increment the number of units as you can see here and i can also decrement the number of units and increment the number of units using these two buttons here now you can see that when i increment the number of units here i have eight units so the subtotal here the number of items in the car is eight items and also the total price i can also add as many products as you want i can still add or increment the number of units for each product if i hover over one of the products here i can click and remove that from the cart as you can see here and also if i have for example this t-shirt in my cart and then a one for example six units of this now i can just get five five units of this t-shirt why i can't increment this anymore why because i only have five t-shirts in stock so i can get more than five t-shirts and now you can also see that in front of the cart here it says five because i have five items in the cart and now if i go and refresh the page you can still see the items or the products in my cart so everything is saved in the local storage so without further ado let's go and build our shopping cart well before we start make sure to subscribe and hit the bell and select all to get all the notifications that's how you're going to know about every new video i upload and that's how you're going to encourage me to make more of these videos well now you need to go and download the starter template that's where you're going to find all the files we're going to need to build our shopping cart using javascript so we need to click on the link in the description and go and download this as a zip so i'm gonna go and save this to the desktop and now that this has been downloaded i'm gonna go and open the zip file and i'm gonna go and extract the start template so the start template is where the files we need to start building our shopping cart are hello the shopping cart here is the final project okay i'm just gonna go and rename this to shopping cart now i'm going to go and open this using my text editor so i'm going to go and open folder and then open the folder in the desktop so here i'm going to show you all the files so we have here the icons we have used in this project the images for our products and also we have our app.js so this is where we're going to work in this tutorial for the html we have all the code already typed in so we're not going to talk about any each demo in this tutorial this is a javascript tutorial for products.gs i need you to focus here so products is an array of objects and each object here is a product so we have your t-shirt one t-shirt two three etc so every object here is a product and each product has these properties an id a name price in stock i mean we have in stock a description and the image search of the product so this is the second product third product four five and six so we have only six products now i need you to think about these constant products as something we get from a database all right now if i go to start that says here all the css code is already typed in like html so we're not going to talk about any css in this tutorial again this is a javascript tutorial now all the work will be done in our app.js yes so now you know everything about our files let's move on to the next step i'm going to show you now a love preview of our project so i'm gonna go live so this is the home page if i click on this arrow i'm gonna go to their products so this is where my products will be rendered and this is the card so if i click on these buttons here nothing's happening because we didn't implement any javascript yet so let's go and do that so i'm going to go to my text editor i'm going to go to my index.html if i scroll down i will find here a div with the class name products and it says render products here so this is the area we will render the products and this is where in each demo we're gonna render those products so this is one item so this is the html code for a single product this product here so if i go and duplicate this two times and i go and take a look i will have now two products here which means whenever you need to render a product you need to use this html code so this is like a template so i'm just gonna go and cut this so i can use it here later on so i'm gonna go now to the products.js so i'm gonna show you this one more time so products array has elements they are objects and each object here is a single product it has a name price description image search and stock and a unique id so what i'm going to do now is i'm going to go back to the index.html go to the bottom here and i need to link my files my script files or my javascript files the first one we need to link is our script products.gs and then the second one is our script dot gs be careful here to link the products.js first then the app.js because that's how we can be able to access the products array from our app.js file all right now i'm going to go to app.js and the first thing i'm going to do is i'm going to go and select this step here and then using javascript i'm gonna render the products from here into this area here using my uh html template i cut before so i'm gonna go to app.js then i'm gonna add a comment say select elements i'm going to create a constant called product element i'm going to say it's equal to document.query selector and then it's gonna be products so products products and hit save and now i'm gonna go and create a function to render the products so i'm going to create a function render products and now because products now is a global variable i can access my products from within this function here so i can just say products and i can access that array now because this is an array we need to loop over this elements so we can use a for loop or we can use a for each i'm going to go for a for each method it takes in a callback function and the first argument here for this function it's going to be the elements in my array products so i'm just going to call this product because each element here is representing a product so if i hover over this now you can see that it says it's an object it has an id a name a price and stock description images these are the properties i need to render my products to the user interface so i'm gonna go now and use the products elementary selected this dev here and change its inner h demo i'm gonna use a plus equals sign here because i don't want to override the products element inner h demo i want to keep the last rendered product and then i'm going to use here a back thick a lateral expression so i can use a multiplying string so i'm just gonna now paste in the html template for a single item or product now if i hit save now and i'm gonna call or invoke the function render products so to run this code here if i go to my page you can see now that we have six products here all rendered but they although all the same because we didn't change this html code now what we need to do is we need to change this so for example here in the amateurs we need to use the image source of our product so i'm going to use a dollar sign then some color braces and now i can put a variable here so i'm gonna use i'm gonna say product dot image search if i hit save now and i go back to my page you can see that the images have now changed we still need to change the titles and the prices and the descriptions also so i'm going to change the all for the image so it's going to be a dollar sign again then some color braces then product and then it's going to be the name i'm just going to go and copy this to save some time so t-shirt it's gonna be here the name of the product here it's gonna be the price and then here it's gonna be the description description and then that's it so that's all we need so if i go back now to the page you can see that they all have been changed so now we have rendered all the products all of our products now the next thing is when i click on this buttons here nothing's happening now but the next thing is when i click on this i want to add this product to the cart now we can say that we need to add event listeners here but i have a better way so when i render the products in the dev here so it says dev for this uh this button here what i'm going to do is i'm going to go here and add an unclick event so instead of adding an event listener i'm going to add an unclick event because that's the easiest way to do it so i'm going to call a function i didn't create yet called add to cart and now this function here when i click on the this button here we will when i click on this button here i will call this function add to cart and that function needs to know what is the product it will add to the card so in that case to know the exact product to add to the cart we need to pass in the product dot id because each product here or each product here has a unique id so that's how we know the the the products using their ids so now if i go here to the apps.js to the app.js and then i'm gonna go and create the function my function add to cart and so this function here takes in an id and now i'm just gonna go for now and console.log that id so if i go back to my page here and i'm gonna go and open the console if i click now on here you can see it says zero the id of the product all right now it's going to be five four and then three now that's it for rendering our products now it's time to go and talk about the code inside our add to cart well now when i click on this button here i'm gonna go and add this product to the cart all right now what i'm going to do is i'm going to save that first that product which means this whole object i'm going to save this whole object in a new array called cart so products is where all the products are is what we get from the database for example but now when i click on the add to cart button i'm gonna add this object here which represents our products into a new array called cart so i'm gonna go here and create that array so cart array to save all my uh items added to the card so i'm going to say let card equals equals an empty array all right and now in here what i'm going to do is save that product object this object here to the cart of course we have many product many objects but we need to save the right one using its id which means i need first to find the product inside my products array and then save it or push it to the cart so that's what i'm going to do so i'm going to go and say products array dot find so i need to find that that item or the product the product that verifies this condition the condition is simple it's going to be product dot id equals the same id here the one the user clicked on all right so i'm just going to go and use let or const because this is an object so const let's call this item equals products and then console.log the item all right so if i save now and go to the console here and go to the console now if i click on this one this will console.log that item i clicked on the one i found using find method all right so if i click on this now you can see that we have got an object its name is t-shirt one which is this one here the price and stock the image sears the id description all the properties are there now we need to save them in our new array which is cart so i'm just going to go and say cart dot push and i'm going to push the item to the card now if i go and console the log the card array if i save this if i go back here then click on this one this one and you can see now that we have two products t-shirt one and t-shirt two and that's great but if i click on this one here and check again you can see we have to shoot one and again we have the shirt one here which is not what we want here so we need first to check if the product already exists in our cart so for that i'm gonna use an f statement and i'm gonna add a com here so check f products if product already exists in in cart so i'm going to use an if statement and i'm going to use card dot sum so i'm going to if one of the elements inside my array it has the same id here so if some item in my cart if some one of the items in my cart has the same id has the same id as this one here this means that that the product i want to add already exist in the card so in that case for now i'm just going to alert product already in cart all right else if it's not in that case i'm just gonna go and copy this whole code and paste it in here and that's good so now let's go back to our page and check so if i click on this one here you can see now it's in our array that's good if i click back on it it says product already in cart that's good so what i'm going to do here is uh you can see here we have the number of units all right this number of units is a new property that will be added to the product object when i click when i add it to the cart so here instead of just pushing the item of the product with all these with all these properties we're going to like add a new one called number of units and we're going to set it to one all right so i'm just going to copy this i'm not going to add it here this is something we get from the database we won't attach it at all so if i go here to app.js so instead of pushing the item with the old properties now i'm going to push an object okay our product and i'm going to destructure the item so now i'm just going to save all all the old properties of our product and also i'm gonna add a new property called number of units which is set to one okay now let's save and let's go back to our page if i open the console and if i click on this one here if i click back on it it says product audi in cart and if i check my array and it has one product and we can see here that we have a new property called number of units which is set to one which is this one here all right now later on when i click on this plus we need to change this to two increment this number here if i click on this here we need to decrement this number here and also if i click on this one here i don't want to show product already in card instead i need to increment this number here that's good all right now what i'm going to do is i'm going to go and remove this console log and i'm gonna go here and update cart a new function to update the cart so when i click on this one here i want to update the cards i want to add the products i clicked on i also need to update this number here and i also need to update the subtotal so all this work will be done using a function called update card so let's move on to the next step and talk about the update card all right so our update card will go and card update function update update card so this function here will go and render cart items okay and also it will go and render the sub total all right so this is two things it will do so it will update this car here the items to also go and update the subtotal so let's now talk about just rendering the cart items i'm just gonna comment out this all right let's go and create the function render card items so function render render card items so this function here will do the same thing render products that of course i'm gonna go and use a for each method on my card array and then i'm going to change the inner h demo of this dev here this step here so this is where it says render kite card items here so we're going to like select this element first so i'm going to go to the top and then i'm just going to go and duplicate this so this will be card items element and this will be our card items class name so cut items element so i'm going to go and change the card itemselement.iner html plus equal and then some backticks all right now if i go to index.html this is the template for a single card item i'm just gonna go and cut this all right save now you can see that my my card is empty so now i'm gonna render the card items here from my card array so i'm just gonna go and paste in this i'm gonna add some indentation here i'm just gonna remove that from here so now the source it's going to be of course this item here i'm going to call this item so each item in cart i'm going to go and render the item dot image source i'm going to copy this for the alternative of the image is going to be the name just like before and for the t-shirt name or the product name is going to be an item name for the price it's going to be the item then price and here it's going to be the item dot number of units and we're good so now if i go and go back to the page if i click on this now you can see it there if i go and click on this see what's going to happen you can see that now the t-shirt one is duplicated so what's happening here is that when i call this for each method i will uh not override what's already in the cart items element because i'm using here a plus equals sign so it will add the new elements or the new products on top of the old ones so to fix this i'm just going to go and clear our cart items in each stem up because before adding anything to it so i'm just going to add here clear cut element all right so that's it now if i go back here now if i go and add this one add this one you can see that it's not duplicated anymore all right so if i still click on this one i still see the product already in card that's great now the second or the next thing is going to be changing the number of units so now if i click on this one here nothing's happening this one here nothing's happening so you may think that we need to add a an event listener to these but we're not we're just gonna stick again with the unclick event so here in the minus button i'm just gonna add an unclick event an unclick event that we'll call a function that i didn't create yet this function i'm going to call it change change number of units all right we'll call the change number of units because we're changing the number of units here so i'm going to call the same function when i click on the plus button here change number of units and this function here we need two things the action so i'm going to use here single quotes be careful because i have here i've used double quotes here i need to use single quotes so it's going to be minus and here i'm going to need to put in the item id so that's how my function change number of units will know what uh what's the item it will like decrement its number of units and in here i'm going to use single quotes again then plus and then it's going to be also the id of the item so i'm going to go here and create that function change number of units for an item so the function is going to be called so sorry so for the function name it's going to be change number of units and i'm going to use parentheses so this will take in two parameters the first one is going to be the action it could be minus or plus and then the second one is going to be the id of the item i want to change alright so now let's move on the next step and talk about the code for our change number units function well now when i click on the plus or the minus buttons here i will go and change the number of units and i will need to go actually into the array cart and then look for the product or the item that has the same id here and then change its number of units based on the action here if it's minus i'm going to decrement the number of units if it's plus i'm gonna increment the number of units of that product or of that item in the cart so doing this using an old way it's gonna be a pain and that's why i'm going to use the map method so i'm gonna use map map is used on arrays so in our case it's going to be the card array the map method here takes in a function a callback function so the map method here will run this function on every element in my card and at the end it will turn a new array a new updated array so that update array will be our updated card which is just our card array all right so i'm gonna save the old card array in my cart array and i can now use this as the new updated card so this map here or the callback function takes in the parameter which is going to be our item the items inside my cart if i say return item now this will do no changes to the items in the cart so it will just get the item return the item and this will make no changes to the items in the cart but in our case when the user clicks on minus on plus we need to change the number of units of the item and then return it okay so i'm gonna go here and check if the item dot id equals id so that's how i know the item i want to change because my card maybe it will have 10 items i won't change just to one item the user has clicked on not all the 9 items so if the item.id equals id i want to do the change if it's not i'm just gonna return the item all right so here i'm gonna go and get the old number of units using item dot number of units then inside here if the action is if the action is minus i'm gonna go and decrement this by one else if the action is is plus i'm gonna go and change this or increment this by one all right now i have made the change but i can't see it here because i'm just returning the item what i'm going to do is i'm gonna go and return an object and then with the item destructured the same thing here as before i'm just returning the item i'm not changing the odd number or the number of units of that item so i'm going to go now and change the number of units to all number of units now think about it like this if the old number of units is changed then it's going to be changed if it's not then it's going to be the same as before so now i'm just going to go get rid of this old number i don't like it i'm just going to call this number of units number of units so now here i'm just going to say number of units and now because i have the name of the property is the same as the name of the value i can just go and use the name of the property so now this one here it's gonna be the same as this one here now after i have changed the card array i need to update the card so to see the changes in the user interface now if i go back to my page if i click on this here if i click on the plus you can see that i can increment the number of units if i click on minus you can see i can buy minus five t-shirts with the which doesn't make any sense also if i go here to products and i go to t-shirt number four you can see here we have in stock just five and if i go here and add this to the card and if i try to buy more than five t-shirts i can't which is not right so i'm gonna go and fix this i'm gonna go to the change number of units function again so here i want to decrement the number of units only if the number of units is greater than one so if it's two i want to decrement it three i want to decrement it but if it's one i won't decrement the number of units the same thing here i want to increment the number of units only if the number of units is less than the item that's in stock number all right let's now check this so if i go and add this to the card if i click on minus you can see i can't decrement this if i click on plus you can see i can't implement this but i can go beyond five that's good now when i click on this here i don't want to say or to alert product already in cart i want to actually increment the number of units here so it's simple i just need to go to my add to cart function instead of alerted here i'm just going to go and call me if i can change number of units the action is going to be plus and then it's going to be the id here the id i want to add again to the cart so i'm going to save this i'm going to go back here so if i click on this one here the add to cart button if i click again on it you can see that i can increment it after five i can't add any more units and that's good and now the next thing we're going to do is updating the subtotal and now it's time to render the subtotal so we need to calculate the number of items and the total price so we have this items what i want to do here to calculate the number of items i need to go for each item in the cart and then i want to calculate the sum of the units in the cart and then for to calculate the total price i need to go through all the elements and all the items in the card and then multiply the unit price by the number of units for each item and then calculate the sum of them so let's go back to app.js i'm going to go to update card if you remember we have comment commented the render subtotal function now i uncommented it and i'm going to go and add a comment that says calculate and render sub total so i'm gonna go and create that function render subtotal now i'm gonna go and create two variables one is gonna be called total price for total price and the other one is going to be total items total items okay just lead that way total items i'm going to set both of them to zero total price and the total items so i'm gonna go and use a for each method on my card and then for each item i'm going to do to calculate the total price i'm going to use a plus equals sign i'm going to go and calculate the sum of each item that price times each the item that number of units and then for the total items total items items it's going to be just the item that number of units and the good now i need to go and render this so i'm going to go to in the index i dot html file so if i go here i have a dev with the subtotal class name and this message here so i'm just going to copy this i will remember the class name subtotal because i need to select that so i'm just going to call this sub total to select that element the same thing is going to be sub total and now i'm going to go to the bottom here and change the subtotal element dot inner h demo to some back text and then paste in the text here so for the number of items i'm going to use a dollar sign then it's going to be my total items variable here for the zero so this dollar here is for the currency and this one here to put in this variable total price and now if i hit save and i go back here if i refresh then add this one here you can see we have one item and then 29.99 which is the unit price times one if i add another one now it's multiplied by two if i keep adding this you can see we have here meaning numbers after the dot so we need to fix this just to two numbers after this dot so what i'm going to do here the total price i'm going to use a method called to fixed so to fix and i need to fix this to two numbers after the the the dot if i hit save go back here if i add this one again if i increment the number of units you can see that we don't get we get just two numbers after the dot that's good we still need to uh like update this too so i'm just gonna go and inspect this to know the class name so it's going to be total items in cart i'm just going to copy that and here i'm just going to go back to the top and select and select that element i'm gonna call this total items in cart a bad name i'm gonna go back here to the render subtotal and i'm going to go and say total items in cart that inner html is going to be set equal to the total time total items so if i hit save and go back to the page now if i add this to the card you can see now it says one in card two etc all right now the next thing is when i hover over this item i can click on it and remove the item so the next step is going to be removing an item from the card so let's go okay now to remove an item from the cart i'm going to use i'm going to create a new function uh the function is going to be called remove item from cart so function remove item from cart okay so my function needs to know which item it will remove from the car so it needs to take in the id as a parameter now i'm going to use card dot filter the filter method to filter my library so this takes in a callback function and here we have a condition so now this filter here will filter our array card based on this condition all right the condition will be like this so the callback will take in the item itself and our item has a property called id so we just need to filter all the items in my cart where the item.id of those items is not this id here so i just like want to keep all the items from my card that the id is not the one i want to remove all right now i'm just gonna set this to cart so cut that filter will return a new array that new array will be set to my card array and now whenever i change the card array i just need to update cart using my function update card so the user can see the changes in the user interface so i'm going to go back to the page here if i add this one here this one here this one here now if i hover over this and click it doesn't get removed because i didn't call the function so i'm not going to add an event listener to this element here i'm just going to add again a non-click event just like we did here so whenever i render the card items i'm gonna go here so this is the image and this is the name so the image the name so this is where i will add an unclick event so i'm just gonna go and say on click and i'm gonna call my function my function remove remove item from cart and this will take in the id of course so if i hit save now if i go back and then add items now i can hover over this click and it's been removed and you can see that the subtotal is also updated the card also is updated etc so now i can add these and they can also remove them all right and now it's time to save the users card items in the local storage because now if the user added some items to the cart and refreshes the page he will lose its items so let's go to the next step so now we need to save our card array to the local storage we need to save that card array whenever we update our card so whenever we update our card which means i'm gonna go to the function update card and then i'm gonna save the cards save card to local storage so here i'm going to use the local storage object then i'm going to use set item method this takes in two parameters or arguments the key and the value the key i'm going to choose card and then the value it's going to be the card itself all right now the card here that the key we need to use a key why because when we get the item we need to specify the same key to get back our card all right now for the card here i'm not going to save it like an array so i'm going to go and use json that stringify then my account and then save now i'm going to go back to the page if i add these and i go and open the console dev tools and i go to the storage then local storage you can see we have now three items here three items that's good now if i refresh the page we don't have them here but we still have them in our local storage now we just need to get back the card from the local storage and then render the card so that's all we're going to do so i'm going to go here to the card and use local storage.getitem and then this is where i need to specify the key i used before so i'm going to use card and then after getting the item card from the local storage i will need to render the card items using update card because update card is going to call our function render card items and render subtotal so i'm going to hit save and go back to my page now i have items in my local storage if i refresh you can see that we don't get the items here and they have an error here in the local storage in the console so it says that the card dot for each is not a function which means we have a problem why why do we have a problem here because we used here json.stringify to stringify the card and now we need to pass back the card to an array so that's what i need to use here json json.parse and i'm gonna hit save let's go back now and if i refresh now you can see the items in the cart all right now let's go and do something let's go and remove this delete car now it's like the user is using our app for the first time if i hit refresh you can see i have an error again if i go to the console it says that current axis property for each card is null why the card is null because when it runs this code here it finds out that there is nothing in the local storage so my card will be no but instead must be an empty array like before so i'm going to do here i'm going to use or an empty array so now if nothing is in my local storage the card will be an empty array if there is something in the local storage it will get that from the local storage pass it and then send it to the cart now if i hit save go back to the page refresh i don't get any error anymore now if i add new or items to the cart everything's working i can also remove items i can go to the top and refresh you can still see the card stays for i can go back to my items i can refresh and my items are still there so now we have reached the end of this tutorial i hope you enjoyed this i hope you learned new things so don't forget to subscribe and like the video and see you in a new tutorial

Channel: Code Explained

Views: 7,173

Keywords: programming, coding, web development, learn web development, learn coding, javascript, frontend development, web design, html tutorial, css tutorial, beginner projects, javascript projects, javascript tutorial, html projects, css projects, web development projects, learn to code, javascript beginner projects, easy javascript projects, web development tutorial, freecodecamp tutorials, javascript beginner tutorials, source code, shopping, cart, ecommerce, es6, vanilla

Id: UcrypywtAm0

Length: 49min 10sec (2950 seconds)

Published: Sat Aug 28 2021