1
00:00:00,460 --> 00:00:00,980
Perfect.

2
00:00:01,000 --> 00:00:09,640
And once we're able to log in and log out now, I would want to restrict access to a checkout page based

3
00:00:09,640 --> 00:00:11,060
on those values.

4
00:00:11,680 --> 00:00:20,020
So if you remember, when we're setting up sidebar and a number, we added the checkout and I said that

5
00:00:20,200 --> 00:00:26,050
the reason why we're adding it manually, because eventually we will check for the value of the user.

6
00:00:26,530 --> 00:00:33,550
And of course, based on that value will either display or hide the link to a checkout page.

7
00:00:34,030 --> 00:00:36,770
And also, we have the same setup.

8
00:00:37,850 --> 00:00:39,220
We have products.

9
00:00:39,220 --> 00:00:40,270
And it was in a card.

10
00:00:40,580 --> 00:00:45,100
Remember, in court for the time being, we placed a link to a checkout.

11
00:00:45,100 --> 00:00:52,330
But again, this is either going to be a button for logging or if, of course, the user has logged

12
00:00:52,330 --> 00:00:56,360
in, then he or she can navigate to checkout.

13
00:00:56,770 --> 00:00:58,150
So let's go one by one.

14
00:00:58,330 --> 00:01:04,960
I'm looking for essentially three components, and that's why I will close everything that I have currently

15
00:01:04,960 --> 00:01:05,440
open.

16
00:01:06,040 --> 00:01:12,870
And we're looking for a bar that's going to be one that also I would want to do it in the sidebar.

17
00:01:13,330 --> 00:01:19,890
And then the last one is going to be that card totals component as well.

18
00:01:20,140 --> 00:01:22,900
So we're going to start with our number.

19
00:01:24,190 --> 00:01:31,240
And remember, we have a link for the checkup, correct now, in this case, I must have skipped it,

20
00:01:31,660 --> 00:01:39,430
but of course will create a link and I would want to grab my user context, since in there I have access

21
00:01:39,700 --> 00:01:40,690
to my user.

22
00:01:40,690 --> 00:01:41,170
Correct.

23
00:01:41,470 --> 00:01:46,590
Again, we'll just check if the user exists, then we're displaying the link to check out.

24
00:01:46,600 --> 00:01:48,120
If not, then we don't.

25
00:01:48,490 --> 00:01:51,220
So we'll go here with use user context.

26
00:01:51,400 --> 00:01:52,300
OK, awesome.

27
00:01:52,690 --> 00:02:00,880
And where we have the on our list right next to my lunch, I'm going to set up my end operator where

28
00:02:00,880 --> 00:02:05,320
I'm going to say if the user exists, only then must play the check out.

29
00:02:05,330 --> 00:02:10,210
Like remember we need to use the operator, then we have a list.

30
00:02:10,210 --> 00:02:16,240
So we go with list item and then set of the system, which is a link to.

31
00:02:16,750 --> 00:02:24,310
And then we would want to navigate to a checkout page, for example, and check out online instead of

32
00:02:24,310 --> 00:02:27,910
this link, let's just say a text of checkout.

33
00:02:28,510 --> 00:02:32,280
Now you can set up your list, of course.

34
00:02:32,290 --> 00:02:34,210
And what was the name of the file?

35
00:02:35,540 --> 00:02:44,180
I believe we went we linked, right, so in the confidence you can add the checkout page and do some

36
00:02:44,180 --> 00:02:49,640
nifty logical here where you're checking whether text might be matched to the checkout and then based

37
00:02:49,640 --> 00:02:51,800
on that and the user displayed.

38
00:02:52,010 --> 00:02:59,300
But I just find this approach a bit more straightforward since we just showcase, hey, if the user

39
00:02:59,300 --> 00:03:00,290
exists, awesome.

40
00:03:00,290 --> 00:03:04,160
Then we'll display the list item, if not than we want.

41
00:03:04,430 --> 00:03:10,730
Now, again, if you have multiple things that you would want to toggle, yeah, you can probably consider

42
00:03:10,940 --> 00:03:12,940
doing something programmatically over here.

43
00:03:12,950 --> 00:03:20,180
But for one, I think it's good enough if we just say if the user exists, then display this list item

44
00:03:20,390 --> 00:03:23,620
and once we go back, we should be able to see the checkout.

45
00:03:23,900 --> 00:03:24,910
And of course we do.

46
00:03:25,010 --> 00:03:28,310
So now we can navigate to check out Page.

47
00:03:28,670 --> 00:03:34,750
And I would want to do the same thing essentially in the sidebar as well and not speed this up.

48
00:03:34,760 --> 00:03:37,780
I will copy and paste a few things here and there.

49
00:03:38,210 --> 00:03:39,530
So it's an aggregator.

50
00:03:40,410 --> 00:03:46,820
We have sidebar, copy and paste, we have already use user contacts, so that's a good start.

51
00:03:47,040 --> 00:03:52,380
And then again, we have the same thing we have to check out, and this one has closed sidebar.

52
00:03:52,650 --> 00:03:55,470
So the only thing I need to add over here is my user.

53
00:03:55,830 --> 00:03:58,020
So check for the value of that user.

54
00:03:58,290 --> 00:04:04,430
And if it exists, then, of course, I would want to render my list item and.

55
00:04:05,000 --> 00:04:05,910
Now we have it.

56
00:04:06,120 --> 00:04:11,610
And the last thing is the card totals component, where, again, same deal.

57
00:04:11,620 --> 00:04:13,110
We have used user contacts.

58
00:04:13,620 --> 00:04:21,110
So let's go up, let's grab that sucker and let's access that value in the card totals.

59
00:04:21,120 --> 00:04:27,720
And in this case, not only I would want to get the my user value, but I also do want to get a login

60
00:04:27,990 --> 00:04:35,880
with redirect, because what we're going to do is set up a if statement, again, essentially a temporary

61
00:04:35,880 --> 00:04:43,980
operator where if we don't have the user, then I would right away direct to the login option.

62
00:04:44,370 --> 00:04:50,760
But if the user has logged in, then of course we display this nice link to a checkout.

63
00:04:51,090 --> 00:04:57,270
Then let's scroll down to our checkout and let's set up our condition where we're going to go with my

64
00:04:57,270 --> 00:04:57,780
user.

65
00:04:58,020 --> 00:05:01,340
So if it exists, then of course I'll grab my link.

66
00:05:02,360 --> 00:05:10,670
And copy and paste, if it doesn't exist, then I would want to set up a button that will navigate to

67
00:05:10,670 --> 00:05:11,970
a log option.

68
00:05:12,350 --> 00:05:14,810
So in this case, we're not going to go with lunk.

69
00:05:14,810 --> 00:05:23,030
We're just going to go with a button and line on click is going to be that login with the redirect.

70
00:05:23,360 --> 00:05:26,090
So I'll add a starling here.

71
00:05:26,090 --> 00:05:34,220
Here's a class name, B10, and let's just right here login inside of the button.

72
00:05:34,430 --> 00:05:40,990
Now I also want to add probably a type, so type will be equal to a button that's safe.

73
00:05:41,710 --> 00:05:48,650
And now let's navigate to a court notice here I have option proceed to checkout and of course I can

74
00:05:48,650 --> 00:05:49,670
navigate through that page.

75
00:05:49,680 --> 00:05:56,880
However, if I log out now, of course, if we navigate to a cart, we'll see a log in option.

76
00:05:57,180 --> 00:05:58,580
So again, same thing.

77
00:05:58,580 --> 00:06:03,370
We have a login option in the number and we also have it in the card.

78
00:06:03,620 --> 00:06:11,930
So once we click, we are directed to the auth zero setup page, where again are Google, Twitter,

79
00:06:12,110 --> 00:06:14,590
or of course you can go with email as well.

80
00:06:14,900 --> 00:06:18,320
So I'm going to go with Google just to showcase that.

81
00:06:18,350 --> 00:06:25,400
Of course it will still work and we're back in Harrap or this time, of course, we can see that we

82
00:06:25,400 --> 00:06:26,330
have logged in.