Build e-Commerce Website with React and Ant Design | Simple e-Commerce Website in React JS

hello guys welcome back in this video tutorial we will learn how to create a sample eCommerce website in which we will be adding a top header that contains a menu which contains different categories and on selection of those categories we will be fetching the items based on that and in each product card we will be showing the product name how much is the discount on that what was the actual price what is the discounted price and the product image where we can zoom in and rotate the image to see the details in preview and also we will showing some details of the product the rating and add record button and once it's added we show a success message and also we can sort the items based on different options like alphabetically or based on the price and then ultimately view the cart and we show whatever the items user has added and their quantity and user can change their quantity on the go and we will present the total here and then the grand total at the bottom and then the option to check out the card and then user can add their details like full name email address so once all of these details has been added then user can confirm the order and we show that your order has been placed successfully right so let's get started I have an empty react.js project that is using latest version of and design 5.0 at the time of creating this video and right now it's showing nothing so let's go ahead and start adding different components to create the website so let's start from the top header and for that we can create some custom components like we can create a app header and here we can return uh let's start from returning a div and we can say it's a header and similarly we can create the component called the footer and inside that we can call it footer and also between the header and the footer we can create a component that we can call uh page content so we can paste it and we can say page content and here we can say page content right and inside the div let's add a app header then we can create a the page content and then uh after the page content we can add a app footer let's call this the footer okay here you go the header page content and the footer let's add The Styling so we can add a class name here and we can say this is an app and here we can also add a class name and we can call it a header and here we can add a class name and call it a footer and here we can add a class name we can call Page content let's call them the same app header because the computer name is app header and we can call this uh app footer save it and let's go to the app.css and add here the CSS and first one is the app one and inside that we we can say its display is flex and we can say the flex Direction is column and its width is the 100 VW the whole width and its height is 100 VH right and for the app header we can say its height is maybe 60 pixels and if I save it and also import that the app.css here there you go it has added height of 60 pixels and let's add the other ones as well the footer and same we can say the height is again 60 pixels and let's give it a background color of maybe black save it there you go and insert that there will be the page content and here we can say its displays again flex and its Flex is one so it will be covering all of the available space between these and we can say it's overflow Y is auto so we will be adding content here and when it is overflown it will be scrolling right and inside the app header we can start adding our menu so instead of writing them in the the same app.js class let's create a component folder under the source and start moving these components inside that so we can create a components folder and insert that we can say a header and again under the components we can call footer and then again under the components we can call a page content okay so again in each of these we can create an index files and same goes for the header and same goes for the page content right and let's move uh all of these one by one so this is the app header cut it from here and put it inside the header and we can export default app header from here save it and also cut it the footer as well and put that inside the footer folder and again we can say export default a footer save it and then the last one page content cut it from here and paste it here and you can again export default page content save it and then go to the app.js and import all of these here or we can just give it like this way import it and import it okay it's again the same right so let's go to the app header and here inside the header we can add a menu that's again from the end design and we can add uh items that will be an array of objectives where we will be providing the label and the key and here we can say maybe the home and a unique key is home if I save it here you go it has added the home let's copy this one and add few more we can say the main men and women right and we can add another one maybe we can call it accessories and same goes here right save it let's change its mode from vertical to horizontal here you go it has added our menu right so maybe instead of this home we can render the an icon we can call home field that is again from the and design icons right save it here you've got looks nice okay so let's add uh some children under each of these so for the men we will be creating the children of this menu and it will be an array of objects and each video we will be creating the label as well as the key right so let me clear the children under the men and women so I have added the children under the men those are mentions men's shoes and men's watches and again for the women women dresses women shoes women watches and bags and majorities and also have updated the label from the accessory to the fragrances so this is how it look like men's shirts women and fragrances right so let's add roles based on these menus so for routes we can use the reactor down so that will be npm install director Dom so let's install that and meanwhile it's installing uh we can create some components again inside the components uh we can call our roads and inside that we can add an index.js file and here we can create a function we can say roads and here we will be returning uh roads maybe we can call it a approach because routes also are compared from the electro2 down so we can import that from Rex rotor Dom we can import the roads and also a single route as well and here we can return the roads and insert that we can say our road and we can give it a path we can say if it is a only the slash so what element to render so maybe here we can render uh the home you can see and when the pass is something else we can render uh the other components maybe we can say when we have settled some of these categories we can render a category page maybe we can say category page right and here we can get the category ID right and let's create both of these home and the category pages so we can under the source we can create a folder can call pages and we can under that we can create a home and also under the pages we can create a category folder and add the index.js file in both of these okay and let's create a function insert that and we can call it a home and we can export default home and here we can return uh Dave you can see home and inside the category let's copy this one and paste it in the category you can see category and here we can see okay right and again here we can say category right and in the page content where we are saying the page content here will be returning the routes without approach right and those are let's import those first you can say import app nodes from the under the roads okay so if I save this one and save the approach as well so you can export default approach and also we can save this category file and this home file right and if you go to the routes again and import this home as the category so that will be import I will maybe we can just leave it like this way home and also the category under the pages category right it is auto imported save it so there should be an error let's go to the console and see what is it is so uh to use the routes we need to encapsulate all of our components under the browser Road so here the app we can say browser router and here you go the browser rotor is again from the reactor Dom so we have to encapsulate all of these the components where we have using the routes under the browser router right so here you go so the home and then in other cases it should go to the category so for that we can again go to the the header and here we can implement the on click function on the menu we can say on click is we can say on menu click copy this one and we can create this function and when you click and we can give it an item and here we can say it will be pushing to that road so here we can import the use navigate from reactor to Dom so we can say use navigate hook and let's create that hook here we can see constant Navy gate is equal to use navigate and here we can say navigate and we will providing to where we want to navigate and here we can get the key from each of these so maybe for the home we can just uh keep it empty and here we can say navigate to this one the Slash and then what is the atom dot key so in in case of home the atom key will be empty so it will be navigated into the just the Slash and in case of others it will be navigated into manager main shoes and so on so forth right so it will be in the dollars okay save it and now if I go to the main shirt it's going man shot and category is shown and if you go to the shoes women shoes and fragrances right and go to the home it is renting the home right so for showing the different products on different pages we will be using the data provided by the demigition and we will be calling their different apis to get different products a single product and then we will be calling the apis to get to add the products into the cart and fetching the cart Etc so let's go ahead and add a component that will be showing our list of products so we can go to the components and create a folder we can call products and add index.js file insert that and create a function and we can call it uh products and Export it so products right and also for making these API calls we can create a folder we can call Api and inside that we can call in index.js file and here we will be adding all of our apis like for fetching different products we can say export export cost get all products and and inside that we will be adding this API call copy this one and paste it here and instead of just consoling we will be returning whatever is returned from here and if I can show you the output it will give us a list of products that will contain different type of data so that will contain the title description the price of that product and what is the percentage discount and the rating and then the thumbnail and some images right so this is the API call that we will be making and under the products we can use a use effect so we will be making an APA call at the very start and here we can see get all products again from the API and once those are received we will be receiving in the res and here we can update our state we can create a state we can say use straight snippet and we can see items but for it will be an empty and you state okay and here we can say set items is equal to Z dot it will be under under the products so we can copy this one and here you go and here we can return uh we can see items for the time being and we can render these products under our components of home and the category and if we go to the category page and here instead of this category we can Center the products and save it and if I go to the manager it's showing items right let's go to the products and instead of this only the items we can give it a list and again from the end design and inside that we can provide the data source we can say that so this is the products sorry the items and we can add our render item and it will be given a single we can say product and also the index and we can return here maybe we can return a card again from the end design and here we can give it a title and it will be equal to the product dot title that is available in each product right and also we can give it a key is equal to index save it here you go it has rendered different products right okay so let's make this a little bit good so we have added the title we can add a cover as well so here we can render the image again from the end design and here we can give it a source so that will be under the item dot thumbnail if you save it under the product okay here you go it has added the images as well right so let's make this full screen so maybe we can show three cards in a row so we can give a grid prop and we can say the columns is three save it here you go it is added the three columns so here you see the images are a little bit of different sizes so we can add a style on the these images and make them consistent so wait we can give it a class name and we can say item card image copy this one and go to the app.css and we can add some styling here we can give a height maybe we can say 150 pixels and also we can give our object fit off maybe you can say scroll down okay make sure it is saved okay if I refresh okay so maybe let's go again to the CSS file and see okay maybe make it uh important okay here you go so it has added the images in all of these and we can preview them as well and we can zoom in and we can rotate them right zoom out okay looks good so let's add different other items inside the cart so we can go to the product and inside the card we can say card dot meta and here we can add a title and inside title maybe we can show the price so here we can give it our let's say typography Dot paragraph and here we can say the product dot price if I save it there you go it has shown the price and here we can show the dollar sign as well okay maybe we can say the price as well okay and also we can show the full price and for that maybe we can add another you can say typography dot text and insert that we can see the product Dot that is the it's a discounted percentage okay and so let's give it a little spacing and we can say okay so this is the actually uh the discount percentage so to create uh what was the actual price we can do a little math we can say product dot price plus what was the product of price multiplied by discount and divided by 100 and if I save it there you go so originate was 1442 and now it's this way so we can run this one as well see Parts float and go to the very end and then we can say to fixed and maybe two right so original it was of this price I know it's this right so also we can give a style of delete so strikethrough and maybe we can give it a type of danger so it's in red right here you go so it has added the price previously it was of this price but now it's not this price we can add a dollar sign as well so here we can add a dollar here you go right and also we can add a little description underneath that so here we can say description and it will be again for the product dot description save it here you go it has added the description as well okay so here you see uh some of the cards are smaller in size and some of the in larger so it's due to this description so we can add maybe ellipses at the end of the second line we can say and for that we can instead of this one we can say it's uh again not typography dot paragraph sorry dot paragraph and cut it from here okay and this one okay and here we can say it's an ellipsis and here we can see the number of rows is two and it's expandable is also true and the symbol we will be using uh for the expandable is we can say the more maybe just small more okay here you go so histor ellipses and if you click on the move it will then show the content right so if I refresh as you go so all of these cards are of equal size now right also we can add a little padding between these as well so for that we can add a class name to the card and here we can see the class name item card let's copy this one and save it and go to the app.css and here we can see the item card and we can give it a margin maybe of 8 pixels save it here you go it has added the margin right looks good and also we can add uh the percentage badge over here how much uh the sale or the discount is going on on that product so for that we can again go to the products and we can wrap this card under a badge we can say badge dot ribbon got it from here and encapsulate the card under that and for this one the text will be you can see the product Dot dot discounted percentage save it there you go it has added you can change this the color of this one as well maybe we can say the color is pink okay looks good and we can add a little padding for this one as well so maybe we can add the the class and we can see item card badge and copy this one and go to the CSS and we will be doing the same for this one as well here you go so looks good the items are looking good we can add a rating of this item and also we can add a button for add to cart so again go to the the products list and inside the card inside the card we can see the actions it's again in an array and we can give the first element we can give a rate and here we can the value we can give it uh we can say the product dot rating if I save it here you go it is at the rating and because this rating can go in points as well so we can allow the half and now if I go to this so it is again 4.5 and 4. so you see I can even it looks like that I can change that as well so we can make it disabled so that it's on the read only okay so now if I go it's not changeable right 4.544 and again 4.5 right and we can add a button of add to cart as well so here we can say the button you can say add to cart and here we can see its type is uh maybe link save it here you go I took out right and we can add a on click function on that and we can add this item into the cart so let's go ahead and maybe we can create a simple component based on this add record button so maybe at the bottom we can say a little function we can say add to cart button and here we can return the same button we have added here okay cut it from here and we can say add to cart button here and we can return the same so this comma is extra okay it's again the same right and we can add our own click function here we can say it's in add to add product to cart and copy this one and we can create this function add to cart and here we will be calling our API function so we can go to the API and create a function we can say export cost at to cart and it will be giving the ID of the item or the product we want to add it to the cart so let's go to the apis and for adding a cart so let's see the API add a new cart so copy this one and we can paste it here and here for this ID we can add so it's a postcard and in the body we need to provide the number of items we are on the products we are going to add into the cart so at a time we will be adding only one item so we will be providing its ID and let's keep this one and remove controlling this one as well and just return it save it and add to cart let's copy this one and here we will call calling it to cart and we will be providing the product ID here right and then after it is done we can just say and we can just post a message we can see message Dot it says and here we can maybe say the item name as well maybe we can pass the item name as well as the ID here and maybe we can just pass the item here and here we can see item dot ID and here we can see the item Dot title has been added to cart right and we're going to call this one and here we need to pass this item here as well so we can say the item is equal to the product right so let's save it and go to the UI and if I click on add to cart says that this has been added and if I go to some other this entry while has been added to the cart right so while it's making the apical we can show some loading here as well so let's go ahead and add a State you can say loading by default it's false and when we're making the pickle we can see set loading sorry set loading as true and once we are done we can say set loading is false right and for this button we can say loading is equal to the Loading variable from the state right so save it and good here you go it has shown a simple loading right and once it's done it shows that it has been added to the cart right so right now you see that we are showing all of the atoms in all of these categories even though I'm on different categories or different pages so let's fetch all of these products based on the category user I selected so let's go to the API and instead of this get all products we can write a function we can say export cost get products by Katy goody and we can pass the category here and go to the apis and you can say get product of a category here you go so broader category and if it is under the smartphone it will give all the products based on that so let's copy this one and go to the apis and return this way and remove this console and we can pass this category here uh instead of this Smartphone we will be providing whatever the category user has provided and if I save it and go to the products so instead of fetching uh all of we can fetch the category based on the path so here we can say get category and we can fetch the category uh from from the from the pot so for that we can use the use pattern Hook from director to Dom so we can say import use param from Rex rotor Dom so use params and here we can see const pattern is equal to use pattern and copy this one and we can say here param dot okay the Gory ID so this this will be so this will be the one that we have provided inside the roads so here one category ID copy this one and you can paste it here right so if I save it and this will be the manager and if I go to the men's shoes so it's not updating so because we have only fetching only one so we can say as soon as the param changes so this param uh here changes we need to fetch it again so save it and now if I change to watches so it's shown the watches right and review them and if you go to the web addresses as you go and if you go to the watches as you go the jewelry and if I go to the fragrances and you go and if you want to show us a spinner while it's fetching different categories we can do that as well so for that we can say you state and we can say loading and but for it's false and here we can say set loading is true and once we are done we can say set loading as far as and here we can say if we are loading then return the spin and it's spinning is true otherwise return the list if I save it okay so if I change this one there you go it has shown a spinner and then show what has been changed right and if I go to the home so home is uh not showing anything we can show the same categories in case of home as well so in case of home we do not have any category and instead we need to call the other function so here we can say if the parent dot category ID exist then you can do this one uh otherwise just call the all products copy this one and do this and then we can do the then see so what we are doing is here is so either we will be calling the get product by category or we will carry all of the products right and once it's done then we will be resolving it the same way right so save it and inside the home we have not added I guess the products so if I go to the home so maybe we can just go to the roads and here instead of the home you can just in this case also we can show the categories right save it here you go so once we are under the home it will show the products of all categories but once we are under any specific category it will show the products later to only that category right so we have added some of the products into our card so let's show the card maybe here so we can go to our header and for the app header we can show the menu and then after that maybe we can show the store name so maybe we can say typography dot title and here we can say maybe Amir store save it so it has shown somewhere here you can add some styling to the after CSS and in the if header we can say it's displays flex and you can say justify content is space between and we can see align atoms is Center save it here you go it has shown some store here we can move this to here and we can go again to the header and after this one we can just show uh the got outlined so it is a shopping cart organ okay here you go maybe you can give it a class name as well and we're gonna say shopping cart icon copy this one and go to the app.css and under this header we can see shopping cart icon and we can give it our fonts size maybe we can say 20 pixels and make it 30. okay looks good and give it a margins right maybe we can say eight pixels okay that's good so maybe you can add a batch on that as well so we can go to the header and here we can add a patch and we can see uh count of you can say seven here you go okay maybe we need to add a little class name to this batch as well you can remove this class from here yep and maybe let's adjust the styling a little bit and instead of this it maybe we can add a 16 looks good and we can show uh different components maybe uh draw on clicking of this icon so maybe we can create a little little component here we can see the app cart and here we can return cut it from here and paste it here and here we can see the app cart save it is still the same right and here we can just give it uh interest inside our div and here we can show our drawer and for this open we can make it open and close based on this button click or the this batch click we can see you state and you can say got there are open and but for its false and once we click on this patch we can see on click is equal to a function and we can say here set card or open to true and here we can say Carter open and on close of that we can see set control open to false save it okay if I click on this one it has you on the drawer and click of this close icon it is Miss it right and and we can make the cursor to appear like a pointer when we are on that we can go to the app.css and here we can see cursor is a pointer save it here you go okay so let's go to the header and in the app card so so you can give it a title we can say your thought and under the content we can fetch the content first and then we can show inside a table or something like that so for the API regarding the card is can go to those so maybe this one yep so we can copy this one go to the API and we can add a function we can say export const get card and here we can return this fetch okay copy this one and go to the header and at the very start you can see use effect and we will be fetching the card then you get caught and once it's received we can say res and let's see how it looks like it's it will be showing the products copy this one and we can see if we can create another state variable we can say you state got items and by default it's empty and here we can say set got items to the rest Dot products right there okay and under the draw uh we can show a table and we can say table and we can give the columns it will array of objects where we can provide the title and data index and it will begin the title so let's copy this one and add few more columns okay so the other columns are one is title then price quantity and total okay the title then the price uh the price then the quantity and then the total if I save it and show the card here you go title price quantity and total okay and then give his uh data source we can see the code items save it there you go it has shown all of these items and because this is the price this is the price we can render uh dollar sign for this as well so here we can render the value as we can say return uh simple span and inside that we can say the value with the uh dollar sign right so we can copy this one found the price we can add in the totals as well okay it's showing the dollar sign right and for this quantity if you want to change that we can render it's something different so maybe here we can send that as the input number so use again change that and its default value is the value we have received here save it here you go also we can give it a little style so that it does not go away so we can add a Content wrapper style and that we can give it a width Maybe 600 pixels looks good or maybe 500 would be enough okay nice and in the table we can remove this pagination we can say pigeonation is false and we can add a we can say the summary or the total of whatever is for this one so for that we can give it a summary and it will give us the data and and here we can uh return any span or something so first we will be calculating the total so it will be data dot reduce and it will be giving us the previous value and then the current value and and by default it will be starting from the zero and here we will be returning the previous Plus current dot total right and we can say Thomas total is equal this one and we can return a little span we can say total and then we can say the total right save it there you go totally this one and here we can decrease or increase these values as well so we can even go to the minus so let's fix that so here the input number we can say the Min is equal to 0 so user cannot go to into minus so if I know going to balance it it will not allow and we can change to any of these values right and while I'm changing these values we need to change the total accordingly so we can do that calculations as well so we can say on change of this number it will be giving us the value and here we can say that the card items dot map over that and for each for each card so we will be it will be giving us the record as well so we will be seeing that if the record Dot ID is equal to equal to cart dot ID and here we can say that got dot total is equal to got dot price multiplied by the value user has entered right and here we will be returning the updated card and and we will be updating our data source as well based on our previous value and here we can say instead of mapping over the court items we can map over the previous values and update our code accordingly so if I save it and now if I change these values so it will be changing beautifully so it getting two so right now it's 40 Cross 2 is 80 and if it make the 3 120 1 0 right so it's updating and also this value is also updating accordingly right okay so this was our code so we can add a button here we can say check out your card so under the table we can say a button and that should say check out your card and maybe we can make this type of primary if I save it here you go check out your card and on click of that maybe we can get some information from the user maybe the first name last name email address and then confirm order right so we can do that on multiple ways we can move the user to the different page or we can show a model here or maybe we can show another uh draw here as well so that user is still on this page so we can add another drawer so here we can say draw and it's open is based on another state variable so that we can say you state and that is uh checkout there are open in word for its files and on click of this checkout button here and on click of this one we can say search code draw open to true and we can see checkout.open and on close is equal to set checkout draw open as false right if I save it and show this one and check out this one it has shown right so we can add some content inside that you can see uh form from end design and we can add some form items again from the and design so we can add an input maybe and we can say placeholder is enter your full name and here we can say label as full name and name is also as a full name right and we can add a title to this Rod as well we can see confirm order right and we can add some more items so we can say email you can say your email enter your email right and then we can say copy this one and address and here we can see your address and we can say enter your address right and at the end we can add a button we can say confirm order and give it a type of primary and HTML type of submit right and if I save it and show the checkout as you go the full name email and address and then the confirm order we can make this the required Fields as well so we can add a little rules it will be an array of chairs we can see required is true and if user has not entered in full name we can give it them a message we can say please enter your name or full name we can add these rules on the other atoms as well so it has added a little star here so for this one and it's required to and also it has a type of email you can say please enter uh wallet email in case user does not entered or user has entered a invalid email it will it will show this message in both cases and also for the address you can say please enter your address we have made all of this as required right so now if you confirm say please enter your full name valid email address and if you enter anything here and if I entered anything here and it's not email that is it still say that please enter valid email and if looks like a good email it will garnish and you can enter address here and then uh we can go to the confirm order and for that this function on finish will be called and we can see on confirm order you can copy this one and create this function let's say const on confirm order and we will be getting the all of the values user has entered let's say console.log those values right and if I go to the console and see whatever is in there confirm order so we have all the values full name the name and then the address right so here we can make another API call to our server so we are we will be providing all of this information that user has selected or entered here and also we can show some payment information here as well so maybe for now we can go with uh you can say the question delivery option and we can add uh other options like the credit card Etc using the stripe or something so here we can say the form Dot item and we can say insert that we can say uh check box and here we can see cash on delivery and save it here you go location review right and maybe you can show something here more methods are coming soon so maybe here we can say typography dot paragraph and we can say more methods coming soon and you can give it a type of maybe secondary save it there you go it's saying more messages coming soon right and uh by default we can make this cash on delivery as checked check out by default check right and maybe we can make this as as the disabled so that it's bad for checked and user cannot uh make this unchecked because we are only uh allowing the question delivery option right so user had to enter these values and Casual delivery has already selected and more match requirements soon confirm and don't confirm we will be hiding this one this one and go to back so let's write that as well so here on the on confirm order we will be saying set cut open as false and you can say set checkout.open also as false right and also you can show a message of success you can say your order has been please successfully save it and if I enter the values here you can say Amir I'm here at gmail .com and you can give it address Google has been placed successfully right so that that was the card so we can add some content in the footer as well so let's go ahead and go to the footer and add some content there and here we can say under our typography and Dot maybe link and we can say privacy policy and it's a link we can give it a href maybe we can say https and it's a google.com and give it a target of blank so it opens in a new tab so copy this one and add few more you can see it's a privacy PC it's uh terms and conditions and also we can say some return policy and maybe we can add our phone number as well we can say plus one two three four five six seven eight nine and instead of this one uh if we can give it href like tell off plus one two three right the same we have uh shown here and if I save it here you go so we can add a little styling to a footer so for that we can go to the after CSS and go to the footer and here we can see it's it's display is flex and justify content as space evenly save it and also we can say align atom to Center there you go looks good you know if I click any of these it goes to the google.com and if I click on this one it says that uh who you want to call it right and also we can add some styling uh over here as well so we can add a little shadow on the header we can see and this app header we can see the box shadow you can see maybe one pixel and four pixel 4 pixel and we can give a color of zero zero zero and save it there you go so maybe change it to a a no uh 33 it's good okay and also for this content we can give a little margin from the top we can see 10 top is maybe two pixels and now if I scroll here you go now it looks good maybe this one is too much let's see what two pixel and also this one two pixel okay and also we can uh remove this we can see this line as well if it looks odd so for that we can go to the header and go to the menu and give it a class we can say app menu and copy this one and go to the app.css and you can add a app menu and we can say borders none if I save it you go so there's no border right and also on some of the e-commerce websites there are some sorting options as well so sort alphabetically or sort by price we can add that as well so we can go to the products and here before the list we can add a div and insert that we can say select and give it a options so is that started okay and give that options and we can say uh label of you can say alphabetically A to Z and value of we can say easy and let's copy this one and add few more you can see this is uh z2a and this is price low to Pi and it will be za and here we can say low high and we can say I I look and we can see price High to low right if I save it and here you go it has shown now alphabetically then the price alphabetically price right and we can add a little label there as well so here we can say uh typography Dot text and we can say View items sorted by you go view item sorted by and we can give it uh maybe uh default value of A to Z save it here you go so we can give a little padding of the container so here we can say the class name and here we can see products container copy this one and go to the app.css and we can add a products container and give it up pattern may be 8 pixels and products there you go it has added a little padding right and based on the instruction we can do our sorting so we can say on change and it will be giving us the value and we can say we can create a State variable to keep the track of the selected sorting order so we can say use state you can say sort order and by far we can say A to Z and once it's changing we can say set sort order to the value user has chosen and also we can create a function here we can say don't get sorted items and here we can sort our items based on the selected order so we can say const ant sorted items is equal to whatever we have the in the items list and then we can say sorted items Dot sort and it would be giving us a and b and here we can say if if the sort order the the sort order is equal to equal to AC then return you can say a DOT title is greater than b dot title then return one and otherwise check it again and if it's equal to then we can return 0 otherwise return -1 right and let's copy this one and go for the other options as well so we can see else if and else if and else if easy then if it is a Za uh it's a high low or okay you can say low high and then the high low because we are showing uh the high low at the variant right okay so in this case it will be less than and in this case it will be the price so let's copy this one place here here and here and it will be the opposite and here as well right so it should be low high high low so this will be capital and this will be also capital okay so it will be given the sorted items and here we can return the sorted items right and we can where we are providing the data source we can say the sorted items written those right okay the function name is something else get sorted items copy this one here you go okay so bad for A to Z and if I change to Z to A and if I change to price low to high 10 23 and 35 and going high and from high to low C6 and then decreasing right I guess this pillow is not correct we can go there it's high height and one thing you notice that if I made this alphabetically so here you go the H is coming after them so that is because uh we are not seeing its uh the case insensitive so while we are doing this one we can say uh get the title uh in in lowercase before matching it so so here we can say const a low case title is equal to a DOT title Dot to load case and also we can do the same for the B so B lowercase and B dot work is right so where we are using the Ada title we can replace this to a DOT lowercase and here as well here as well and same goes for the B I have created the cost before that because we are using one multiple times so we do not create the lower case uh everywhere okay save it and here you go so now it should be fine and if I go to ca and if I go to AC looks good and if you go to the price okay and if I go to the price high too low it looks good and here you see uh if I selected anything here I2 low and move to different category it again changes to A to Z we can keep that on all of the pages as well based on the user selection so for that we can go to the products and where we are showing inside the list here we can show The Loading and we can see it's based on the loading and instead of this loading uh we can show the loading inside that so if I save it so now if I change to shoes it is high to low fragrances high to low it's mentions high to low right and also for this value we can show what this value mean it's actually a discount percentage so we can go to the products list and where we are showing the ribbon and here we can show that it's uh dollars and it's actually the percentage of if I save it and here you go it has shown it is this much of percentage of right and it has applied to other Pages as well because we are reusing the same component right and also for this card we are showing this 7 batch also it's hard coded we can show that based on the cart items code so for that we can go to the header and where we are showing the badge the number seven instead of that we can say that it's equal to the the cart item start length and if I save it here you go so instead of the seven nodes 5 so if I click on that so we can count one two three four five five items in that right so if I refresh it's again five right so we are fetching always from our server right so that's it on exploring or creating a sample e-commerce website but still if you have any questions please let me know in the comments below and if you have learned something in this video please hit like subscribe to my channel see you in the next video thank you

Channel: CodeWithAamir

Views: 24,608

Keywords: reactjs, ant design ui, antd react tutorial, ecommerce react website, build ecommerce website with react, ecommerce website in react, building an ecommerce website with react, ecommerce website using reactjs, ecommerce website react, Build e-Commerce Website with React and Ant Design, Simple e-Commerce Website in React JS, e commerce website using react js and ant design ui, ant design components website react, codewithaamir, react ant design full project, react ant design full app

Id: maTYhCuHEGw

Length: 82min 39sec (4959 seconds)

Published: Thu Dec 01 2022