1
00:00:03,000 --> 00:00:06,476
Now that we've seen how the Cart Items API works,

2
00:00:06,476 --> 00:00:08,463
your first challenge will be

3
00:00:08,463 --> 00:00:10,592
to create a shopping cart page

4
00:00:10,592 --> 00:00:12,437
that displays these items.

5
00:00:12,437 --> 00:00:16,056
And by the way make sure you have these two entries

6
00:00:16,056 --> 00:00:18,184
in your Cart Items collection,

7
00:00:18,184 --> 00:00:20,313
with exactly the same details.

8
00:00:20,313 --> 00:00:22,938
The "Ids" can be different of course,

9
00:00:22,938 --> 00:00:25,280
because those are auto-generated,

10
00:00:25,280 --> 00:00:28,757
but if you enter the same products and quantities

11
00:00:28,757 --> 00:00:32,589
then it will be easier for you to compare your results

12
00:00:32,589 --> 00:00:35,285
with what I'll show you in the videos.

13
00:00:36,566 --> 00:00:40,088
So, as I mentioned, the task for this challenge

14
00:00:40,088 --> 00:00:43,011
is to add a "Cart" page to our website.

15
00:00:43,585 --> 00:00:46,226
We want to show a link to the Cart page

16
00:00:46,226 --> 00:00:47,513
here in the NavBar,

17
00:00:48,080 --> 00:00:50,212
and clicking that link should take you

18
00:00:50,212 --> 00:00:51,334
to the "/cart" path,

19
00:00:52,113 --> 00:00:54,086
that currently doesn't exist yet.

20
00:00:54,586 --> 00:00:58,342
But it is your job now to go and add that new page

21
00:00:58,342 --> 00:01:01,195
at the same level of the "index" page.

22
00:01:01,770 --> 00:01:04,331
And you also need to add a link to it

23
00:01:04,331 --> 00:01:05,992
in the NavBar component,

24
00:01:05,992 --> 00:01:08,622
but only if the user is authenticated,

25
00:01:08,622 --> 00:01:11,460
because you cannot display the cart items

26
00:01:11,460 --> 00:01:13,813
if you don't know who the user is.

27
00:01:14,589 --> 00:01:16,678
Once you've completed this challenge

28
00:01:16,678 --> 00:01:18,476
your app should look like this:

29
00:01:19,034 --> 00:01:21,426
you should have a "Cart" link in the NavBar

30
00:01:21,926 --> 00:01:23,393
and if you click on it

31
00:01:23,393 --> 00:01:25,795
it should take you to the Cart page,

32
00:01:25,795 --> 00:01:29,130
that initially will just show "Cart" as the title.

33
00:01:29,130 --> 00:01:31,599
We'll add the rest of the page later.

34
00:01:31,599 --> 00:01:34,134
So it's a simple exercise to reinforce

35
00:01:34,134 --> 00:01:35,602
how to add a new page,

36
00:01:35,602 --> 00:01:37,069
and how to link to it.

37
00:01:37,969 --> 00:01:40,256
Please pause this video now

38
00:01:40,256 --> 00:01:42,458
and go and write the code.

39
00:01:42,458 --> 00:01:45,762
Then restart the video when you're done

40
00:01:45,762 --> 00:01:48,302
and I'll show you my solution.

41
00:01:49,057 --> 00:01:52,064
Ok. Hopefully you managed to complete the challenge.

42
00:01:52,564 --> 00:01:55,009
If you did so, you should now have

43
00:01:55,009 --> 00:01:57,239
a "cart.js" file under "pages",

44
00:01:57,810 --> 00:01:59,948
with a simple React component

45
00:01:59,948 --> 00:02:01,496
that looks like this.

46
00:02:01,496 --> 00:02:04,666
It's just using our shared "Page" component

47
00:02:04,666 --> 00:02:06,730
setting the title to "Cart".

48
00:02:07,451 --> 00:02:09,298
And then you should have modified

49
00:02:09,298 --> 00:02:10,473
the NavBar component,

50
00:02:11,027 --> 00:02:13,635
adding a link to the new "/cart" route.

51
00:02:14,135 --> 00:02:17,303
Of course this should use the "Link" component

52
00:02:17,303 --> 00:02:18,680
provided by Next.js.

53
00:02:19,248 --> 00:02:21,147
And this list item should be

54
00:02:21,147 --> 00:02:23,928
inside the fragment that's only displayed

55
00:02:23,928 --> 00:02:25,759
if the "user" is signed in.

56
00:02:25,759 --> 00:02:26,437
That's it.

57
00:02:26,437 --> 00:02:29,489
It was a simple challenge to get you started.

58
00:02:29,489 --> 00:02:31,862
In the next video we'll think about

59
00:02:31,862 --> 00:02:33,897
how to display the cart items.