hi everybody welcome everyone back to Lon dev's YouTube channel in previous times I once created a project that handles adding products to the shopping cart a project that creates a product detail page many people have been interested and suggested combining these two projects into one and that's the reason for this video at the home page when the user clicks on add to cart the number of products in the shopping cart will immediately be increased click on this icon a window listing products in the shopping cart will appear and fill the web content to the left we can add or remove the number of products in the shopping cart right here opposite when the user clicks on the product instead of the add product to card button the user will be navigating ated to the product detail page here the detailed information of that product is displayed and here people can add this product to the cart when clicking on the add to car button below will be a list of similar products with unified design for list style and of course these add products to car buttons will also work well all data about this shopping cart will be saved in memory even when the user turns off the computer or closes the browser when they visit the website again their shopping cart data will still exist finally this design optimally displays on all browsers all devices with different screen sizes like iPad and mobile if you like good videos don't forget to click like And subscribe to the channel to watch new videos every day before continuing with the code let's analyze the design together so we can write clearer code this is the design on the homepage and product detail page both of these Pages have the same layout includes header and a shopping cart window so obviously we don't need to write it twice I will create a template file to contain commonly used content when accessing the index page I just need to write the right content for that page then I'll move that content into the center of the template file and then it will have a complete product listing page likewise with the details page I just need to create the product details section then we will move this content to the center of the template file so we will have a complete design this way we will not need to rewrite the same content many times and this design will also be easy to expand when you want to create more pages for your website proceed with coding first I created a template file for General use on the pages style file to write CSS and cart JS to handle shopping cart related is issues at template I will call the CSS and CJs files here to use now let's proceed with the code to create a frame for General use it will consist of two main elements container is the place where all website data is stored cart tab is where information about the shopping cart is stored the first component in the container is the website header in the header there will be a title containing a path to navigate users to the homepage and a shopping cart icon to find the vector image of the cart icon I will visit this website search for Icon cart then click it to copy the SVG code and paste it into your website so I have a shopping cart icon below the icon there will be a span tag used to display the number of products in the cart default is zero below the header there will be an ID named content tab this is where we insert detailed content for each page next is the content of cart tab we have one title the list cart class will be the place to contain the list of products in the shopping cart and finally there are two buttons close and checkout and that's all the HTML content for the template file we continue with CSS to complete its design first code the CSS first for valuable elements throughout the page the first is the body which is the element that contains the entire website content margin zero and use Font family Poppins SVG icons on the default website will be 30 pixels in size what about link tags use text decoration none to remove lines under text and we'll use dark colors buttons on the website use cursor pointer to create a hand-shaped effect when the user hovers over the [Music] element in header use display Flex to move child elements inside with the title make the font size very large next will be cart tab the window displays shopping cart information gives a dark background color that really stands out white color the default size when accessing by laptop or iPad is 400 pixels for mobile it is 100% width of that screen use position fix to position it according to the browser window at this point I set the distance from the top right and bottom margins of the browser window to zero pixels display grid to divide rows for Inner Elements divide into three rows the header row and the row containing the buttons have a height of 70 pixels the rest will be devoted to the list cart class which displays the list of products in the cart with H1 title tag for padding 20 pixels margin zero font weight 300 with class BTN contains two buttons use display grid to divide columns and I will divide the two buttons inside into two columns of equal size as for the buttons inside make the background yellow delete the default border font family Poppins and font weight 500 to make a difference for these two buttons the close button will give the background color white list card is where the list of products in the shopping cart is stored use overflow Auto so that in case there are too many products in the cart the design will not break instead it will appear a scroll bar and specify that the scroll bar has size zero however default I want this cart window to be pushed off the screen moved 400 pixels to the right when it is displayed the motion effect will be 0.5 seconds conditions for it to display again on the screen that's when the body has a class named active tab cart then I will set right zero so it appears appears right at this position again at the same time when the cart tab is pushed onto the screen I will deliberately use transform translatex to push the entire content of the container 250 pixels to the left this creates a more impressive effect so that's the principle to open and close the shopping cart window now let's use a short Java Script code to execute it I want when the user clicks on the shopping cart icon the shopping cart window will open and click on the close button to close it all processing related to the shopping cart function will be performed in the cart JS file first I recall the HTML elements I need to work with the card icon close button and body element when the user clicks on the icon card or close button they all run the same function points to body add the active tab cart class to the body if it doesn't exist to open the tab and we delete the active tab cart class if the body already exists to close the tab and it worked instead of trying to check if the active tab cart class already exists to choose whether to add or delete it we just need to use the toggle function and it will check for us and this is also the entire content for the template used for the website now we will proceed to create the homepage where the list of products is displayed for each specific page we will have two files if it is an index page it will be an HTML index and a JS index I will embed the CSS and index.js file here please note that I have embedded the JS Link in a module type note that I won't need to embed cart JS here on any given page both will include two elements with ID the app ID is used to embed the template file Content ID temporary content is used to contain the main content of this page Why did I name it temporary content because this is only a temporary storage location after the page is loaded the content in this element will be moved to the center of the template layout here I create a list product class to display the product list coming to JavaScript first I need to recall the two important IDs declared in the HTML to be able to work with it the app ID is the element that I will used to contain the template file Content ID temporary content is where the content of this page is stored next I proceed to load the content of the template file that I created at the beginning of the video the content inside the fetch function is the path containing the template file convert to text format with HTML being the content of the template file we have obtained I will embed the content of that template file into the element with the It app and it worked the template file content has been displayed on the index page however if you get to this step your code code won't work press the f112 button on the keyboard a programming window will appear click the console tab if it shows an error related to cores policy the reason is because you are running your project using the dis Drive in your computer the fetch function will not accept paths like this a valid path is one that has specific domain names or IP addresses there are many ways we can create virtual addresses on personal computers to work the simplest and fastest way I would like to suggest is to use the visual studio code application to write code in this software go to the extension section find the extension live server proceed to install it after installing song at the HTML index file click the go live button it will create an IP address for us to be able to run the website after being able to run the project with the live server let's continue with the JS work content tab is the ID located in the center of the template file I will push the data on the current page to the center of that template then the content in temporary content will be deleted so we have finished embedding the template file into another page however when I clicked on the shopping cart icon the shopping cart window did not appear That's because I haven't embedded the CJs file content to be able to do this first in CJs I wrap its entire contents into a variable called cart and Export toall it now anywhere when I want to embed cart JS content I just need to import cart with from as the path containing the cart JS file the content of the cart JS file will start working after the template file is embedded and it worked I then proceed to run an init app function if the cart function is used to perform functions related to the shopping cart the init app function will be used to perform functions related to the current page and the function of this page is to display product lists to do that we need to have data about the product so I will proceed to create a products JS file to contain product data create an array of the same name and Export it by default this array will include many objects each object will correspond to a product some information related to the product such as ID name price description image its content is the link containing the image of the corresponding product likewise I will create more products replace name price and image information for differences note that when you create products with the same information it will still work except in the case of the ID field you are not allowed to duplicate this field after doing this project you can also rely on this to create more information fields to enrich your project if you want after having data at index.js I get product data by importing it and from as the path containing the product JS file and these are the eight products that I added in the data so now I proceed to add products to the screen the product ID list is where I want to push the data first I delete all the content of this element on the screen then perform a loop to get all the data out for each product in data I create a new element give it a class named item and add this element to list product the content inside this element will include an image with the path written in the image field products name unit price and finally there is a button to add products to the cart after pushing the data to the HTML file then I will go to the style CSS file to design it with product images width 90% use drop shadow to create a shadow effect behind in list product use display grid to divide columns the products inside will be divided into to four equal columns each column is 20 pixels apart give the item a creamy yellow background color padding 20 pixels border radius 20 pixels H2 is the title tag thickness 500 large size with class price letter spacing to create space for numbers small size finally there is the ad cart button dark background color white text delete the default border padding 5 pixels 10 pixels margin top 10 pixels border radius 20 pixels our next job is to handle when the user clicks on the ad cart button then this product will have to be updated to our shopping cart there are many ad cart buttons on the screen how can we distinguish which button was just clicked so at that button please pass in a data set ID that is the product ID that was clicked so now each button has its own ID data and remember that all processing events related to the shopping cart all must be written in the cart JS file before continuing to code let's look again at our data we have a products table used to store product information includes all information so we also need to create a data table to contain information about the shopping cart the first field is product uncore it it is the ID of the product added to the cart and the second field is quantity used to store the quantity of that product in the shopping cart many of you will think that we will need to save additional information about the name and price of the product here but in reality there is no need because that information is already available in the products table when we want to get it from the cart table just rely on productor ID to find a product with an ID equal to that product uncore it so at CJs first I call back the products table I create an array cart to contain the list of products in the shopping cart default is empty when the system listens for Mouse click events I will proceed to run a function with event Target being the element that was clicked on product it is the it value in the transmitted data set the default quantity is null position is the position of this product in the shopping cart if in case this product already exists in the cart then the value of position will be greater than or equal to zero in case this product is not in the cart then the initial value will be zero opposite we will get the quantity of this product from the calculated position if the button the user just clicked has a class named ad cart I will add one to quantity then send this information to the set product in cart function to perform processing in the cart if the number passed is greater than zero there will be two cases one means that product does not exist in the shopping cart that means position is less than zero then we just need to create a new row representing a product in the shopping cart including two Fields passed in product ID and quantity in the second case this product already exists in the shopping cart then we just need to change the quantity of that product in the shopping cart with the new quantity after processing the data we need to run one more function this function will have the function of displaying data in the shopping cart on the screen we will recall the HTML elements we need to work with the first is the list cart class which will display the list the second is total HT ml which displays the number of products in the cart the default quantity is always zero when listing each product in the cart this quantity will be added to the quantities of each product in the cart then paste this new amount into the total HTML it worked before adding data to list HTML I will delete all the old content later for each product in the shopping cart I create a new element and embedded in list HTML it has a class named item the content inside it will include the following an image product name total price and quantity the quantity column will include three span tags middle tag to display value the two outer cards are used to increase or decrease the quantity it is already displayed but this is just hard code remember the cart table only contains information about product ID and quantity the remaining information is in the product table so here we will find the location of the corresponding product in the products table through product underscore Ed after getting the information then we proceed to embed the data into HTML the total amount is equal to the unit price multiplied by the quantity so it's been working fine before further handling related issues I will edit the CSS for this shopping cart interface product image width 100% with each item in the shopping cart use display grid to divide columns I will divide it into four Columns of different sizes the spacing of each column is 10 pixels a line item Center to Center horizontally text align Center to Center the text the quantity class uses Flex to ensure the three span tags are always in the same row each span tag has a width and height of 25 pixels white background black letters border radius 50% and cursor pointer to create a hand-shaped mouse effect when hovering over it particularly for the second span tag there will be a transparent background color and white text if the shopping cart has many products products in the even Position will have a slightly different background color to create emphasis and that that's our design part after being able to add products to the cart I want when the user clicks on the plus or minus button the quantity in the cart can change accordingly remember that when you want to let the system know which product you want to control please pass in the data set with the corresponding product ID and now when the user clicks on it the system will automatically run to this function in this function we continue to check the condition if the button the user just pressed is class plus we just add one to quantity and send this data to the set product in cart function I see that the way to handle plus and add cart is the same so I only need to write them once this time if the button click is ADD card or plus the quantity will add up to one let's try to check whether the plus button is working or not first I add the product to the card then press plus and it worked next will be the event when the user cck clicks the minus button contrast with plus when the user presses minus I will subtract one from quantity and send this data through the function set product in cart Let's test it out now it's already working quantity has decreased but until the quantity equals 1 then it won't be haveed so here in case the quantity is less than or equal to zero I will remove this product from the cart and that's it please check if if it is working properly first I will add a few products to the cart the current quantity is one if you click minus that product will be removed from the cart so it worked however with shopping cart functionality it will be required that shopping cart data be retained even when the user turns off the computer or closes the browser so in function set product in cart where cart data is processed I save shopping cart information to my computer with local storage when a user visits the website I I run an init app function in init app I check if shopping cart data exists in the client if so I will give the value of the cart using that data then run the refresh card HTML function to display it on the screen it's as simple as that now I will try adding the product to the cart then refresh the page to see if it still has data and it's still here even if you turn off the device and then turn it back on the data will still be there these are also the final pieces of code in the cart JS file we have done all the hardest things now I will show everyone how simple and fast it is to create other pages on the homepage when a user wants to access a detail page I will create an HTML detail link with an ID variable that is the ID of the product I want to see details about so it went to another page with an ID value attached now I proceed to create a detail HTML and detail JS file embed module style CSS and detailed JS links here on the homepage we have an app element used to embed the template and a temporary content to write the page content the same goes for all other pages I will continue to write content for it the detail class will contain information about the product the information below is just hardcode when working with JavaScript we will put the actual data for it later list product will be the place to display similar products after writing the hard content I went through CSS to design it to default the detail section will be divided into two columns the left column contains images and the right column contains content the distance between the two columns is 50 pixels align text to the left image size is 100% in class image fill use position relative at this point I create one more virtual element before use position absolute to align the position according to the parent class has width and height of 300 pixels for a before element to work it needs to declare the content attribute background color zindex minus one so that the element is behind the image border radius I will give four random values Center it with left 50% minus 150 pixels 50% from the top margin of the image class coming to the content the name will be very large padding top 40 pixels and margin bottom 10 pixels with price font weight bold font size extra large letter spacing seven pixels margin bottom 20 pixels with buttons white background color delete the Border padding 15 pixels and 20 pixels border radius 20 pixels Poppins font and large font size the SVG icon will have width 15 pixels especially for the second button the background color changes to black white letters use display inline Flex to position child elements the distance between two elements is 20 pixels use box Shadow to create a shadow effect with SVG use Translate Y to move it down to equal the text position now we will use JavaScript to turn this hard information into Dynamic data corresponding to each product first I will embed the products and cart data here the first job is to embed the HTML template into each page we have done this before on the homepage now we just need to copy that code and paste it here init app will be the function used to display product details on this page please note that corresponding to each detailed page we pass here a product ID so first of all I'm going to get the value of that ID using URL search pams Once I have this ID I just need to find its information from the product table provided that any product has an ID that matches the product ID of this page so it has already retrieved the necessary data however what if the past it is a number and there is no corresponding product then if this happens I will redirect the user back to the homepage and it worked now I proceed to embed this content in HTML detail is the parent class that contains the contents of the HTML file I call the child elements inside again to replace the content first change the image address to the image address in the found data similar to name price description when the user clicks this button to be able to add this product to the card is very simple it already has a class named ad card now we just need to pass in a data set ID corresponding to this product so that the system can determine which product we want to add to the cart then everything will immediately work the next thing is the display of similar products is it on the homepage we have coded a piece of JS used to display the product list then we just need to copy that code paste it here and it will work immediately because currently we are putting the same product content inside the detail class the detail class has the rule of dividing it into two columns so I'll move this similar product out of the scope of the detail class so it doesn't divide the column anymore beyond that we're left with a problem it's in the list of similar products there exists a product like the detail product this is not necessary so at the time of listing similar products out I add one condition only take product s with an ID different from the ID of this detailed product and it worked well our last easy job it's about checking whether this design works well on devices other than computers first is the iPad on the homepage I see it's fine however I will edit the list product class to divide the list into three columns instead of four as currently also on the details page I think everything is still very good the list of similar products has also been divided into three column s so now we come to the Mobile screen on the homepage I will divide it into two columns instead of three to make it easier to see go to The Details page everything was almost completely damaged the content in detail will not be divided into two half columns text align line Center to align text to the center initially images are calculated by width but now I will calculate by height the height of the image will be 40% of the device screen height reduce the size of the product name and the size of the two buttons so it's done our designs on mobile and iPad have been edited to be as beautiful and userfriendly as possible and that's the whole point of this video if anyone has any questions don't hesitate to leave a comment and I will answer if it looks good don't forget to like to support us and subscribe to the channel to watch more videos thank you everyone see you again in the next [Music] video