1
00:00:00,300 --> 00:00:00,830
Excellent.

2
00:00:00,840 --> 00:00:03,320
And with our empty cart out of the way.

3
00:00:03,480 --> 00:00:07,010
Let's focus on the rest of the items in our cart page.

4
00:00:07,200 --> 00:00:09,360
So there is gonna be a list of cart items.

5
00:00:09,360 --> 00:00:15,210
So we're gonna loop over our cart variable and then we're also gonna have the total as well as like

6
00:00:15,240 --> 00:00:20,820
I mentioned before our links with our to a log and page or to a check out page.

7
00:00:20,820 --> 00:00:27,870
So where we have a heading one on from cart page we can just get out of it and we can set it up as a

8
00:00:27,870 --> 00:00:28,980
section.

9
00:00:28,980 --> 00:00:34,980
Now we're gonna have to ride away some classes to our section when say class name and we're gonna have

10
00:00:35,070 --> 00:00:42,110
of cart items car items and then also we're going to have a section within a section we're going to

11
00:00:42,110 --> 00:00:46,620
start with a heading to where we're gonna have your cart.

12
00:00:46,620 --> 00:00:49,290
Then we're gonna loop over our cart.

13
00:00:49,290 --> 00:00:52,520
So I'm gonna set up right away a cart map.

14
00:00:52,530 --> 00:00:57,120
So we're going to use map method because of course we're getting back the array then we have the callback

15
00:00:57,120 --> 00:01:02,670
function each and every item we're going to access each and every item and for each and every item we're

16
00:01:02,670 --> 00:01:06,350
going to return a cart item component that we haven't set up.

17
00:01:06,390 --> 00:01:12,510
Again we're just going to have I believe three heading ones correct because our local hard had three

18
00:01:12,510 --> 00:01:15,600
items then we still need to have a key.

19
00:01:15,720 --> 00:01:22,200
So I'm going to have a key of item D because each and every item does have the 80 and then the same

20
00:01:22,200 --> 00:01:23,850
how we did with the product.

21
00:01:23,970 --> 00:01:28,440
I'm just going to spread out each and every cart item so I'm gonna pass it in the cart item and then

22
00:01:28,440 --> 00:01:31,710
later I can decide which properties I would want.

23
00:01:32,190 --> 00:01:37,260
And then once we have looped over our cart then we're gonna have the total.

24
00:01:37,260 --> 00:01:43,140
So we're gonna go with total and total is gonna be dollar sign and then we're going to access our total

25
00:01:43,140 --> 00:01:44,020
variable.

26
00:01:44,190 --> 00:01:47,090
So total variable not save it.

27
00:01:47,370 --> 00:01:49,470
Like I said we have our heading ones.

28
00:01:49,470 --> 00:01:51,490
So we need to still work on the cart.

29
00:01:51,510 --> 00:01:55,230
And then of course our total currently is zero.

30
00:01:55,290 --> 00:02:00,480
And now we're going to check our user and depending on the user we're gonna display the link because

31
00:02:00,480 --> 00:02:06,630
like I said eventually this is going to be our authentication where we're gonna check whether user has

32
00:02:06,630 --> 00:02:12,240
logged in if the user has logged in then we're going to display one link so link is going to navigate

33
00:02:12,240 --> 00:02:18,420
to a log in page 1 I'm sorry to check our page I guess if you have logged in and if not then back to

34
00:02:18,480 --> 00:02:19,730
a log in page.

35
00:02:19,830 --> 00:02:28,050
So right after the hearing one I'm going to check whether the user exists and if the user exists and

36
00:02:28,050 --> 00:02:33,410
if the user if let's say is true then I'm going to display link to a check out page.

37
00:02:33,420 --> 00:02:37,200
If not then the link is going to be to a log in page.

38
00:02:37,200 --> 00:02:40,440
You know what I think it's gonna be faster for me to type it this way.

39
00:02:40,440 --> 00:02:47,610
So first I'm going to set up my link to then we're gonna go to checkout checkout page and then of course

40
00:02:47,610 --> 00:02:57,840
we're gonna add some classes so class name is going to be n BD and primary and Beaty and block and then

41
00:02:57,840 --> 00:03:02,120
Let's type in checkout checkout page let's save it.

42
00:03:02,140 --> 00:03:07,760
We'll see whether we're gonna have a link let's try to navigate okay our link works well now we're gonna

43
00:03:07,770 --> 00:03:14,310
head over back and copy paste it we're just gonna change it around where the link is going to navigate

44
00:03:14,310 --> 00:03:21,810
to a logon page so let's type log in as well as the text is gonna be log in so let's type a log in let's

45
00:03:21,810 --> 00:03:29,430
say both of them and now I'm gonna set up my ternary operator I'm going to say user if the user does

46
00:03:29,430 --> 00:03:32,750
exist then I'm going to show the checkout.

47
00:03:32,790 --> 00:03:39,270
So let me cut this one out and then just copy and paste it and then however if the user doesn't exist

48
00:03:39,660 --> 00:03:46,020
so I need to add after a link Oh no that's not what I want I didn't want to now get right after link

49
00:03:46,050 --> 00:03:51,570
I'm gonna have a colon so if the user doesn't exist then of course I would like to display the link

50
00:03:52,050 --> 00:03:59,430
that navigates to a checkout page so let me cut this out and then I can navigate back to a link and

51
00:03:59,430 --> 00:04:00,110
let's save it.

52
00:04:00,210 --> 00:04:06,030
And now of course we're going to have a log in just because our user is false if I'm wrong said my user

53
00:04:06,030 --> 00:04:12,450
to true then of course I'm going to have a checkout now I already tried navigating to a checkout page

54
00:04:12,810 --> 00:04:18,450
so let me set this back to FALSE AND LET'S JUST TRY whether we can navigate correctly to a log in page

55
00:04:18,810 --> 00:04:25,650
and we do so now we can start working on the card item so that way we can display a nice looking item

56
00:04:25,650 --> 00:04:27,360
instead of just one heading one.