How to build an eCommerce Website using React Redux, GraphQL, Firebase #17 – Cart & Checkout

welcome to the 17th video in this video series on building an ecommerce website using react redux graphql and firebase now in today's video we're going to be working on our cart and checkout page but before we get started let me just give you a preview of what we will have built by the end of this tutorial so as you can see we're rendering all the products a user has in their cart you can see the product thumbnail name quantity price and you can also remove the item by just clicking on this delete you also have the ability to adjust the quantity of a product by clicking on these arrows so i can either increase the quantity of an item or i can reduce it if there is only one in my cart and i try to reduce it it will simply remove it from the cart but if i have a quantity larger than one and try and reduce it it will just reduce it by one and as you can see the cart total will recalculate every single time i either remove an item or i adjust the quantity of an item within my cart now if i'm on the search page and i add a product to my cart i'll be redirected to the cart page and you'll see the cart has updated i can also click on continue shopping to return to the page i was on you can also see that as i adjust the quantity or i add up product to the cart the total number of unique items in the cart i'm displaying in the header adjusts so for example if i add an item this will increase to nine i just want to encourage you guys to check out my official youtube channel that's youtube.com forward slash simpletut to search my other videos and find the official playlist for this series i add all the videos in this series to this playlist and i'll be posting a direct link to it in the description of this video of course i also want to encourage you guys to check out the official github repository for this project i'll be posting another direct link in the description of this video but this is a really easy way for you to compare your code with mine or maybe you just want to clone the entire project but most importantly of all i just want to ask you guys to please like comment and subscribe and don't forget to hit the bell and turn on those notifications during the last video we created our cart state within our redux store this means that users are now able to interact with their cart using the application if i click on one of these add to cart buttons you'll see that we show we display the total number of items in the cart in the header besides your cart link if i click on this link nothing happens because in the previous tutorial we didn't actually create our cart or our cart page that's what we need to do in this tutorial so to do that let's come back over to our text editor and let's go into our pages directory and create our new pages component so i'm going to create a new folder called cart and i'm going to create an index.js file within that and all we need to do here is import react from react we're going to create a functional component so i'm going to say const equals a function and we're just going to return for now an empty div and we need to remember to export this by default so we'll export cart and then finally we just need to create our route itself so at the top of our app.js file we're going to import our new pages component so i'm going to import cart from the pages directory slash cart and we want to come down and create that route so under any one of these routes but i'm going to create and i'm going to duplicate it underneath the product details route we're going to set the path to be slash cart and within the main layout i'm going to render my cart component now that's enough for me to come over to the web browser and test the page but what i'm going to do is i'm going to come over to my header component so i'll go into the components folder and into my header and index.js i'm going to find my your cart link and i'm going to specify the to path to be slash cart now of course i can test this in the browser now but before i do that i want to at least have something on the page to to see so i'm going to be working on a new checkout component in this tutorial so within my components folder i'm going to create another fold another folder called checkout and this is going to house my checkout component we're going to need an index dot js file we're also going to need a style sheet so we'll say styles dot scss and this is going to be another functional component so we're just going to import at the top of the file react we're going to import that from react we also want to import that style sheet so i'm going to import styles dot scss and then i'm going to be able to just create the component so i'll say const checkout equals another function and again we just want to here we're going to return a div i'm going to set a class here of checkout but i'm going to just i'm going i'm just going to have a h1 here of checkout and then i'm going to be able to export this by default so i'm going to export checkout and i'm going to import this component in my cart pages component so at the top of this file i'm going to import my new checkout component from the components folder so within components we have checkout and i'm just going to render this finally at the within my pages component so now let's come over to the web browser and let's come over and click on the your cart link and you'll see this renders my new route and it also renders that h1 now as you guys know whenever we add a new item to our cart we're storing that product within our redux store and specifically we're storing it within our cart items array and this is what we're going to be using within our cart and our checkout component we're going to map over this array we're going to display all of the products a user has added to their cart we're going to allow them to adjust the quantity and we're going to allow them to remove an item as well as actually checking out eventually using the stripe payments api so without further ado let's go ahead and actually build out our component using our cart items array so let's come back over to our text editor let's go let's go into our component our checkout component and we need to import a few things at the top of the file so i already mentioned that we're going to be using our redux store so we need to import something from react redux which will allow us to actually access that data which is the use selector hook we also need a custom selector that we created in the last tutorial so we're going to be importing that from our redux folder so we'll go into our redux folder cart and our cart selectors and it is our selector for our select cart items so just to remind you what this is in the last tutorial we started to implement reselect this is a really cool library that allows us to create more complex more complex selectors for our redux store and we're going to be using that in this tutorial but for now we're going to be using a selector we already created in the last tutorial which just returns our cart items so again we're going to import select cart items into the component and we also need something from the reselect library itself so we're going to import that from reselect and it is create structured selector so the first thing we need to do is actually access the cart items array so to do that we're going to create a map state function but rather than create a normal map state function we're going to use create structured selector from reselect and this is really simple we're just going to set the cart items to be and we're going to set our custom selector which is our select card items selector and then we're going to use our use selector hook here to access the data so we'll call use selector and pass it our map state and that will give us our card items okay so now that we actually have access to cart items we're going to be able to map over our cart items and render them within our component so what i'm going to do is i'm going to create a wrapping div i'm going to give this a class of cart and within this we're going to map our card items right now i'm actually going to be working with tables when it comes to building the layout and structure of my cart so bear with me as i write out the code the first thing we want to do is create a table and of course we want to set the default attributes for border for our border here we're going to reset that to zero we want to set our cell padding to zero and our cell spacing all to zero of course we need to set our t body we need to set and we need to create our first table row now within this table row we're going to have another table that we're going to use to actually house our table headings so what i'm going to do is i'm going to duplicate this table within this table row right let's just fix the indentation and within the the first table row here what i'm going to do is i'm just going to create my table headings so my first table heading is going to be for the product the second table heading is for the description the third is for the quantity the fourth is for the price and the fifth is for remove i'm also going to apply a class name to my headers table right which is going to be called my checkout header so i'm going to say checkout header and this is just going to be used later on in the tutorial when we create our css all right so we're now going to come down right so we have two tables we have our first table which is just going to have rows for the different sections of the cart we put our headings within its own table and what i'm going to do is i'm just going to collapse this table so it's a little easier for you guys to see what i'm doing maybe i'll create a few line breaks line breaks here right so we have our first table row here right which houses our table headings i'm now going to create another table row with another table and this is going to house my my actual cart items right this is where i'm going to map my cart items so i'm going to put these inside of another table so i actually need to create another table here so i need another tea body and another table row and another table data and i need to reset those basic attributes so again i'm going to set the border here to 0 i'm going to set the cell spacing to 0 and i'm going to set the cell padding all to be 0 and then what i'm going to do is rather than return my table rows directly here what i'm going to do is i'm going to map my cart items so i'm going to say cart items.map i'm going to get the current item and the position and then what i'm going to do is i'm going to return the table row and the table data right which means on the table row here i need to specify the key right which is going to be equal to the position and then i'm going gonna just for now i'm gonna render out the item product name okay so at this point we are mapping through our cart items we are rendering at least our product name on the on the page but before we actually view this in the browser i want to create the the final section of our cart which is where we're going to display our cart total and we're going to have a few buttons so before i actually do this i'm going to import that at the top of the file i'm going to import my button component we're going to import this from our forms and our forum button and then what i'm going to be able to do is underneath the table row that contains the table where we're mapping through our cart items i'm going to have a third and final table row for this table we need another table this time we need to set a line which is a new attribute we've not used before and then we want the border like before to be zero but we want the cell spacing to be zero but the cell padding we want to set to 10 pixels and then we want a table row which we're also going to align right and then we're going to have our table data and within this we're going to have a h3 where we actually set the total which we're going to come back to in a in the later parts of this tutorial we're going to go and fetch we're going to create a custom selector where we can actually get the the cart total now i just mentioned that we also want to render some buttons right so we want to render a continue shopping button and a button to check out so what i'm going to do is after this table row i'm going to create another table row we're going to need yet another table what we're going to do is we're going to set the border to zero we're going to set the cell padding we want 10 pixels and we want cell spacing to be zero we're then going to create a t a t body and a table row and a table data and then we're going to have our first button here so we're going to set a button and we want this to just be continue shopping and then we're gonna have a another table data and here we're going to have our checkout button so we'll just say check out cool all right so i would like to now come back over to the web browser and what i'm going to do is just add a few items to my caught all right so maybe two or three let's click on your cart and as you can see uh we're now rendering uh our cart headings we have the three product names that we've added to the cart we have a section for our cart total and we also have this continue shopping and checkout button cool all right so at this point i think we're ready to actually come back over and work on adding in some more of our product data into our cart so at the moment i have this section here where we're mapping our cart items and we are rendering just at the moment our product name now what i want to do is i want to create a component a nested component that can handle our cart items so the first thing we're going to do is within my checkout folder i'm going to create another folder called item this is going to be our nested component it's just going to have index.js and we're going to import react from from react and then we're going to create our functional component so we'll say const item equals we're going to then cr create our function we're going to return for now and we're going to return a table we're going to come back to this in just a second because the first thing we want to do is export default item and then what we'll do is we'll come over to our index file this is our checkout component and we want to import this nested item component so we'll import item from item and then what we want to do is where we're currently rendering our product name instead of rendering our product name we're going to render the item component but we're going to pass everything within the item to the component this means that the item component is now going to receive the entire product object right so what we can actually do is here we can get the product and then we can destructure from the product anything that we want to render within the component so in this case we know we want to render the product name we want the product thumbnail we want the product price we want the quantity and we want the document id now that we have that we can actually work on our table here so what we can do is we can set a class name we're going to set that to cart item we want the border to be zero we want the cell spacing to be zero and the cell padding we're going to set that to 10 pixels we then want a table body with a table row and a table data right and because we want all of this to be on a single line we're just going to duplicate this for each one of these fields so for the first one we want to put in our product thumbnail so i'm going to create an image tag we're going to have the source equal to the product thumbnail we can even set the alt text to be the product name okay and then for the next table data we're going to insert the product name so we'll say table data and we'll insert the product name directly we need another another table data here and for this one we're going to set the quantity we're going to put that inside of a span but we'll say quantity right and then we want our table data again and we want to put in our price so i'm going to use the currency symbol i for me which is pound and i'm going to insert the product price and then we want our final table data and this is going to actually need to be aligned to center so we'll say align align center because we're going to have a span here with just an x because what this is going to be for is this is going to be our remove button if we want to allow users to be able to remove an item from the cart right so we need that align center to center the x and then we'll save these changes and i'm going to come back now over to the web browser our component is desperately in need of styling right so at the moment nothing fits on the page because we haven't written any css but we are ready to do that now so let's come back over to our component and let's restyle uh so let's write our css so let's come into the style sheet we created for our checkout component and what we want to do is we want to set checkout right to have a margin of 20 ramps and we want to set right and left to auto we want to target the h1 we want to set that to be display block with a width of 100 we're going to set the h1 and also a paragraph tag we want to set that to be text align center right we want to target our checkout header right this is the table that contains our our headings we want to set a border here in fact we want to set a border bottom of one pixel and we want to set a solid black um we want to target our cart wrapper we want to set a max width here of 1000 pixels right and again we want to center this so we'll say margin zero auto we then want to target our uh our cart header and our cart and we want to set the width to be 100 pixels we want to say text align left we also then want to target our table headings and our table data cells and we want to set the width to be 22 percent and then outside of this here we're going to target the cart item right so this is our item our nested cart item component and we want to target a table data image right we want to override the default styling on that and make sure that it's display block with a 100 width okay so let's check this out in the browser i'm just going to add a few items to the cart let's come over to our cart page okay so this looks much better already but we're not quite there we still need to add a bit of padding to our headings and also i want to fix the buttons that we have here they don't look quite right so i'm going to come back over to the text editor i'm going to find my table headings and on the table here for checkout header i'm going to add a cell padding of 10 pixels what i also want to do is i want to come and target my cart right so i have a div wrapping my cart come back over to the style sheet what i want to do is i want to target my cart right which is here i'm going to target the table and just set the width here to be 100 let's come back over and that looks much better already right so let's add a few items to the cart let's come back over to our cart and yeah that looks really good now okay so as you can see i've just manually cleared my cart and the reason is and the reason i've done that is because i wanted to replicate this scenario when we don't have any items in the cart but we're still rendering the component which we shouldn't be so what we're going to do is we're going to hide our cart component when we don't have any items in our cart so what we'll do is we'll come back over to our text editor and based on our cart items array right within our cart div what we'll what we'll do is we'll say cart items dot length if it is greater than zero we will conditionally render our table so what i'll do is i'll just collapse this to make it a bit easier here and then what we'll do is we will conditionally render that and we will create a alternative which is a paragraph tag here and here we can just say something to the effect of you have no items in your cart the message could be anything that you want in fact you could actually store this in a cons right so you could actually maybe up here you could say error message equals this string right and then we can just perhaps we could just render that here right so let's expand our table again let's reload that come back over to the browser and you can now see that when we don't have any items in the cart we have this message that you have none if i search i add something to my cart maybe a couple of items let's come back to the cart and you'll see that because we have items the cart renders at this point we're ready to start thinking about some of the more advanced functionality we want to enable the user to do from within their cart so looking at this page the first thing that we're going to do is look into how we can allow users to remove an item from their cart right which is basically going to be whenever they click on this remove icon here so to do that we're going to need to work on our redux code so let's come back over to our text editor let's come into our redux folder our cart and we need to go into our cart types and we need to create a new type which is going to be remove card item so we'll say remove card item and again the value is going to be the same as the name of the key we'll need to create the corresponding action for that so we'll say export const remove card item it is going to take a card item and it's going to return an object with a type and payload the type is going to be of card types dot remove card item and the payload is going to be the cart item itself once we've created our action we're ready to update our reducer so i'm going to come over to my cart reducer and we need to create a new case so at the moment we only have a case to add a card item i'm going to come here and create a new case for the cart types dot remove cart item and in this case we will return the state but we want to update our cart items and again what we're going to do here very similarly to what we did when we add our cart item we're going to create a utility function to create a new array right so what we'll do is we'll come back over to our cart utils and at the bottom of this file i'll just collapse these here we're going to create the uh the skeleton of our new helper function right our new utility function so we'll say export const handle remove card item handle remove cart item this is going to equal as i said a function that is going to expect the previous card items and the current item to remove right and again this is just going to equal a function but before we actually write that function let's take that and come back over to our reducer we're going to import that from our utils at the top of the file the top of the reducer and then we'll call this new utility function and we're going to pass it our previous card items which again is our state dot cart items and then we want to pass it again if i check this we want to pause it our cart item to remove so here we'll pause cart item to remove and that's going to equal our action dot payload cool all right so at this point we can come back over now to our cart utils and all we actually want to do here is return a new array right so what we'll do is we will call our previous card items dot filter right and then as we're filtering we'll get the item that we're on and then we will compare the the item.document id and ensure that it is not equal to the cart item to remove document id right so it will only return the cart items that do not match the item's id that is the one we're trying to remove so it's going to filter the item out of our cart it's going to return a new array and that is going to be used in our reducer to update our store so what we need to do is come over to our components folder our checkout component and our item component right so this is the item component that we map and the first thing that we need to do is we need to access dispatch so i'm going to import at the top of the file something from react redux which is the use dispatch hook we also want to import the action that we want to dispatch so in this case it's the new action we just created we're going to import that from our redux folder so we'll say redux cart and our cart actions it is our remove cart item action that we want to access and then what we want to oh sorry dispatch and then to get access to dispatch we'll say cons dispatch equals use dispatch and we will call that as a function and then we'll be able to create a function here so i'm going to say const handle remove cart item and this is going to take a document id right and then we are going to be able to call dispatch and we'll be able to dispatch our remove cart item action and we're going to pass it within an object we're going to pass the document id right so then what we can do is because we're already destructuring the document id from the product object that's passed into the item component we can come down to to our remove icon here which is this x and on our span we can on the on click event right we can call we can call our handle remove cart item function and pass the the document the document id i'm also going to apply a class here right here which is cart btn so it's a cart button and in my style sheet here i'm going to add a new style for this right which is cart button i'm just going to set the cursor to pointer now let's come back over to the web browser and let's add a few items to our cart let's come back to our cart and let's click on one of these and remove them so i'm going to remove the second and as you can see it removes it from my cart okay so the next thing that we want to do is we want to implement a way that a user can manage the quantity of items within their cart so i'm going to add two arrows beside the the quantity number that a user will be able to click to either increase or decrease that product's quantity so let's first work on the front end code so let's come back over to our text editor i'm going to come back into i'm going to close all these files so it's a bit easier to work and i'm going to come into my checkout item component and what i'm going to do is this out beside the span containing the quantity i'm going to create another span right and i'm just going to put a an arrow here right so i'm going to put two spans on either side that have a arrow either to increase or decrease the quantity so let's look at this in the browser in fact before i do that i'm going to add the same class name here right of cart cart button right so that's just going to mean that whenever they hover over this arrow the user sees the uh that it's clickable and as you can see these arrows that you can click and we want to use these to either increase or decrease the quantity of that item so the first one we're going to work on is increasing right and that's really simple right because we already have the actions and the code we need so the first thing that i'm going to do is i'm going to come to the top of the file and i'm already importing something from my cart actions i'm going to now import another action which is add product we created that in an earlier tutorial and i'm going to use that within a new function and i'm going to say const handle add product right and again this is just going to take the product right and then we're going to dispatch the add product action and it's just going to take the entire product uh the entire product object and then what i can do is down here uh where i'm increa where i have the arrow to increase the quantity i'm going to call on the on click event right i'm going to call the handle at product function and i'm going to pass in the product that i already have access to here and you can see now if i click on this arrow to increase the quantity that i'm able to increase the quantity of any one of these items which is fantastic and also you can see that it even updates within the header where we're displaying the the quantity of the unique items so it's currently on 10 if i increase this it goes to 11. if i increase this it goes to 12. so as you can see it's working very well but of course we now need to look at how we can decrease the quantity of an item now this is going to be different to how we currently handle at product so we are going to need to write some new types and actions for this logic okay so the first thing i'm going to do is i'm going to come back over to my text editor and what i need to do is i need to come over to my cart types we need a new type right and the new type we're going to call uh something like reduce cart item and again the name of the value is going to be the same as the name of the key we then need to create the corresponding action that we can dispatch so we're just going to say export const reduce cart item and again this is just going to take a cart item and it's simply going to return an action an object with a type and payload so we'll call cart types and our new type to reduce a cart item and a payload which is going to be the uh the cart item that we have passed to it once we've created our action we're ready to come over and look at our reducer and we need to again we need to create a new case i'm going to do that above my remove cart item i'm going to create a new case here for our cart types dot reduce reduce cart item and again we're going to return here our state and then we're going to return our cart items but what we're going to do is we're going to call a ut a new utility function so let's come over to our cart utils and what we want to do here is a little bit more complicated than what we did to remove a cart item right and i'm going to explain why in just a second but first of all let's as we did before let's create the skeleton so we'll say export const we're going to call this handle reduce card item so we'll say handle reduce cart item right and it's going to expect again it's going to expect two things the previous card items and the cart item to reduce right those are the two things that it expects now before we write the code for this utility function let's come over to our reducer and at the top of the file we need to remember to import that util and then for the case where we reduce the cart item let's call the new function and remember we need to pass the previous cart items which again is the state dot card items and if we look at the util we created we are also expecting the cart item to reduce so we need to also pass that here and again that's equal to the action dot payload cool okay so we're now ready to write out our utility function to reduce the quantity of an item in our cart so there are two scenarios that we need to cater for when we are dealing with this action but before we can do it we we actually need to get the existing item right so to do that we're going to create a new const we're going to call it existing cart item right and this is going to equal the previous cart items array and we're going to call find on that array and when we are mapping through what we're going to do is we're going to get the current cart item right and then what we're going to do is we're going to take the cart item document id and compare it with the cart item to reduce document id right and that's going to return the item for us so we now have access to that that product object and we can look at things like the quantity on it and that's exactly what we want to do so the first scenario we want to handle is when the existing cart item and the quantity of that item in our cart is equal to one so they only have at the time of clicking reduce one of this particular item in their cart now if they only have one item in their in in their cart right and they try to reduce it they would effectively be removing the item from their cart so in this case what we want to do is return the the the previous cart items array right without the cart item that they are reducing right this so they are effectively at this point removing the item from their from their card so we're gonna call previous card items filter and then what we'll do is we will get the card item right we'll get the cart item and we will only return the card items where the document id does not match the existing card item document id so we will effectively at this point we are removing the item from the cart now if the item has more than one when they are trying to remove it sorry reduce it reduce the quantity if they have more so let's say they have four a quantity of four and they're reducing it by one okay we then need to map our previous card ions so we'll say return our previous card items dot map right and then we're going to get our cart item right we'll get our cart item and then we will compare we will say if our cart item document id equals the existing cart item document id then we want to do either of two things right so we're going to do one of two things we are either going to get the cart item right we're going to return the entire cart item object but we're going to update the quantity field to the cart item um quantity minus one right so we're effectively in this scenario we are saying um there where uh there is more than one they have a quantity of more than one for this particular item in their cart we want to reduce it by one so in this case we are going to map through the previous cart items array we're going to search it and whenever the we find the cart item in the array we're going to update the quantity but we're going to reduce the value by one now if it isn't if as we are mapping through our previous cart items right we are mapping through all of the items right if this particular one that we're currently mapping is not the one that we're trying to reduce then we're just going to return the cart item right so we'll just return it here okay so that is actually our utility function that we needed to write that's that's all of the logic that we needed to handle so what we're going to be able to do now is come back over to our component and use this code so let's come back over to our component and to our item component and what we want to do now is we want to import the new action we created which is to reduce the cart item and then we want to create another function here which is going to be const handle reduce [Music] item right it's going to take the product and we're going to call dispatch we're going to fire our reduced cart item right but we're going to pause it our product here and then what i can do is on our our arrow here to reduce the quantity of this item on the on click event we're going to call this function which is handle reduce item and we're going to pass it the product okay so let's check this in the browser let's come over to the browser i'm going to add a few items to my cart okay let's try all of these so i'm going to first i'm going to remove this item that worked i'm going to increase these items and i'm going to remove an item and as you can see because this only has one if i remove it it's going to remove the item from the cart which it does so you can see that this is now working exactly how we intended now the next thing that we need to do is calculate the cart total we need to take into account the different items they're different prices and the quantity of each item and we need to calculate that and display that within our cart we can use that same value when we check out with the stripe payments api now to do this we're going to use reselect we're going to create another custom selector and in actual fact because of the code we have in place it's actually not going to be that difficult for us to implement this so let's come back over to our text editor and we need to go into our cart selectors that's in our redux folder cart and our cart selectors we need to create a new selector so we need to create our new selector we're going to call it select cart total so i'll say export so so i'm going to say x so we need to export it so we'll say export const select cart total and then we're going to use create selector we're going to pause it our cart items so we'll we'll pass our selector for our cart items here and then we're going to get the cart items and we're going to call reduce on our cart items array so we'll call reduce here we then need to set our accumulator right which we're going to call quantity and we we need to get the individual cart item as we map through it and then we need to do our our addition we need to get our accumulator value which is going to be quantity and we need to add that to uh our cart item that we're currently mapping the quantity of it times the cart item product price and then we need to set the uh initial value of our accumulator which is going to be zero right so that is our uh custom selector to calculate our cart total so what i'll now be able to do is come back over to my checkout component and my cart and as you can see down here i have my total so what we need to do is we need to import from my cart selectors i'm already importing a selector here so i can just import it here so we'll say select card item total and then within our within create structured selector in our map state function here what we're going to do is we're going to just get the total and we're going to pass our select cart total we'll be able to get that from the use selector hook and we can render that anywhere we want on the page so beside total i'm also going to add my currency symbol and what we're going to do is we're going to come back over to the browser let's add a few more items to our cart let's come back to the cart let's increase the values and as you can see we have our cart total calculated for us here at the bottom of our cart and i can increase i can decrease that depending on the items that i have in my cart and the quantities of it i have selected now currently whenever we click on an add to cart button right we are we are completing that action we are adding the item to our cart and you can see that we are increasing the number that we display beside um the your cart link in our header but there isn't really any kind of confirmation that the action was completed right and the reason that we've not worked on that is because i've been waiting for us to get to this point so what we actually want to do is whenever we successfully add an item to our cart we want to then redirect the user we want to take them to the cop page where they can then check out or they can return so what we're going to do is come back over to the code and we're going to go into uh the components that were that we currently have our add to cart buttons in so those would be if i come over to my product results component and my product component this is the component that we're rendering our add to cart button here and what i want to do is i want to import something from react router dom which is the use history hook and we'll get access to his history by by saying const history equals use history and call that as a function and then what i want to do is whenever we dispatch our action to add a product right what i'm going to do is i'm going to call put history.push and i'm going to push them to the cart route and as you can see whenever we now click on the add to cart button we're going to be taken to our cart page now we also have a cart button on our details page so we also need to apply the same logic to our product card which is the component we use for our details details page so again from react auto dom we need to import the use history hook we can access the history by saying const history equals equals use history and call that as a function and then again where we dispatch our action here to add the product we're going to call history dot push and we're going to push them to the cart page okay so now let's come back over to the to the browser and let's run through that flow and what you're going to notice is that we have this continue shopping button right so if what what we want to do is allow them to view their cart and either continue to check out or perhaps adjust the quantity of the item or allow them to continue shopping where they'll be redirected back to whatever page it is that they came from so to implement that functionality we need to come back over to our text editor and we need to go back to back to our car component which is our checkout component we'll go into our index file here and we need to import from um again we need to import from react router dome so we'll import from react router dome the use history hook and again we need to get access to history so we'll say history equals use history and call that as a function and then what we want to do is on our continue shopping button on the on click event so we'll say on click right what we want to do is we want to call history dot go back and call that as a function save that and let's come back over to the browser let's add some items to our cart and then let's click on continue shopping and you'll see that we are redirected back now if i come back to the cart notice that everything the items i've selected are still in my cart but it just allows me to continue browsing continue shopping and that brings us to the end of this video tutorial but before we sign off i just want to encourage you guys to check out the official github repository for this project i'll be posting a direct link in the description of this video and at the end of this tutorial as you can see i've also created a pull request as i do at the end of all my tutorials and i will be merging my code and my changes into the master branch so that you guys can compare your code with mine i also want to remind you guys that there is an official youtube playlist for this series and this is just a really easy way for you to find previous and future videos but of course i also want to ask you guys to check out my official youtube channel which is youtube.com forward slash simpletut but most importantly don't forget to like comment and subscribe and remember to turn on those notifications thank you very much for watching and i look forward to working with you again in the next video

Channel: SimpleTut

Views: 3,445

Keywords: ecommerce, react, react redux, GraphQL, React Context API, Node, Node JS, redux, online store, stripe, stripe api, shopping card, paypal, firebase, react router, react router dom, routes, routing, Google Sign-In, Google Auth, Google Sign In Authentication, login, signin, react hooks, useEffect, useSelector, useDispatch, redux hooks, useState, checkout, cart

Id: PpAK_h3M6ME

Length: 56min 35sec (3395 seconds)

Published: Sat Oct 10 2020