How To Add To Cart Shopping using HTML CSS and Javascript

Hello everyone welcome everyone back to Lun Dev  YouTube channel in this video Let's create the   function to add products to the cart use HTML  CSS and JavaScript here is a function I have   done before however in this video we will update  the new method New Logic new way of doing things   makes our code clearer and more beautiful so  don't skip this video as everyone can see on   the current screen this is the product list  page divided into four columns each product   includes information such as image product name  price and there's a column of cart icons here   attached as a number representing the number of  products in the shopping cart the default value   is zero when clicking on this this icon from  the right side of the screen a shopping cart   frame will appear simultaneously the website's  content will be pushed to the left to create   this effect now I will add a product first  to cart products in the cart were updated   immediately even the quantity on the icon  has been updated I continue to add other products if I now add a product that is  already in the cart then at this time   time it will not add half instead it will  increase the number of that product in the   cart simultaneously I can also change the  product quantity by clicking on the Arrow buttons when a product's quantity is reduced  to zero then it will be removed from the cart okay now I will reload the website or I  turn it off and turn it back on then access   the website then the shopping cart information  will still be there this is very important all   shopping carts of sales websites use this logic as  for the issue of website responsive this project   has been designed to be completely responsive  for different viewing platforms from laptops   iPads to mobile phones that's what we're going  to do in this project if there's anything you   don't understand while watching please leave a  comment and I'll help you now let's get started   here I have created did three files HTML CSS and  JavaScript I haven't written anything yet now I   will write the CSS and JavaScript paths into the  HTML file in the body I created a container class   to contain all website content with headers there  is a class title containing the title content   product list besides I created an additional  class icon cart to contain the shopping cart icon to search for the icon I will visit the flowy website here I will enter the keyword I want to find once you find it click on the icon to copy  it I will paste it here let's delete this class   part because it only works with tailwind  and we don't need it besides I will create   an additional span tag with the default value  of zero this will be where the total number   of products in the card is displayed I will  proceed to edit the design for this header I   don't like this font so I will visit  the font Google page to find another font the font I want is Poppins  select the font options you want to use then click import copy all of this content to   the top of the CSS style page and  copy the font family code into the body set margin body to zero coupled with the  container class I gave it a width of 900 PX   however there is a problem here when we access  websites using browsers with screens smaller   than 900px then it will not accommodate the  container makes the design broken so let's   stipulate that the maximum width of the  container class is only 90% of the screen ratio to put this container class in the  middle of the screen I will set margin Auto   Center the content within it with text align  Center create a little distance from the top   of the browser window with padding top with  the shopping cart icon I will shrink it to   30px now I want these two elements to be on  the same row so in the header I use display flexx with justify content space between  so that the two elements are on both sides use padding to create a distance between top  and bottom 20px okay next is the icon cart span tag I gave it a width of 30px note that with the  span tag it's default display value is inline with   inline it won't understand width and height so I  have to give it another value for example block   to put this number in the center of the element  I will use display Flex with justifi content to   center it horizontally align item to vertically  Center it use border radius to create a circle   now I want this span tag to overlap the icon then  I have to declare are one more attribute position   absolute and the big guy is that the icon cart  class must declare position relative then we can   use special position alignment properties where  top is the distance from the span to the icon   cart class right is the distance from the span  to the icon cart class and this is the position   I W now we will come to the product list display  I will create a class list product to contain the   entire list of products each item will correspond  to one product each item will include information   image name price and a button for users to add  that product to the cart I will Design this part   too the images inside each item will have a  maximum size of 100% of the size of the item   class use drop shadow to create a shadow effect  behind the product in class list product I will   specify the number of columns of the item class  using display grid with grid template columns   I will divide it into four equal columns each  column is 20 PX apart for item classes I will   color the background with background color  padding to create space between border and   content border radius to bend the border for h2  tag the default font weight of H2 is 700 I will   reduce it to 500 font size to adjust the size  with class price letter space to create space   between letters adjust the font size to smaller  with font size small finally there is the button   to add products to the cart I made it Stand Out  by making the background color black and the text White when I hover the mouse over the button  I want to create a hand-shaped cursor effect   so I will add cursor pointer the next  part will be the shopping cart content window it will be a class outside the container  class not inside the container class its name   will be cart tab titled shopping cart a  list cart class to contain the list of   products in the shopping cart and finally  a BTN class containing two buttons one   close button to close this window and  one button to navigate to the payment page let the width of the cart tab be 400px the  background color will be black the text will be   white so that this cart tab can overlap the  website content I will use position fixed at   this point it will use special properties to align  the position based on the browser window it is   zero away from the top of the browser window the  distance to the right is zero the distance below   is also zero for these properties we have a more  concise way of writing inset the inset values are   top right bottom and left replace the values above  if you don't need any values set them to Auto the   content inside will be divided into three rows  the first and third rows are 70px the rest will be   the middle row next is the H1 tag give it padding  margin and reduce the font weight to 300 for Row   three use grid to divide columns I will divide it  into two equal columns for each button I set the   background color to Yellow delete the Border use  Poppins font font thickness is 500 and animate the   cursor with cursor pointer however with the first  button I'll give it a white background to make a difference now in list cart I will add  the product to the cart each product will   correspond to an item class inside each item will  include information such such as image name total   price and quantity next to the quantity there  will be two navigation buttons to change the quantity and that is the content of each item  in the cart we go through CSS to design it   we are approaching the final stages of design  before working with JavaScript for each image   in the items I will give it width 100% of  the allowed range as for the item class to   divide columns I will use grid I will divide  it into four Columns of initial size 70 PX 150   PX 50 PX and the rest is from the fourth  column the distance between columns is 10 PX with span tags inside the quantity class I gave it display inline block so I can  adjust the size but still stay in the same row   with width and height 25 PX white background  black text border radius to create a circle   and cursor pointer to create effects when  hovering the mouse however with the second   span tag which contains the number I will give  it a transparent background color and white   text to differentiate now we will think about  the problems that can be detected for example   what if there is more than one product in the Box  now I will try adding more products to the card   now the remaining list looks simple and without  division so I will add the CSS code when there   are many items items with even positions will be  distinguished by different colored backgrounds   it already looks better now I continue to add  more items at this point the checkout buttons   have disappeared because the item class list  is too long to fix it the list cart class is   where the list of items is stored if there are  to many items list cart will generate a scroll   bar to preserve the original size using overflow  Auto and as you can see the frame has not changed   at this point if you want to hide the scroll  bar go to webkit scroll bar for width with a   value of zero the last thing we do is check  the conditions when does the shopping cart   window appear when does it hide when I initially  access the website it clearly did not appear so   with class cart tab but by default I will assign  the right value to it minus 400px at this point   it is on the right side of the screen and we  cannot see it when the body is added a class   named show cart then I will set the right value  of cart tab back to zero to display it on the screen in addition to the container  class which contains all web content   when the cart tab appears I will  move it to the left with transform   to create a smoother motion effect  set movement time with transition 0.5 seconds now it's time for JavaScript the first  thing is to catch the event to hide and show   the shopping cart window we will recall the  objects in the HTML we will be working with   first the shopping cart window will appear  when you click on the shopping cart icon so   I will call it back first next for the  shopping cart window to appear we must   add the class show cart to the body this  means we will have to work with the body   now when the system detects that the user  has just clicked on the cart icon it will   run a function in this function it will call  the body and pass in a class named show cart   with the toggle function it will check if the body  does not have a class named show cart it will add it Opposite if it already has a show  cart class it will will delete it this   creates a continuous opening and closing  effect additionally when the user clicks   on the close button the shopping  cart window must also be hidden so   I'll call it back here also listen for  Mouse click events and run a similar function so we have solved the first two problems which  is hiding the shopping cart window now we will   start adding products to the cart first of  all we need to prepare product data I will   create a Json file named products to contain  product information the structure of a product   table will basically include the following  information ID name price and image note that   the it of each product is unique and cannot  overlap now let's write the data to the Json file now use JavaScript to get product  data from Jon file by default I will   create an empty list product  array when the Javascript file is loaded it will proceed to run the  first init app function in this   function I use fetch to get product  data to assign it to the list product variable I will log it to see if I have received  it and it's received there are eight products here however if you have an error it's likely  because you're accessing your project using the   dries path when you use fetch to get Json data  it will not accept this path it only accepts   valid HTTP website links you can easily create  a virtual HTTP domain using the visual studio   code application in the extension section  find the live server extension and install it after installing the song Return  to the index file you will see a go   live button please click on it  it will create an HTTP domain   for you to work with and with it the  JavaScript fetch function will work fine after getting the data then I will call a function  add data to HTML to display the data on the screen with list product HTML as the  class list product I will check if   product quantity is greater than zero  then use for each to retrieve each product for each loop I create  a component with the class item   and with the same content as the content  inside the item class that I did in the HTML then inject this new element into the  list product class with a pen child don't   forget to change the image price and name  information according to the correspond in product so it appeared on the screen the  next thing is to catch the event when the   user clicks on the add to cart button it will  process the add to cart when the user clicks   anywhere within the scope of the list product  class we all run a function with event Target   being the location where the user just clicked  if that location has class ad cart that is the   user has just clicked on the add to car  button then I will continue to process it it worked we have captured the event of the user  clicking on the button but I don't know which   products need to be processed remember that  each product has its own ID so when creating   these item classes I will pass into it a  data set it that is the it of that product the displayed result will look like  this this information is recorded   in the item class but the button is in  the item class so I will call the item   class from the button's position using  parent element then get the data set it information after you have the product did then  I will pass it into a function called   add to cart by default there will be a  variable cart to store the cart value   a little later I will put the shopping  cart list on HTML through the list cart class in addition the span tag containing the   the total number of products in the  shopping cart will also need to be updated so what information will a  shopping cart array need the first   is product underscore ID to know which product  the card is associated with second is quantity   in addition we will not need any additional  information because information such as images   prices and product names are already in the  product table when we need this information   we just need to look at each contact to see  which product has the same it as the product   it of the shopping cart if the current  shopping cart list is empty then the job   will be very simple the main shopping  cart is by product it and quantity is one if there is already data in the shopping cart  then we will have two cases that is whether this   product is already in the cart or not to check if  this product is already in the cart we will use   find index to find its position in the cart  if not found it will return the value minus one so we will check if this product is  not in the cart the search position is   less than zero then we just need to use  push to add this product ID to the end of   the cart variable array but on the contrary  if it already exists so this time we won't   add half instead we increase the product at the  position we just found in the shopping cart by one I will check it out I add the first  product second product so if I add a   product that's already in the cart so this  time it won't add half but it increases the quantity next we will display the shopping  cart on the screen with the ad cart to HTML function if the number of products in  the shopping cart is greater than zero   use for reach to get the cart list for each  shopping cart I create a component with class item and the content is the  same as the content of a normal item then add it to list cart with a pen child the table we are working with is  cart in the cart there is only product   it and quantity information then with  the quantity we will replace it here   but as for other information such such as  images and product names the cart table   does not have it that information is in the  product table so we will find the location   of the product whose it is equal to the  product it of the cart using the find index function and all information  about that product will be in   the list product whose location you just  found so now I will replace it into the HTML when calculating the total  price it will be equal to   the price of the product multiplied by  the number of products in the shopping cart in addition I also need to update the  total number of products in the shopping cart   here then I create a variable total with value  zero it will then be added up to the product quantity finally display it on the screen next thing we need shopping cart data  to be saved even when the user turns   off the computer so I will proceed to create a  function add cart to memory to handle saving to memory with the set item function I will save  the value of the shopping cart to local storage however local storage does not  allow storing values as arrays   so I will convert the card array into Jason to save now every time a user visits the website  after getting the product information I will   continue to check the card information in memory  if it exists then our cart variable is equal to   the cart data in memory remember when we saved  to memory we converted the array to Json so now   if you want to use it you have to convert  from Json to an array with the Json parse function then run the function add  cart to HTML to put the data on the screen I just refresh refreshed the page  and the data in the shopping cart did not   disappear next when we click on the two  Arrow buttons the number of products in   the cart will change so I will catch the  event when the user clicks on the list cart with the event Target being the location  where the user just clicked if that location   has a class of minle or plus it means they just  click the arrow only then will we continue to   process it the first thing we need to determine is  which product ID will be passed in to change the   quantity it's the same as adding products to the  cart for each item in the shopping cart I create   an ID data set with the corresponding product  underscore ID value and this is how it appears on   the screen so stand at the arrow button position  how will we get this information this arrow button   is located inside the BTN class and class BTN is  in class item that is it is located inside two layers so to query information I have  to call parent element twice to get data   set it information next is whether to add or  decrease the amount I created a type variable   with the default value minus but if the button  clicked as a plus button then the type will be plus then I call the function change quantity first we need to find the position  of that product in the shopping cart with find index next if type has value of plus we just  need to add the quantity to the product at   that position but if it is minus then we  need to check to see what the result is   after subtracting one if it's greater than  zero we just subtract as usual but what if   the quantity is now zero then we will have to  delete that product from the cart with the splice function then run the add cart memory function  again so that it updates the latest data into   memory at the same time run the ad cart to  HTML function to refresh the data on the screen now let's look at the function  of adding products to the cart I add   the products I want click the arrow icon  to change the quantity when the quantity   is less than or equal to zero the product  will be removed from the cart and even when   I refresh the page the latest shopping cart  data is still here in terms of function we   have already done it however let me test  to see if this design works on different   screens on the iPad screen I want the  number of product columns to be only three on mobile screens it will be two  columns so our exercise is complete if   you have any questions or encounter any  difficulties don't hesitate to leave a   comment I will help you answer if you  find it interesting don't forget to   subscribe to my support Channel thank you  very much see you again in the next video

Channel: Lun Dev

Views: 200,747

Keywords: How To Add To Cart Shopping using HTML CSS and Javascript, Add To Cart Shopping using HTML CSS and Javascript, Shopping Cart using HTML CSS and Javascript, shopping cart, shopping cart javascript, shopping cart js, shopping cart html css, how can shopping cart javascript, javascript, create shopping cart using javascript, make shopping cart javascript, css, design shopping cart, create shopping cart, add cart using javascript, create shopping cart with js, shopping cart using js

Id: gXWohFYrI0M

Length: 29min 48sec (1788 seconds)

Published: Mon Oct 16 2023