1
00:00:00,440 --> 00:00:05,630
In this video, we see like, oh, when we click on add to basket, the items are getting updated,

2
00:00:05,840 --> 00:00:09,740
but we can't see the products that they added to the data, so it's out to retrieve them.

3
00:00:10,670 --> 00:00:13,610
So for us, basically what we do is we will want to check on Dargis.

4
00:00:15,100 --> 00:00:15,640
And yet.

5
00:00:18,140 --> 00:00:25,580
Like, we have to map, like we have to import the dispatch and state using the state provided you state

6
00:00:25,580 --> 00:00:30,650
value and then map through all the products that are present in that it so that if there are three products,

7
00:00:30,650 --> 00:00:33,050
we want three checkout products to get rendered.

8
00:00:33,130 --> 00:00:36,500
If if the basket has four items, then we want Ford to get rendered.

9
00:00:36,800 --> 00:00:37,580
So how to do that?

10
00:00:38,030 --> 00:00:39,350
I'll be deleting all of them.

11
00:00:41,680 --> 00:00:42,430
And then here it is.

12
00:00:42,670 --> 00:00:49,450
So since I'll be using the map function that JavaScript provides me so that we can map through each

13
00:00:49,450 --> 00:00:52,390
and every item of data and we're creating a JavaScript object.

14
00:00:54,610 --> 00:00:55,750
Basket dot map.

15
00:00:56,180 --> 00:00:57,610
So use this basket.

16
00:00:58,880 --> 00:01:01,430
We have two important savvy importing now.

17
00:01:11,290 --> 00:01:14,590
I've been wanting to use state value from state provided.

18
00:01:22,340 --> 00:01:26,750
So long as they import this now, I can use the state and dispatch.

19
00:01:32,560 --> 00:01:36,970
To get my basket of debt restructuring and then dispatch.

20
00:01:42,140 --> 00:01:44,080
So now I've set up my data.

21
00:01:44,780 --> 00:01:50,690
You know, I can use this like I can use the basket and call the map function.

22
00:01:53,000 --> 00:01:55,850
So what this does it, it will look through each and every item.

23
00:02:03,440 --> 00:02:06,230
Can we look through each and every item and then we can.

24
00:02:10,030 --> 00:02:11,140
Quality product.

25
00:02:16,550 --> 00:02:17,840
With these props.

26
00:02:19,870 --> 00:02:21,070
So we can send the.

27
00:02:22,750 --> 00:02:24,300
Ideas items are tidy.

28
00:02:27,960 --> 00:02:30,240
When we have any problems, I know we lose equals to.

29
00:02:33,140 --> 00:02:34,700
So it will be item not really.

30
00:02:43,120 --> 00:02:46,570
So the JavaScript object, it should be inside calibrations.

31
00:02:49,250 --> 00:02:54,710
So that should mean there shouldn't be any Comisar columns when we are dealing with the attributes of

32
00:02:54,720 --> 00:02:55,850
the custom component.

33
00:03:01,210 --> 00:03:02,590
It should be item, not Typekit.

34
00:03:06,440 --> 00:03:07,970
Imagine the item, not the image.

35
00:03:12,660 --> 00:03:14,880
And then price will be item the price.

36
00:03:19,740 --> 00:03:21,210
I'm waiting, all right, I'm not ready.

37
00:03:26,580 --> 00:03:30,690
So once we send the props like, for example, of the bassinet for items, it will look through four

38
00:03:30,690 --> 00:03:36,300
times and then we'll get four checkout products with the dynamic data, so we'll check out the feature.

39
00:03:36,300 --> 00:03:38,700
Is it OK or not to refresh it?

40
00:03:48,650 --> 00:03:50,570
Farai, I've done everything OK.

41
00:03:51,050 --> 00:03:52,970
There is no way it.

42
00:03:54,020 --> 00:03:55,430
Using material like code.

43
00:04:02,250 --> 00:04:07,500
So in the checkout, we are inducing any material uttered by linguists.

44
00:04:09,730 --> 00:04:10,110
That.

45
00:04:14,260 --> 00:04:19,240
One state official, I'll add these items to the basket when I go to my checkout bench, you can see

46
00:04:19,960 --> 00:04:24,280
still I'm getting the same items like I'm getting.

47
00:04:24,770 --> 00:04:29,380
Same item, but like I'm getting the number of items, but I'm getting the same item rather than getting

48
00:04:29,380 --> 00:04:31,780
different items so we can see what happened there.

49
00:04:35,580 --> 00:04:41,890
So basically, there is inside the checkout, yes, we are still using their custom like the hot potato.

50
00:04:42,390 --> 00:04:44,700
So we have to first restructure the it.

51
00:04:48,910 --> 00:04:56,080
So I'll be doing I like as I in fact check out this have sent that data through props and I'll have

52
00:04:56,080 --> 00:05:00,700
to get hold of these props, so I'll be doing that in subsequent charges.

53
00:05:03,400 --> 00:05:05,380
I should get an image.

54
00:05:11,880 --> 00:05:12,300
Pretty.

55
00:05:15,170 --> 00:05:17,510
So I'm saying this like I can use it instead of.

56
00:05:20,540 --> 00:05:21,080
Sort.

57
00:05:22,290 --> 00:05:24,030
I can send the image.

58
00:05:26,080 --> 00:05:28,390
Instead of this, I can see in the title.

59
00:05:32,190 --> 00:05:33,230
It will be Price.

60
00:05:38,790 --> 00:05:41,880
I'm here like it would be the same process that we waited for the.

61
00:05:43,610 --> 00:05:49,880
A product digesting photocopy that instead turned on just have basically created an added.

62
00:05:53,380 --> 00:05:54,280
So we can use that.

63
00:06:11,820 --> 00:06:13,440
Oh, no, need newspapers over here.

64
00:06:17,490 --> 00:06:17,910
So, yeah.

65
00:06:24,990 --> 00:06:25,980
So as you can see.

66
00:06:27,410 --> 00:06:33,560
I refreshed the page and then asked of us, add items to my back that this one, I'll add this renders

67
00:06:34,460 --> 00:06:38,600
and then now let us see whether the products that have been so yeah.

68
00:06:38,810 --> 00:06:41,900
As you can see, we have begun to see the products that we added to that car.

69
00:06:42,920 --> 00:06:44,780
I refreshed and again added a few products.

70
00:06:46,500 --> 00:06:49,020
This this this this, this.

71
00:06:49,590 --> 00:06:51,490
There are three of them and then one and two.

72
00:06:52,200 --> 00:06:52,900
Yeah, that's four.

73
00:06:52,950 --> 00:06:56,370
So now we have updated that part and also did add to cart functionality.

74
00:06:56,640 --> 00:07:02,040
So now we want to update the prize over here and also remove some card functionality so we can see how

75
00:07:02,040 --> 00:07:03,310
to implement that thing.

76
00:07:06,590 --> 00:07:09,260
So, yeah, so first, we have to work to stop certain drugs.

77
00:07:12,330 --> 00:07:17,040
The basic step is to import you start valuing this up separately on this.

78
00:07:21,390 --> 00:07:22,230
I import the.

79
00:07:25,990 --> 00:07:27,040
You state value.

80
00:07:44,610 --> 00:07:47,300
Now, how to get that total basket total.

81
00:07:47,850 --> 00:07:52,790
So I have said that I will implement the old application level coding and reduce the dodges.

82
00:07:53,100 --> 00:07:54,390
So then the self-test section.

83
00:07:54,540 --> 00:08:00,840
So when you get that total basket already, we will get that total amount that the basket contains.

84
00:08:01,050 --> 00:08:01,890
So how to do that?

85
00:08:06,050 --> 00:08:07,550
So we are basically export.

86
00:08:10,270 --> 00:08:14,780
Gift basket total will be the object name, no concern, no.

87
00:08:16,610 --> 00:08:19,430
So actually, it's going to be have the to go through the basket.

88
00:08:24,870 --> 00:08:25,950
So what we have here today.

89
00:08:26,880 --> 00:08:28,470
We have to return the basket.

90
00:08:29,760 --> 00:08:33,750
Total amount of prize elephant in the basket, the combination of all the products.

91
00:08:33,990 --> 00:08:35,130
So this is the way to do that.

92
00:09:00,210 --> 00:09:07,290
So what this plane of code does is that this reduced function and have two arguments, one is that is

93
00:09:07,290 --> 00:09:12,870
the accumulator and then the current the current item, so the accumulator keeps on increasing.

94
00:09:12,870 --> 00:09:15,150
So as you can see, item that price plus amount.

95
00:09:15,450 --> 00:09:20,370
So we had incrementing that I want every time with item price and this will work as a second parameter.

96
00:09:20,820 --> 00:09:24,000
So here like the portion maximal for any error handling like that.

97
00:09:24,510 --> 00:09:26,520
So this is how we'll get the total basket.

98
00:09:26,910 --> 00:09:31,200
So instead, this operator largesse will also be in particular, get total basket.

99
00:09:35,520 --> 00:09:36,300
But I'll import.

100
00:09:38,980 --> 00:09:39,280
Get.

101
00:09:40,990 --> 00:09:41,980
Basketball.

102
00:09:45,530 --> 00:09:46,270
From producer.

103
00:09:50,590 --> 00:09:53,110
So once we get that like now, we can initiate the.

104
00:09:56,250 --> 00:09:58,920
We're going to get the whole of the basket that is in order to let.

105
00:10:01,090 --> 00:10:02,490
And the dispatch function.

106
00:10:17,290 --> 00:10:17,490
Yeah.

107
00:10:20,110 --> 00:10:21,310
So I like that.

108
00:10:21,430 --> 00:10:21,760
OK.

109
00:10:21,980 --> 00:10:28,290
We are we are using this instead of the written function we have to use instead to function so that

110
00:10:28,300 --> 00:10:29,260
we can consolidate it.

111
00:10:32,330 --> 00:10:38,990
So you're instead of value we want in terms of, you know, we want the total basket value, right?

112
00:10:38,990 --> 00:10:39,290
So.

113
00:10:41,570 --> 00:10:42,500
Getting basket.

114
00:10:45,010 --> 00:10:46,330
And then will be sending the Boston.

115
00:10:47,960 --> 00:10:50,910
So as you can see, over here it is.

116
00:10:50,960 --> 00:10:54,680
It needs our first argument of basket will be sending that.

117
00:10:57,930 --> 00:11:04,410
And also, the number of items like instead of zero items, we want the like the total value, right,

118
00:11:04,410 --> 00:11:04,710
so.

119
00:11:06,690 --> 00:11:08,640
He will be using instead of zero.

120
00:11:10,910 --> 00:11:11,860
But Scotland.

121
00:11:17,250 --> 00:11:18,510
And then they're going to be using the value.

122
00:11:23,070 --> 00:11:25,810
Value that is present in the props.

123
00:11:26,960 --> 00:11:29,330
So with this, we can see the changes.

124
00:11:30,570 --> 00:11:31,620
There's another one in.

125
00:11:35,170 --> 00:11:35,320
So.

126
00:11:36,820 --> 00:11:44,980
So I'll be hearing this one part of this thing and this and then TV, as you can open now, you can

127
00:11:44,980 --> 00:11:47,580
see like we are seeing four items and then the price already.

128
00:11:48,130 --> 00:11:52,210
If we go back and then add some more items like you can see the prize getting updated.

129
00:11:53,860 --> 00:12:00,400
So like this, we have completed the add to basket and also all the amount and then getting the number

130
00:12:00,400 --> 00:12:02,800
of items get update dynamically.

131
00:12:03,310 --> 00:12:07,210
So now in the next year to see how to implement the removal and basket functionality.

132
00:12:07,240 --> 00:12:12,700
So once we click on, remove some items over here, here and here, it should get updated.

133
00:12:12,940 --> 00:12:16,810
And also the in the data, the product should get deleted.

134
00:12:16,990 --> 00:12:17,950
I mean, see that in the next.