1
00:00:03,000 --> 00:00:06,250
Our cart page is now displaying all the items,

2
00:00:06,250 --> 00:00:07,875
including their totals.

3
00:00:08,445 --> 00:00:10,783
The next step is to allow the user

4
00:00:10,783 --> 00:00:12,639
to add an item to the cart.

5
00:00:13,207 --> 00:00:16,251
In each product page we want to display a button

6
00:00:16,251 --> 00:00:19,294
that lets the user add this product to the cart.

7
00:00:19,857 --> 00:00:22,156
Now, to add an item to the cart

8
00:00:22,156 --> 00:00:23,712
using the backend API

9
00:00:24,286 --> 00:00:26,224
we need to make a POST request

10
00:00:26,224 --> 00:00:28,484
like this one that we tried before.

11
00:00:29,048 --> 00:00:32,139
As usual, this request must be authenticated,

12
00:00:32,139 --> 00:00:34,886
that is we must pass the JSON web token,

13
00:00:34,886 --> 00:00:37,701
so we'll need to do that in an API route.

14
00:00:38,338 --> 00:00:40,335
Rather than adding a new path,

15
00:00:40,335 --> 00:00:42,998
we could use this existing "cart" route.

16
00:00:42,998 --> 00:00:44,728
At the moment this handler

17
00:00:44,728 --> 00:00:46,259
returns the cart items,

18
00:00:46,259 --> 00:00:48,855
which is appropriate for a GET request.

19
00:00:48,855 --> 00:00:51,184
But we could do something different

20
00:00:51,184 --> 00:00:52,715
if it's a POST request.

21
00:00:52,715 --> 00:00:55,777
In that case we could add an item to the cart.

22
00:00:55,777 --> 00:00:58,505
This is something we haven't done before,

23
00:00:58,505 --> 00:01:00,901
so let me show you one way to do it.

24
00:01:02,000 --> 00:01:04,357
We still want a "handleCart" function,

25
00:01:04,357 --> 00:01:07,085
that will be the entry point for this route.

26
00:01:07,647 --> 00:01:10,703
But we can rename the existing handler

27
00:01:10,703 --> 00:01:12,230
to "handleGetCart",

28
00:01:12,810 --> 00:01:14,335
and then, in the entry point,

29
00:01:14,335 --> 00:01:16,069
we can look at the request method

30
00:01:17,210 --> 00:01:20,570
to decide exactly which handler function to execute.

31
00:01:21,070 --> 00:01:23,782
If it's a "GET" request then we want to call

32
00:01:23,782 --> 00:01:26,124
our existing "handleGetCart" function,

33
00:01:27,271 --> 00:01:29,841
passing the request and response objects,

34
00:01:29,841 --> 00:01:30,719
and stop here.

35
00:01:31,281 --> 00:01:32,887
But if it's a "POST" request

36
00:01:34,281 --> 00:01:37,120
then we can execute a different handler,

37
00:01:37,120 --> 00:01:39,676
that we could call "handlePostCart".

38
00:01:40,614 --> 00:01:42,554
We can also add a "default" case.

39
00:01:43,714 --> 00:01:45,938
if it's neither "GET" nor "POST'

40
00:01:45,938 --> 00:01:48,371
then we should return a 405 status,

41
00:01:48,371 --> 00:01:50,595
that means "Method Not Allowed".

42
00:01:51,233 --> 00:01:53,590
Ok. So at this point we need to write

43
00:01:53,590 --> 00:01:55,502
the "handlePostCart" function,

44
00:01:55,502 --> 00:01:58,177
and this is your challenge for this video.

45
00:01:58,804 --> 00:02:00,768
Write a handler function that

46
00:02:00,768 --> 00:02:03,884
extract the item details from the request body

47
00:02:04,451 --> 00:02:08,094
and calls the Strapi server, adding a new cart item.

48
00:02:08,594 --> 00:02:10,550
Let me show you how this should work

49
00:02:10,550 --> 00:02:12,017
once you've implemented it.

50
00:02:12,572 --> 00:02:14,928
Note that in Strapi I still have

51
00:02:14,928 --> 00:02:17,579
these two cart items for user Alice.

52
00:02:18,152 --> 00:02:20,888
Now, to test the request to the new API route

53
00:02:20,888 --> 00:02:22,772
we can use the browser console.

54
00:02:23,332 --> 00:02:25,372
We want to make a POST request

55
00:02:25,372 --> 00:02:27,071
to the "/api/cart" route,

56
00:02:27,071 --> 00:02:29,858
sending a JSON object in the request body

57
00:02:29,858 --> 00:02:32,508
with the "productId" and the "quantity"

58
00:02:32,508 --> 00:02:34,140
to be added to the cart.

59
00:02:34,912 --> 00:02:36,410
So you can run this code

60
00:02:36,410 --> 00:02:38,159
to test your implementation.

61
00:02:38,722 --> 00:02:40,393
We're not really interested

62
00:02:40,393 --> 00:02:42,559
in what the response body contains,

63
00:02:42,559 --> 00:02:45,035
so in your handler you can simply return

64
00:02:45,035 --> 00:02:47,945
an empty JSON object, like you see logged here.

65
00:02:48,631 --> 00:02:50,447
The important thing is that

66
00:02:50,447 --> 00:02:53,944
making that POST request should add a new cart item.

67
00:02:54,512 --> 00:02:58,023
And in fact we can see three items in the list now.

68
00:02:58,023 --> 00:03:01,120
The new one has "Snake Plant" as the product,

69
00:03:01,120 --> 00:03:03,599
which corresponds to "productId: 3".

70
00:03:04,236 --> 00:03:07,793
So you should have everything you need

71
00:03:07,793 --> 00:03:12,191
to implement the "handlePostCart" function now.

72
00:03:12,784 --> 00:03:15,693
All right. Here's my "handlePostCart" function.

73
00:03:16,193 --> 00:03:19,113
As usual it first checks that the cookies

74
00:03:19,113 --> 00:03:21,035
include the JSON web token.

75
00:03:21,606 --> 00:03:24,913
But then it extracts the "productId" and "quantity"

76
00:03:24,913 --> 00:03:26,339
from the request body.

77
00:03:26,903 --> 00:03:30,387
It makes a POST request to the "/cart-items"

78
00:03:30,387 --> 00:03:31,654
path in the CMS.

79
00:03:32,234 --> 00:03:34,354
And the object sent to Strapi

80
00:03:34,354 --> 00:03:37,936
contains the "product" and "quantity" properties.

81
00:03:37,936 --> 00:03:40,934
Note that this handler expects the client

82
00:03:40,934 --> 00:03:42,543
to send a "productId",

83
00:03:42,543 --> 00:03:45,175
but Strapi expects the same property

84
00:03:45,175 --> 00:03:47,222
to be called just "product".

85
00:03:47,222 --> 00:03:50,878
I preferred calling it "productId" in our own API,

86
00:03:50,878 --> 00:03:54,095
because that makes it clear that it's an ID,

87
00:03:54,095 --> 00:03:55,996
not a full product object.

88
00:03:57,081 --> 00:03:59,265
Anyway, if everything goes well

89
00:03:59,265 --> 00:04:02,859
we return a 200 response with an empty JSON object.

90
00:04:03,430 --> 00:04:05,075
While it there's an error

91
00:04:05,075 --> 00:04:07,510
it returns 401 like we did elsewhere,

92
00:04:07,510 --> 00:04:10,735
on the assumption that the token must be invalid.

93
00:04:11,367 --> 00:04:14,147
So this is a possible implementation

94
00:04:14,147 --> 00:04:16,233
for handling a POST request

95
00:04:16,233 --> 00:04:18,164
to the "/api/cart" route.