1
00:00:00,450 --> 00:00:06,020
And with our car functionality complete I would want to head over to a header or not bar.

2
00:00:06,050 --> 00:00:07,100
Call it Tower you'd like.

3
00:00:07,110 --> 00:00:09,040
So we have a header and we have a number.

4
00:00:09,510 --> 00:00:15,060
And I would want to have the card items right where each and every time we do something with our card

5
00:00:15,450 --> 00:00:21,090
whether that's remove the item or add more amount then of course it's gonna be displayed of how many

6
00:00:21,090 --> 00:00:25,100
items we have in the card currently we're just displaying the link.

7
00:00:25,230 --> 00:00:31,230
And that's where we're gonna head over to our Navarre which is within the header and then we're going

8
00:00:31,230 --> 00:00:35,110
to import a component with a value of a log in.

9
00:00:35,150 --> 00:00:35,670
Oh I'm sorry.

10
00:00:35,670 --> 00:00:36,960
No I'm not logging link.

11
00:00:37,020 --> 00:00:38,770
We're going to look for the card link.

12
00:00:38,790 --> 00:00:39,910
My apologies.

13
00:00:39,990 --> 00:00:42,900
Logging link is going to be for logging functionality.

14
00:00:42,900 --> 00:00:48,480
The cart Link is gonna be displaying how many times we haven't a card because like I said currently

15
00:00:48,480 --> 00:00:51,470
we only have a link to a card page.

16
00:00:51,870 --> 00:00:53,490
So let's change that around.

17
00:00:53,760 --> 00:00:54,830
Let's import.

18
00:00:54,930 --> 00:00:58,960
Now again we're looking for cart link.

19
00:00:59,000 --> 00:01:04,740
Well that is the name of our component and then it is sitting within the cart folder.

20
00:01:04,740 --> 00:01:08,320
So within the cart folder we're looking for the cart link component.

21
00:01:08,540 --> 00:01:12,480
And once we have the component we're going to flip this around.

22
00:01:12,600 --> 00:01:14,600
It's not going to be a list item anymore.

23
00:01:14,880 --> 00:01:18,830
We're just going to have a cart look like.

24
00:01:18,840 --> 00:01:24,840
So let's close out the component and currently of course we're gonna have a hello from Cartland because

25
00:01:24,840 --> 00:01:26,960
we haven't set up anything within the cart link.

26
00:01:27,240 --> 00:01:32,140
So we're going to head over back to cart link and we're going to import first a link from reactive order

27
00:01:32,150 --> 00:01:32,590
down.

28
00:01:33,060 --> 00:01:37,420
So let's look for a link from react road or none.

29
00:01:37,900 --> 00:01:38,560
OK.

30
00:01:38,580 --> 00:01:39,390
Awesome.

31
00:01:39,390 --> 00:01:42,930
And then we're going to look for the cart context because the cart items.

32
00:01:42,930 --> 00:01:47,730
So the amount of items that haven't occurred are obviously within the cart contact and we're going to

33
00:01:47,730 --> 00:01:48,150
import.

34
00:01:48,150 --> 00:01:55,180
Cart are context then obviously that is coming from where.

35
00:01:55,180 --> 00:01:56,750
Well from our cart.

36
00:01:56,860 --> 00:02:01,950
So let's look for context and then within a context we're looking for the cart.

37
00:02:01,960 --> 00:02:06,340
Jess and then also of course we would need around the use context.

38
00:02:06,430 --> 00:02:11,500
So in order to access our cart items we're gonna have to use used context.

39
00:02:11,800 --> 00:02:13,330
So first let's destructor them.

40
00:02:13,330 --> 00:02:22,210
So cart items and we're structuring from react then we have use context and then we just need to provide

41
00:02:22,300 --> 00:02:28,270
a cart context once we have access to the cart items we're just gonna rewrite a return a bit differently

42
00:02:28,730 --> 00:02:37,540
where we're gonna say that we're returning a day of with a class name of cart link cart link Carne trainer

43
00:02:37,980 --> 00:02:44,410
like so and then within a day we're gonna have first a link which is going to navigate to a cart page.

44
00:02:44,410 --> 00:02:47,450
So that part is going to stay exactly the same.

45
00:02:47,460 --> 00:02:52,300
So we're navigating to a cart then the text is going to be cart within the link.

46
00:02:52,300 --> 00:02:57,280
And lastly there's gonna be a span that shows how many items we have this plan is going to have a class

47
00:02:57,280 --> 00:03:06,560
of cart link and we're looking for total total online we're going to access our cart items.

48
00:03:06,610 --> 00:03:12,850
So let's make sure we access cart items variable in the moment we say that now we're going to have a

49
00:03:12,850 --> 00:03:19,810
logging link and right next to it we have a cart link and as I'm increasing the items course my items

50
00:03:19,870 --> 00:03:26,730
within the cart link are also gonna crease if I'm gonna add more products then also my amount is going

51
00:03:26,730 --> 00:03:27,320
to go up.

52
00:03:27,320 --> 00:03:30,760
So let me add this guy and now I have nine items in the cart.