1 00:00:00,360 --> 00:00:00,870 Not bad. 2 00:00:00,870 --> 00:00:01,350 Not bad. 3 00:00:01,350 --> 00:00:05,790 We're done setting up car context as well as initial cart page. 4 00:00:06,010 --> 00:00:09,030 Now let's work on the empty cart component. 5 00:00:09,120 --> 00:00:12,120 If you're wondering well what is an empty cart component. 6 00:00:12,120 --> 00:00:17,170 I'm going to head over back to finished project and if we're going to remove our only item we're going 7 00:00:17,170 --> 00:00:20,800 to have the empty cart and we're going to have a suggestion to fill it. 8 00:00:20,820 --> 00:00:25,210 Now the suggestion is of course a link we'll just navigate back to the product. 9 00:00:25,260 --> 00:00:29,130 You're probably wondering well why do we have it as a component. 10 00:00:29,130 --> 00:00:31,950 Because we're going to use the same component in our checkout. 11 00:00:32,190 --> 00:00:36,180 So if the cart is going to be empty there's no point of showing the checkout form. 12 00:00:36,210 --> 00:00:36,750 All right. 13 00:00:36,900 --> 00:00:39,020 Now let's head over back to cart. 14 00:00:39,060 --> 00:00:42,530 I'm first going to finish with my imports so I'm gonna type here. 15 00:00:42,540 --> 00:00:43,370 Import. 16 00:00:43,560 --> 00:00:45,310 Then we're gonna get our empty cart. 17 00:00:45,420 --> 00:00:52,080 So the component we're gonna work on this video then this is coming from the cart folder. 18 00:00:52,080 --> 00:00:58,170 So first we're gonna head over to components and we're going to look for the cart folder and then we're 19 00:00:58,170 --> 00:01:00,330 looking for the empty cart. 20 00:01:00,450 --> 00:01:04,380 Then also we're gonna get right away the cart item. 21 00:01:04,380 --> 00:01:08,510 So let's copy and pasted because path is gonna be somewhat similar. 22 00:01:08,540 --> 00:01:14,280 We closed the sidebar and in this case we're looking for the cart item not car item is gonna be each 23 00:01:14,280 --> 00:01:16,830 and every product in our cart. 24 00:01:17,340 --> 00:01:19,980 So we're gonna have a specific component for that. 25 00:01:19,980 --> 00:01:22,600 And of course this is coming from a different file. 26 00:01:22,680 --> 00:01:26,220 So this is gonna be a cart item cart item. 27 00:01:26,280 --> 00:01:26,940 Yes. 28 00:01:27,260 --> 00:01:32,550 Then we're also gonna need a link because in the bottom we're going to have a link. 29 00:01:32,580 --> 00:01:35,470 So let me add a item and I'm going to show you. 30 00:01:35,580 --> 00:01:38,520 Sorry formatting item to the cart in a bottom. 31 00:01:38,570 --> 00:01:45,150 I'm either going to have a log in if the user has logged in or we're gonna have a link to our checkout 32 00:01:45,510 --> 00:01:51,000 so essentially the same button but just depending if the user has logged in then we're gonna guide them 33 00:01:51,000 --> 00:01:52,170 to a check out page. 34 00:01:52,170 --> 00:01:55,870 If not then the link is gonna be to a log in page. 35 00:01:55,980 --> 00:01:57,570 So that's the reason why we're importing. 36 00:01:57,570 --> 00:01:59,100 Also a link. 37 00:01:59,100 --> 00:02:02,810 So let's get a link from and you guessed it react. 38 00:02:02,940 --> 00:02:09,570 Wrote her down and then eventually we're also gonna get a user context so I can just place here comma 39 00:02:09,690 --> 00:02:17,880 or you know what let's import import user context user context and we're just gonna have it as a comment. 40 00:02:17,910 --> 00:02:24,720 So from and then we're going to look for context and that is gonna be coming from the user but currently 41 00:02:24,720 --> 00:02:30,030 of course we haven't set that up so that's the reason why I'm coming out so temporary I'm just going 42 00:02:30,030 --> 00:02:36,210 to set a user to false so temporary I'm just gonna use some kind of variable here and later on in fact 43 00:02:36,240 --> 00:02:38,100 we're gonna use our actual user. 44 00:02:38,400 --> 00:02:45,390 So just for the time being above the react use context from the court context I'm going to say let user 45 00:02:46,520 --> 00:02:51,230 and I'm just gonna set this false and if you would want to consider it true in that way you're gonna 46 00:02:51,240 --> 00:02:54,840 see depending on what is the value for the user. 47 00:02:54,930 --> 00:02:55,960 While that link. 48 00:02:55,960 --> 00:02:57,320 We're gonna be displaying. 49 00:02:57,320 --> 00:03:02,970 And like I said we're gonna start by empty cart and the way we're going to do that is we're gonna head 50 00:03:02,970 --> 00:03:07,230 on down and we can just get her off the console logs for now. 51 00:03:07,230 --> 00:03:12,240 We already saw that we're getting the cart as well as the total and now let's set up a if statement 52 00:03:12,660 --> 00:03:14,460 and the condition is gonna be the following. 53 00:03:14,460 --> 00:03:24,420 I'm gonna say if car length length is equal to zero then I would like to display the empty cart so return. 54 00:03:24,720 --> 00:03:28,020 And we're gonna look for empty cart. 55 00:03:28,110 --> 00:03:30,260 Now of course our cart is not empty. 56 00:03:30,260 --> 00:03:34,080 That's the reason why we're still gonna have the hello from the cartridge. 57 00:03:34,350 --> 00:03:40,860 So if we would want to make our cart empty we can just head over back to our cart context get rid of 58 00:03:40,860 --> 00:03:44,030 the local cart and set it as an empty. 59 00:03:44,070 --> 00:03:44,650 All right. 60 00:03:44,650 --> 00:03:49,860 And then of course I have a hello from empty cart and I'll gonna start working on that component. 61 00:03:49,860 --> 00:03:51,380 Let's head over to all the components. 62 00:03:51,390 --> 00:03:57,240 Let's look for the cart holder and then we're gonna start working in the empty cart and it's going to 63 00:03:57,240 --> 00:04:02,460 be someone simple where again we're gonna get a link from reactor number down. 64 00:04:02,850 --> 00:04:08,240 Let me close the sidebar so link from react rotor down. 65 00:04:08,550 --> 00:04:13,740 And then as my return it's not gonna be a simple hiring one. 66 00:04:13,740 --> 00:04:20,130 Instead it's gonna be a section we're gonna add a class name and the class name is gonna be empty cart 67 00:04:20,620 --> 00:04:29,610 and also a section and then within the section let's have a drink too with a text of empty cart readouts 68 00:04:29,970 --> 00:04:30,690 and. 69 00:04:30,720 --> 00:04:32,380 Why don't we set up our link. 70 00:04:32,520 --> 00:04:40,320 So we're gonna have the link component link come on and on that link component is going to navigate 71 00:04:40,320 --> 00:04:41,270 to a product. 72 00:04:41,280 --> 00:04:46,740 Now of course you can guide your user wherever you would like but I think product is just gonna make 73 00:04:46,740 --> 00:04:52,530 more sense if you would want to their users to add more items in the cart and let's add some classes 74 00:04:52,840 --> 00:05:02,010 let's say BD n beat and primary and then let's just type fill it not fill out our card and the moment 75 00:05:02,010 --> 00:05:02,680 we separate. 76 00:05:02,760 --> 00:05:06,170 This is what we should see within our cart page. 77 00:05:06,210 --> 00:05:11,730 Now I'm gonna head over back to my context the cart one once we see that of course our empty cart is 78 00:05:11,730 --> 00:05:18,750 working then we can just press commands Z and go back to the local cart and that's how we can set up 79 00:05:18,810 --> 00:05:22,290 a empty cart component in our cart page.