1
00:00:00,330 --> 00:00:06,660
And while we're still on topic in the current context, I would want to set up my function, add to

2
00:00:06,660 --> 00:00:09,880
cart now remember where we invoke this function.

3
00:00:10,260 --> 00:00:13,000
I'm not only in single product.

4
00:00:13,290 --> 00:00:19,590
So if you navigate into a single product, remember, we have that add to cart, which just never gets

5
00:00:19,590 --> 00:00:20,400
to the cart page.

6
00:00:20,640 --> 00:00:23,190
And of course, this is where we'll add that functionality.

7
00:00:23,880 --> 00:00:25,070
Now, here's the thing.

8
00:00:25,080 --> 00:00:34,460
Since my API has that property of stock, since I'm checking how many items I am going to stock, there

9
00:00:34,470 --> 00:00:37,200
is going to be more functionality to this add to cart function.

10
00:00:37,440 --> 00:00:42,540
And normally I just grab the idea, I just find the product and I just add it to the card.

11
00:00:43,110 --> 00:00:49,650
But since we always, always want to double check with that stock, since this functionality is a little

12
00:00:49,650 --> 00:00:54,060
bit more complicated in this add to cart will have to pass in more values.

13
00:00:54,390 --> 00:00:59,880
So if you have watched my previous e-commerce, you know that we simply grab the idea and we were in

14
00:00:59,880 --> 00:01:01,680
good shape in this case.

15
00:01:01,680 --> 00:01:09,000
There's going to be more data coming in because we always, always want to double check our values to

16
00:01:09,000 --> 00:01:15,540
our stock because I don't want the amount to be bigger than the amount of items I have in a stock.

17
00:01:15,900 --> 00:01:19,350
So say here, add to cart.

18
00:01:20,400 --> 00:01:28,650
And we have gone to court function and all right away, pass it down just so I don't forget about it

19
00:01:29,160 --> 00:01:34,340
and I'll say at court and in here we'll be looking for the ID.

20
00:01:34,800 --> 00:01:39,540
And remember, we still need to go back to the single product and pass those things in and of course,

21
00:01:39,540 --> 00:01:40,320
invoke the function.

22
00:01:40,500 --> 00:01:46,680
It's there and we're going to go with color amount and then the product.

23
00:01:47,070 --> 00:01:50,770
So we're passing in four things into this function.

24
00:01:51,120 --> 00:01:56,070
Now, as far as the functionality where we'll dispatch an action that is coming from my actions, jazz

25
00:01:56,250 --> 00:02:05,100
and the action type is ad on the score to card and then in the payload that will pass in all of our

26
00:02:05,100 --> 00:02:08,010
values that are coming as parameters.

27
00:02:08,340 --> 00:02:18,090
So passing the color amount amount and the product that I'm using, the six thing where I don't need

28
00:02:18,090 --> 00:02:21,630
to set them equal to each other if the names match.

29
00:02:21,960 --> 00:02:25,950
So save and I would want to go back to the single product.

30
00:02:26,740 --> 00:02:33,220
And of course, first I would want to get my function and then I would want to pass these values down

31
00:02:33,520 --> 00:02:36,990
and keep in mind that the moment, of course, will set up everything.

32
00:02:37,180 --> 00:02:41,970
We also need to worry about the coproducer, but we'll do that at the very, very end.

33
00:02:42,310 --> 00:02:49,630
So in the single court or I'm sorry, in the single product once navigated back there, remember, we

34
00:02:49,630 --> 00:02:52,810
were not done, even though we're nicely set up everything.

35
00:02:53,020 --> 00:02:54,370
And you know what, my apologies.

36
00:02:54,370 --> 00:02:55,720
Not in a single product.

37
00:02:55,930 --> 00:02:57,840
Single product was good, actually.

38
00:02:57,850 --> 00:02:59,860
We need to do that in the apple cart.

39
00:03:00,250 --> 00:03:00,970
My apologies.

40
00:03:00,970 --> 00:03:04,270
I forgot that we set up everything in the component.

41
00:03:04,630 --> 00:03:07,870
So my bad not single product false alert.

42
00:03:08,260 --> 00:03:12,520
We're going to add to cart component.

43
00:03:13,790 --> 00:03:21,380
And we already importing used car context, so we already have access to the context and below or above

44
00:03:21,380 --> 00:03:23,130
the product doesn't really matter.

45
00:03:23,510 --> 00:03:31,100
I would want to grab my ATM card function from use card context so we go with CONSED and then add to

46
00:03:31,100 --> 00:03:31,910
cart function.

47
00:03:33,150 --> 00:03:42,840
By the way, naming is not correct here, I need to go to court and not all be equal two years and minecart

48
00:03:43,230 --> 00:03:44,630
and of course the context.

49
00:03:45,060 --> 00:03:47,940
So we save it and then we'll scroll down.

50
00:03:47,940 --> 00:03:55,620
And of course, once we click on the button at the court, I would want to pass in those values.

51
00:03:55,950 --> 00:03:56,720
So let's do it.

52
00:03:57,190 --> 00:04:01,650
We're going to scroll down and then I have to card button.

53
00:04:02,100 --> 00:04:07,450
And now, of course, our two want to set up my own click and invoke my add to cart.

54
00:04:07,480 --> 00:04:13,260
Now, in this case, I do want to set up the arrow function because we'll have to pass in the arguments.

55
00:04:13,650 --> 00:04:15,690
So let's go with Add to CART.

56
00:04:15,690 --> 00:04:20,580
And then I remember what values we were looking for in the card context.

57
00:04:20,940 --> 00:04:24,850
I would want to get the ID, I would want to get the color.

58
00:04:25,050 --> 00:04:26,720
Now this is the main color.

59
00:04:26,770 --> 00:04:31,470
Remember in add card we were setting up these values in the state.

60
00:04:31,740 --> 00:04:33,210
We had the main color.

61
00:04:33,810 --> 00:04:40,050
So the color that the user picked as well as the amount so amount of items.

62
00:04:40,060 --> 00:04:41,480
And then of course we were checking.

63
00:04:41,760 --> 00:04:45,030
So it is not bigger than the stock.

64
00:04:45,450 --> 00:04:53,070
So in the card context, we are looking for ID, we're looking for that main color and the amount of

65
00:04:53,070 --> 00:04:54,930
items we would want to add to the card.

66
00:04:55,290 --> 00:04:56,550
So always back down.

67
00:04:57,760 --> 00:05:03,850
And nothing serious, but where I have to court, first of all, I would want to pass in the area and

68
00:05:03,850 --> 00:05:10,420
remember, we are the structuring that already from the product, so that still stays the same.

69
00:05:10,690 --> 00:05:13,810
Then I would want to pass in the main color again.

70
00:05:13,810 --> 00:05:17,350
That's the color that I would want to add to my cart and the amount.

71
00:05:17,380 --> 00:05:19,170
So these are two state values.

72
00:05:19,540 --> 00:05:27,130
And lastly, since I always would want to double check with my stock values, I also need to pass in

73
00:05:27,130 --> 00:05:27,750
the product.

74
00:05:28,300 --> 00:05:33,050
So in the context, remember, ID color amount and product.

75
00:05:33,520 --> 00:05:40,690
So those are the things, of course, that we're passing in, in the add to CART Jayesh component and

76
00:05:40,690 --> 00:05:42,360
we should be in good shape.

77
00:05:42,370 --> 00:05:48,220
We need to go to court producer and of course handle that action.