Javascript project: Shopping cart toturial [ For Beginners ]

[Music] hey guys welcome back to another tutorial so in today's video we're gonna see how we can create a shopping cart using javascript so for that i'm going to show you a demo of the project so what we'll create is that when we click on these buttons at the cord the product should be added to to this cart and if i click on this one you will see that the sum price of all products that are in a card will be shown here in the right side of this icon and if i add another one you will see that this prod this price will be changed dynamically each time we add or remove any product to the car so if i show the cart you will see that those products are already in a cart and we also are able to increase and decrease the count of each product so for example if i click on this plus button you will see that the count has changed and also the price and some price have changed as well we also able to decrease so if i click on this minus button you will see that the count decreased by 1 and the price changed as well and if i click one more time you will see that this product will be disappeared from cart because the count will be zero and when it is zero so there shouldn't be any product so if i click on this you will see that product will be removed from the card okay so this is what we will create now i'm gonna close this card but i'm gonna let this demo page open so we will need it later and then i'm gonna move to this page this is the page that we will work with it so here when i click on these buttons you will see nothing happened and no product will be added to the card so now let's uh start coding and add those functionality that we saw in a demo to this page we can start by creating a separate javascript file for the shopping cart which i already did and i named it shoppingcart.js and then we have to add it to the end of body tag in the index.html file and i did it here in this line and then here in a shopping cart dot js we can start by creating a variable and call it products in a cart and assign it to an empty array so we will store the products that we want to be shown in the shopping cart here in this variable then i'm going to create another variable and call it the parent element and assign it to document query selector and then i'm gonna select an element with id by items so i can open the demo page here so show you which element i mean so if i select this i 10 you will see that this product is stored in this unordered list and this unordered list have the id by item so this is the parent element that i selected so this list will contain the products that are in the cart then we have to selected this this sump price as well so we can do it by creating another variable and call it the chord sum price and then document course selector and this time i'm going to select the item with the sumprises id okay now uh we have to select all the products in this page so and by that i mean the products that have these buttons so it will be these four and these mobiles to select all these products i'm going to create another variable and then name it the products and assign it to document query selector all then i'm gonna select all the elements that have the product python under in the classlist now we can add event listener on all of those products by typing products for each product then for each product add event listener the type of event should be click and for callback function first we have to pass the event as argument to it and in the callback function itself the first step is to check if the event comes from the add to cart button and we can do it by checking if the element have the up to court in their class list so if target class list contains then the class name at the to part and if it contains then we will grab the product's information and then add it to the code we can start by getting the product id so for that first i'm gonna show you where you can find it here in this html code so here in this add to cart button you see that there is a data attribute which is named product id and this is the id that we want to access it first i'm going to create a variable so we can store it into this variable then assign it to event target data set and then product id then we can get the product name for the product name we will use this div tag which is same as this product that we are adding event listener on it and then we can access this h4 tag by using this class name product name so we can type product then query selector and select the product name but this part of code will return the whole h4 tag which we don't need all we need is the text inside of it and we can access it by adding the inner html into the end of this square selector then for the product price we can do the same and i can copy the code and paste it here and all we need is to change this class name to the price value then we can get the product image so for the product image we can type product query selector and this select the image tag then we can add the src or source to the end of the square selector because we want the image path and not the whole image tag now we can set all this information into into an object so for that i'm going to create an object and name it product to cart then assign it to an object with a name products name then for the image product image and for the id product id and the count by default is one then the price will be product price but here we need to convert this product price to the integer because this is a string and we can do it by simply adding the plus signs before the product price then we need also a base price because the price will be changed each time the count is changed so we can set the base price to the same product price now i'm gonna call two functions that we didn't create them yet but we're gonna create them in a second so the first one is called update products in core and we have to pass this product the code has argument to it and the second one is update shopping cart html so the first function will update this product in a cart list and because this list is updated they have to update html code as well so this function will do that now let's create this update products in a cart so for that i'm gonna move this part down and then function then the name of function and then it takes the argument so i'm going to call it product so what this function will do is to look through all the products in this list and check if this product that we passed as argument to it exists in this list and if it does then we want to increase the account by one and update the price but if it doesn't then we want to add this product to this list to do that we're going to start by creating a for loop so for a i equal 0 and then i less than products in our length and then we want to increase the i by one and here we're gonna check if the products id that we passed is equal the products id of the index i and we can do it by simply checking if the products at index i and then id is equal product id and if it is so if they are same then we want to increase the i can just copy it so then we can increase the count by one and then for the price so to updating price we can get the price by multiplying the base price to the count of product and we can do it by simply typing product at index i then base price and then multiplying by this products count and then we want to return so after we update the price and count we have to exit from the this function and we can do it by adding this return to the end of this if statement but if we look through all the products and we didn't find any products that have the same id then this means that the product doesn't exist in the list and we can add the product to this list and we can do it by typing products in cod and then push the product okay so now this function is done so we can now jump to the this update shopping called html and create this one to create this function we can copy the name and here at the top we can type cons functions name function keyword and then curly bracket so what this function will do first it will check if is there any products in this products in a cart list and if it does then it will look through all of those products and the generator html code for each of them and at the end it will add those html code to this parent element but if there isn't any products then it will first hide the checkout button and then it will add some sort of text that says there isn't any products in a card so we can start by checking if products in cart length is greater than zero so if if it is so that means that there are some products in a chord otherwise so if the card is empty then we want to first remove the checkout button and for that first we need to select it and we can do it by using the last name check out and then plus list and then we can add class name hidden then we can add some text to this parent element that says that the court is empty so for that parent element and then inner html and then we can set it to this h4 tag that says your shopping cart is empty we also need to set this some price so it will be here this sum price there shouldn't be any price here and we can re remove it by by setting it through by setting the inner html to empty string okay so what if there are some products in a code so for that we can use the map function to look through the products and return html code for each of them so we can do it by typing products in code and then map function products so for each product we want to we want to return a string but before that because this map function will return some sort of output so therefore i'm gonna store it to a variable and call it result and then we can copy the html code for the product so this part of code is html code for a product in the cart so you can copy it and then paste it here then we need to change some information here so for example we can stop by this image and set it to product image then for the product name so it should be product name then price and then here you see that we have a data attribute which is named id so these two buttons plus button and minus button we're gonna use it to increase and decrease the count of the product so for that we need to know which product that we want to increase or decrease the count of it so we need to change it to product id now we can set the current element inner html to resolve and then join because the the result of a map function is an array and we want just one html code and not just a an array of html codes so by using this join join method we can join all of those to just one string then we need to also remove the hidden class name from the class list of checkout button so we can copy this part and here we can paste it and change the add to remove then we can update the sum price so i can set a dollar signs here then here i'm going to call the functions that we're going to create it in a second and it is called count the price so it will count the same price of all products in this products in a cart so we can copy the name of functions and then here we can create it by typing const functions name function keyword and then curly bracket it will be a really simple function so we can start by creating a variable called the sum price and set it to zero and then we're gonna loop through all of uh products in this in this products in a card list and add this price of each product to this some price now we can do it by typing product in a cart and then for each product for each product we want to update the sum price by product twice at the end we want to return the sum price and that's it so as i said it is a really simple function now we have just one more thing left and it is these two buttons the plus and minus buttons right now if i open the page you see that we are able to add products to the code but none of these plus and the minus buttons work so to add the functionality to them we can add event listener to this parent element and then check if they even come from one of these buttons for that we can at the bottom of the code type parent element then add event listeners and the type of event which is click and for the callback function first we have to pass the event as argument to it and inside the function we can start by creating a variable which is called is plus button then assign it to event target class list and then contains bottom hyphen plus so this piece of code will return true if the element that we clicked on it have this class name so we can do the same for the minus button so you can change the plus to minus as well and why we've created these two variables is because by by using these two variables we can check if the event come from the minus or plus buttons so to do that we can create a first statement and check if is lost button or if is minus water and if it is then we can look through the products in the court and check if a product have the same idea as this data id so by checking this we know that which product that we want to update the count and price of it so for that we need to create a for loop for i equal 0 then i less than product in a chord length and increase the i by one and here then we can check if product in a cart so product at the index i then id is same as the event target data set id so by checking uh these two id we know that uh which product that we want to update the count of it so and now we need to check if which of these buttons are clicked so plus or minus button so we can start by checking if is plus button so if it is the that means that we want to increase the count of the product so we can copy this code then we can update the count so we can create it by one then after this effect statement we can type else if is a minus button so that means that we want to decrease the count of the product so we can copy the same code here again but this time we want to decrease it after this if a statement we can also update the price because now the count is changed the price should be changed as well so you can type product at index i then price and as i showed you before we can count the price by multiplying the base price of the product to the can copy here to the count of the product so and now because some products have been changed in the court we also need to change the html code and we can do it by using the the same functions the that same function that we created before and it was called update shopping cart html so by calling this function we are updating the html code as well now here in this callback function we have just one more thing that is missing and it is to check if the count is zero so when it is the count of a product is zero so we have to remove it from the cop and we can do it by adding another if a statement uh after this if a statement so if product in a code and then the product at index i then the count is less or equal zero then we can remove it from the card and we can do it by typing product in a card and then as flies and then the index of the item and how many items we want to remove and it is just one so now we are done with this part as well so we can open the page again and check if everything work correctly so we can add some products to the cart and as you can see those products were added correctly to the cart and then we can increase the count okay so here sounds like we have a book and the price were updated correctly and even here but the count of the product didn't change so i think it should be somewhere here in the html code so as you can see here the count of the product is always one with so which which is wrong so it should be same as the product count and not just one so now we can reload the page so and then we can add some products to the code and then increase the count okay so now the borg is solved and we can also remove the product and the product is removed from the car so before i finish this video i'm gonna add one more functionality to this shopping cart so right now if i reload the page you will see that this product that are in a cart will be removed from it so what if we want that this product uh remain in a cart even if we reload the page or close the web browser so for that we are going to use something called local storage and local storage is a property that allows us to store data into a web browser so to use it first we have to decide where in this code we want to add the data to the local storage and i think this update shopping cart the html function is a great place because each time something is changed in a shopping cart this uh function is called so to use the local storage we can call or we can type local storage and then to add data to the local storage we can use this set item method and because in the local storage the data is stored in a key value pairs we have the past two arguments to this set item so the first one is the key and i can call it shopping cart and the second one is the data that we want to store which is this products in a cart so i can copy it and paste it but we can't just pass this this data as it is because in this local storage the data should be in a json string format so to convert this array to json string we can type json and then stringify and then we can pass this array as argument to it we also need to get data from the local storage so i think we can do it here at the top and then store it to these products in a cart so for that i'm gonna first remove this empty array and then we can type local storage then get item and then has the key value which is this shopping cart and as i said before the data is stored in a json string therefore we need to convert it to convert it back to the joey script array and we can do it by typing json and then parse and then we can pass this json string as organ to it right now if there isn't any data stored in this shopping cart and the result of this line will be null which will cause some errors in our code so for example here we have these products and the products in a cart and then linked and because the products is null and the null value doesn't have any properties that called length so we will get some error here so therefore we need to add a if a statement here and check if there isn't any products in a curve then we want to set products in a cart to an empty array we also need to update the html code because if we got some products from the shopping cart here from the local storage so that means that this products in a cart is updated and therefore we need to update the html code and we can do it here at the bottom by copying this update shopping cart html and paste it here now let's see that those changes that we made in a code are working correctly so for that i'm gonna first add another product to the cart and then i'm gonna reload the page and as you can see those products are still in a car so this means that this will be the end of this video so i hope the video was helpful and if you enjoyed it make sure you like the video and subscribe to channel and if you have any questions you can leave it in a comment section below so see you in another video

Channel: Index-Zero

Views: 11,203

Keywords: javascript shopping cart, Javascript shopping cart tutorial, shopping cart javascript, js shopping cart tutorial, javascript create shopping cart, Javascript create shopping cart tutorial, JavaScript tutorial create shopping cart, javascript shopping cart for beginners, javascript creating shopping cart tutorial, how to create shopping cart using javascript, javaScript tutorial how to create shopping cart, javascript shopping cart tutorial for beginners, shopping cart js

Id: LtTlfxzxlhY

Length: 31min 26sec (1886 seconds)

Published: Sun Jul 04 2021