1
00:00:03,000 --> 00:00:06,811
We wrote an API handler for adding a new cart item.

2
00:00:07,310 --> 00:00:10,637
Now we want to create the user interface to allow

3
00:00:10,637 --> 00:00:13,693
our customers to add a product to their cart.

4
00:00:14,260 --> 00:00:16,589
As I mentioned a few times before,

5
00:00:16,589 --> 00:00:19,055
on each product page we want to show

6
00:00:19,055 --> 00:00:21,109
a button saying "Add to cart".

7
00:00:21,109 --> 00:00:24,602
But we also want to let the user select a quantity,

8
00:00:24,602 --> 00:00:26,930
so we could display an input field

9
00:00:26,930 --> 00:00:28,574
where to enter a number.

10
00:00:29,417 --> 00:00:32,212
Incidentally, at this point we can delete

11
00:00:32,212 --> 00:00:34,529
all the cart items that we created

12
00:00:35,097 --> 00:00:36,976
just to have some initial data

13
00:00:36,976 --> 00:00:38,729
to display in the cart page.

14
00:00:39,292 --> 00:00:42,468
The user will be able to add items from our website.

15
00:00:42,968 --> 00:00:44,600
If we look at the code,

16
00:00:44,600 --> 00:00:47,368
you'll need to modify the Product page.

17
00:00:47,368 --> 00:00:50,846
And I suggest creating a separate React component

18
00:00:50,846 --> 00:00:52,976
for the "Add to cart" feature,

19
00:00:52,976 --> 00:00:55,957
because we need to combine a numeric field

20
00:00:55,957 --> 00:00:57,093
for the quantity

21
00:00:57,093 --> 00:00:59,932
with a button to submit the API request.

22
00:00:59,932 --> 00:01:03,197
I would call this component "AddToCartWidget".

23
00:01:03,197 --> 00:01:06,320
Also, you should only display this component

24
00:01:06,320 --> 00:01:08,095
if the user is signed in.

25
00:01:09,234 --> 00:01:11,307
Let me show you what the page should look like.

26
00:01:11,807 --> 00:01:13,472
Here's the quantity field

27
00:01:13,472 --> 00:01:15,405
and the "Add to cart" button.

28
00:01:15,405 --> 00:01:18,137
Now, for this challenge you don't need to

29
00:01:18,137 --> 00:01:20,136
actually make the API request.

30
00:01:20,136 --> 00:01:22,335
We'll do that in a separate step.

31
00:01:23,102 --> 00:01:25,654
For now, when the user clicks the button

32
00:01:25,654 --> 00:01:28,270
we just want log a message to the console

33
00:01:28,270 --> 00:01:31,014
printing the "productId" and the "quantity"

34
00:01:31,014 --> 00:01:33,120
that should be added to the cart.

35
00:01:33,812 --> 00:01:35,502
The quantity field should be

36
00:01:35,502 --> 00:01:37,011
a numeric "input" element

37
00:01:37,572 --> 00:01:40,230
so that the user can easily change its value.

38
00:01:40,730 --> 00:01:42,886
And you'll need to keep track of that value

39
00:01:42,886 --> 00:01:44,039
in the component state,

40
00:01:44,590 --> 00:01:47,114
so you can log it when the button is clicked.

41
00:01:47,614 --> 00:01:51,536
That's your challenge for this video.

42
00:01:51,536 --> 00:01:53,550
Go ahead and do it!

43
00:01:54,156 --> 00:01:56,771
Ok, it's time to show you my solution.

44
00:01:56,771 --> 00:01:59,250
I have created a new React component

45
00:01:59,250 --> 00:02:00,971
called "AddToCartWidget".

46
00:02:01,609 --> 00:02:04,912
Here I define a state variable for the quantity,

47
00:02:04,912 --> 00:02:06,771
with an initial value of 1.

48
00:02:07,340 --> 00:02:10,115
And this is bound to an "input" element

49
00:02:10,115 --> 00:02:11,325
of type "number".

50
00:02:11,325 --> 00:02:14,670
Note that the element value is always a string,

51
00:02:14,670 --> 00:02:17,162
but the state variable is a number,

52
00:02:17,162 --> 00:02:20,507
so we need to convert the value back and forth.

53
00:02:21,292 --> 00:02:24,229
Then this component also displays a button,

54
00:02:24,229 --> 00:02:25,869
that says "Add to cart".

55
00:02:26,438 --> 00:02:29,164
And this is using our existing Button component,

56
00:02:29,664 --> 00:02:32,325
but I had to add the "onClick" prop here,

57
00:02:32,825 --> 00:02:34,547
because we didn't need it before.

58
00:02:35,047 --> 00:02:37,207
Now, when the user clicks the button

59
00:02:37,207 --> 00:02:38,647
we execute this function

60
00:02:39,207 --> 00:02:41,353
where for now I'm simply logging

61
00:02:41,353 --> 00:02:43,902
the "productId" and "quantity" values.

62
00:02:44,470 --> 00:02:46,663
Note that we expect the "productId"

63
00:02:46,663 --> 00:02:49,420
to be passed in the props to this component.

64
00:02:49,983 --> 00:02:52,291
In fact, if we go and look at the ProductPage,

65
00:02:52,791 --> 00:02:55,657
here I'm first calling our "useUser" hook

66
00:02:55,657 --> 00:02:57,335
to get the user details,

67
00:02:57,905 --> 00:03:00,269
because we only want to display

68
00:03:00,269 --> 00:03:03,243
the "AddToCartWidget" if "user" is set.

69
00:03:03,820 --> 00:03:06,628
And when displaying the AddToCartWidget

70
00:03:06,628 --> 00:03:09,797
I'm passing the "product.id" down as a prop.

71
00:03:10,370 --> 00:03:13,237
That's it. In the next video we'll take care

72
00:03:13,237 --> 00:03:15,518
of actually making the API request.