1
00:00:00,150 --> 00:00:00,620
Perfect.

2
00:00:00,680 --> 00:00:07,410
We're done with our STOSZ component, and I would want to complete my single product by setting up the

3
00:00:07,710 --> 00:00:09,510
add to cart component.

4
00:00:09,990 --> 00:00:11,940
Now, I have to be honest with you.

5
00:00:11,950 --> 00:00:20,040
Normally when we're talking about the car, it is simply some kind of function that is in the cart context

6
00:00:20,040 --> 00:00:26,540
or in global context that just does the functionality where we just add a component or I'm sorry, add

7
00:00:26,640 --> 00:00:28,450
a product to a cart.

8
00:00:29,010 --> 00:00:34,210
Now, in this case, we have a separate component and then there's going to be even more components.

9
00:00:34,230 --> 00:00:34,600
Why?

10
00:00:35,040 --> 00:00:37,160
Well, because we have more functionality.

11
00:00:37,500 --> 00:00:43,950
So if we take a look at the proper add to cart, you'll see that we'll be able to pick which color we

12
00:00:43,950 --> 00:00:51,450
would want as well as the amount and I our want to control so the amount doesn't go more than the stock.

13
00:00:51,660 --> 00:00:56,700
So then this value is not more than how many items we have in stock.

14
00:00:57,120 --> 00:00:59,980
That's why we will be setting up a separate component.

15
00:01:00,250 --> 00:01:03,730
And like I said, there's going to be more functionality in there.

16
00:01:03,750 --> 00:01:09,560
So normally it's just a function that adds the item to the cart and we are in good shape.

17
00:01:10,360 --> 00:01:15,970
In this case, we do have more functionality, that's why we're setting up a separate component and

18
00:01:15,970 --> 00:01:18,830
I'm going to navigate back to my single product page.

19
00:01:19,130 --> 00:01:20,770
Again, let's go over the logic.

20
00:01:20,980 --> 00:01:28,490
So I only want to display my add to cart component if the items in stock are bigger than zero.

21
00:01:28,960 --> 00:01:32,570
So if I have some items to sell, then I would want to display the card.

22
00:01:32,650 --> 00:01:35,440
If not, then of course I'm not going to display.

23
00:01:35,530 --> 00:01:39,370
That's why I'm checking if the stock is bigger than zero and none of that is the case.

24
00:01:39,370 --> 00:01:44,260
I'm adding the add to cart component to my UI.

25
00:01:44,710 --> 00:01:47,410
Now what is missing in the add to cart?

26
00:01:47,410 --> 00:01:49,510
I would want to put in the whole product.

27
00:01:50,080 --> 00:01:55,810
So I'm not going to pass property by property, I'm just going to grab the whole thing so all the properties

28
00:01:56,050 --> 00:01:58,420
and pass it in a prop.

29
00:01:58,810 --> 00:01:59,340
So on here.

30
00:01:59,350 --> 00:01:59,800
All right.

31
00:01:59,800 --> 00:02:07,210
Product is equal to a product Monsarrat and you can probably already guess that we'll have to navigate

32
00:02:07,210 --> 00:02:07,960
to that component.

33
00:02:08,360 --> 00:02:13,710
So here in the add to cart component, first, let's take a look at the imports.

34
00:02:14,080 --> 00:02:18,070
So we start with react we have you state because there's going to be some local state.

35
00:02:18,370 --> 00:02:22,350
Of course we have styled since we will style this component as well.

36
00:02:22,660 --> 00:02:30,670
We have a link because once we click on Add to Cart, I would want to navigate to the car page and you

37
00:02:30,670 --> 00:02:35,140
can double check that, of course, in the complete application, which is going to be over here.

38
00:02:35,200 --> 00:02:39,630
Now, once you click on Add to Cart, you also navigate the cart page.

39
00:02:39,640 --> 00:02:41,140
That's why we have a component.

40
00:02:41,560 --> 00:02:50,080
We have this little icon if I check, because as we're clicking on the colors and of course, I have

41
00:02:50,080 --> 00:02:57,400
to open up the one that doesn't have add corruption and notice every color is going to have this effect

42
00:02:57,400 --> 00:02:58,050
check icon.

43
00:02:58,410 --> 00:03:00,730
I mean, the one that has been clicked on, of course.

44
00:03:01,090 --> 00:03:05,020
And then we have this used car context, which, of course, we'll set up later.

45
00:03:05,350 --> 00:03:10,150
But this is where the add to cart function is going to be coming from.

46
00:03:10,150 --> 00:03:15,840
Again, at the moment we don't have it, but eventually we are going to get it from used car context

47
00:03:16,150 --> 00:03:22,480
and then we have AMOLED buttons, because when it comes to these buttons, I also set them up in a separate

48
00:03:22,480 --> 00:03:30,610
component because I just thought that there's too much stuff already in the add to cart component and

49
00:03:30,610 --> 00:03:34,540
I'm going to start by structuring three things out of the product.

50
00:03:35,710 --> 00:03:42,580
I would want to get the ID, I would want to get the stock and I would want to get the colors in here,

51
00:03:42,700 --> 00:03:51,190
I'm going to go with Eddie Stark and of course, Colma colors and all of that is coming from the product

52
00:03:51,520 --> 00:03:54,620
that we're going to structure in the parameters.

53
00:03:54,790 --> 00:03:57,760
So that's the product that we are passing in.

54
00:03:58,150 --> 00:04:01,840
And there's going to be two state values, one for the amount.

55
00:04:02,140 --> 00:04:07,030
So as we're controlling the amount, of course there's going to be one state value and there's also

56
00:04:07,030 --> 00:04:10,140
going to be one for the colors because we need to understand that.

57
00:04:10,450 --> 00:04:13,850
And let me get the one that has maybe multiple kernels.

58
00:04:14,320 --> 00:04:15,850
Hopefully I'll be able to find it.

59
00:04:15,870 --> 00:04:19,090
And of course, again, I get the one that doesn't.

60
00:04:19,330 --> 00:04:23,440
And this one still doesn't seem to be this guy.

61
00:04:23,530 --> 00:04:25,240
And there is now we have two colors.

62
00:04:25,630 --> 00:04:29,080
So I would want to display, of course, the first color by default.

63
00:04:29,230 --> 00:04:34,320
So in this case, of course, it is green and that's why we'll set up those state values in here.

64
00:04:34,360 --> 00:04:41,200
Let's go with CONSED and then main color and then comma set, main color, main color.

65
00:04:41,530 --> 00:04:46,700
And by default the main color will be the first item in my colors.

66
00:04:46,720 --> 00:04:47,040
All right.

67
00:04:47,080 --> 00:04:49,030
Remember, color was in red.

68
00:04:49,040 --> 00:04:49,440
Correct.

69
00:04:49,750 --> 00:04:55,810
So we go here with colors and then zero and that's going to be my initial value.

70
00:04:56,760 --> 00:05:01,830
Then there's going to be two functions, increase and decrease that we're going to set up a bit later

71
00:05:02,190 --> 00:05:02,800
in this video.

72
00:05:02,820 --> 00:05:06,490
I would want to focus on the colors first and then we'll deal with amount.

73
00:05:06,810 --> 00:05:08,640
So let's go here with a wrapper.

74
00:05:09,090 --> 00:05:11,760
And instead of the wrapper, there's going to be two tiers.

75
00:05:12,090 --> 00:05:18,270
There's going to be a button container and then the colors and also inside of the button container,

76
00:05:18,570 --> 00:05:21,660
we will set up our add to cart icon.

77
00:05:21,930 --> 00:05:24,090
But at the moment, we're not going to worry about it.

78
00:05:24,270 --> 00:05:26,150
Let's just start with a colors.

79
00:05:26,560 --> 00:05:30,810
Let's say that instead of the wrapper, we go with the div with a class of colors.

80
00:05:31,200 --> 00:05:36,510
And also, like I said, side by side, there's going to be a day for the class of B10 containers or

81
00:05:36,510 --> 00:05:38,510
B10 container.

82
00:05:38,640 --> 00:05:41,260
So we'll work on this return a little bit later.

83
00:05:41,500 --> 00:05:47,940
Let's just start with a color and instead of the colors I would want to go with this plan will say some

84
00:05:47,940 --> 00:05:53,510
kind of text in my case is going to be colors and then let's set up a different side by side.

85
00:05:53,850 --> 00:05:58,800
And now what I would want is similar to like we did in the images.

86
00:05:59,070 --> 00:06:01,950
I just want to iterate over my colors.

87
00:06:02,580 --> 00:06:11,190
And then once I click on a color, I would set my state value equal to that color and something we have

88
00:06:11,190 --> 00:06:14,400
already done quite a few times as far as the logic.

89
00:06:14,720 --> 00:06:18,060
So let's go with colors we're mapping over.

90
00:06:18,330 --> 00:06:21,600
And for time being, let's not add any functionality.

91
00:06:21,600 --> 00:06:24,060
Let's just display those colors over here.

92
00:06:25,110 --> 00:06:32,220
So I'll say color, that's how I'm going to name my individual color and I also want to get the index.

93
00:06:32,730 --> 00:06:38,940
And as far as the return, well, I'm going to return a button since once I click on a button, I would

94
00:06:38,940 --> 00:06:40,440
want to change that state value.

95
00:06:40,750 --> 00:06:44,340
I'll set my key equal to the index like so.

96
00:06:44,790 --> 00:06:50,290
And then I do need to add a class name as well as the style.

97
00:06:50,610 --> 00:06:54,660
So for the time being, we won't return anything in the button, although eventually there's going to

98
00:06:54,660 --> 00:06:55,380
be more function.

99
00:06:55,660 --> 00:06:59,640
And if we save, I mean the moment we won't have anything right.

100
00:06:59,640 --> 00:07:02,850
So we have only the colors, which of course is the spine.

101
00:07:02,850 --> 00:07:05,460
And then we have a div since we're not returning anything.

102
00:07:05,760 --> 00:07:11,190
Now, if you want, you can maybe return an index if you want to see whether everything works and that

103
00:07:11,190 --> 00:07:15,640
should return zero and one, because in this case I have two colors.

104
00:07:15,690 --> 00:07:16,550
OK, awesome.

105
00:07:16,860 --> 00:07:17,780
So that looks good.

106
00:07:18,150 --> 00:07:21,210
I can see that I have two colors in this case.

107
00:07:21,720 --> 00:07:25,630
And now of course we just need to add a bit more logic.

108
00:07:26,040 --> 00:07:33,080
Now, if you remember, when it comes to colors, it was an array with values, right?

109
00:07:33,120 --> 00:07:33,960
The hex values.

110
00:07:34,320 --> 00:07:35,760
If you want, you can log it.

111
00:07:36,180 --> 00:07:40,860
We're going to go with colors and in the console we should see that.

112
00:07:40,890 --> 00:07:41,100
Right.

113
00:07:41,250 --> 00:07:42,330
So let's take a look.

114
00:07:42,510 --> 00:07:47,430
We have a console and we have an array of colors and noticed now these are hex values.

115
00:07:47,460 --> 00:07:51,740
So what I would want to do right now is to add a class to my button.

116
00:07:52,260 --> 00:07:53,850
So there's going to be some styling.

117
00:07:53,850 --> 00:08:00,150
And if you scroll down, the class name is color B10, but all of them will have the same background

118
00:08:00,510 --> 00:08:01,980
and that is going to be the black color.

119
00:08:02,310 --> 00:08:05,460
So of course I would want to have that background dynamically.

120
00:08:05,760 --> 00:08:11,100
And I know that this background is coming from my array, from my color.

121
00:08:11,160 --> 00:08:11,440
All right.

122
00:08:11,820 --> 00:08:13,260
So how we can set this up?

123
00:08:13,650 --> 00:08:15,180
Well, somewhat easy.

124
00:08:15,630 --> 00:08:21,150
What I could do is just say that, yep, there's going to be a class name and eventually will make this

125
00:08:21,150 --> 00:08:22,070
dynamic, don't worry.

126
00:08:22,350 --> 00:08:29,160
But for the time being, was just this manually and let's say color and then hyphen B10.

127
00:08:29,410 --> 00:08:31,880
So eventually we'll check for the active button.

128
00:08:32,130 --> 00:08:33,570
We're not doing that right now.

129
00:08:33,900 --> 00:08:40,800
And as far as the style, since all of them will be black, not all of them will be just black because

130
00:08:40,800 --> 00:08:42,180
that's the color that I set up.

131
00:08:42,510 --> 00:08:48,960
Now what I would want is the background dynamically that is equal to the actual color since I'm getting

132
00:08:48,960 --> 00:08:49,770
those values.

133
00:08:50,070 --> 00:08:52,760
And we can simply do that by setting up the style.

134
00:08:53,190 --> 00:08:55,780
So we're doing the inline style and we're going to go.

135
00:08:55,810 --> 00:09:00,660
The background and background is equal to whatever color we're passing.

136
00:09:00,960 --> 00:09:07,760
And you'll notice that now, of course, I have both of the colors in this case that is red and green.

137
00:09:08,460 --> 00:09:10,320
So that should be the initial setup.

138
00:09:10,650 --> 00:09:16,170
Now, of course, once I click on a button, I would want to change my state value for two reasons.

139
00:09:16,170 --> 00:09:18,900
First, and by the way, get rid of the council.

140
00:09:18,900 --> 00:09:21,840
Like hopefully that is clear and for two reasons.

141
00:09:21,840 --> 00:09:26,910
I would want to change the main color first, because this is going to be the value that I pass into

142
00:09:26,910 --> 00:09:32,280
the card, because, again, if we take a look at the complete project, you'll notice that whichever

143
00:09:32,280 --> 00:09:35,990
color I pick is also going to be displayed in my card.

144
00:09:36,390 --> 00:09:39,120
That's the reason why we're setting up this whole thing.

145
00:09:39,450 --> 00:09:47,130
And then the second thing, depending on the value, whatever it is, the main color value, I also

146
00:09:47,130 --> 00:09:53,520
want to change the opacity because if we again, scroll down, notice here how by default, all the

147
00:09:53,520 --> 00:09:56,340
colors here have the capacity of button.

148
00:09:56,470 --> 00:09:59,280
So all the buttons, I'm sorry, have zero point five.

149
00:09:59,520 --> 00:10:07,350
So all the buttons have the capacity of zero point five and only the active one has the capacity of

150
00:10:07,350 --> 00:10:07,680
one.

151
00:10:08,080 --> 00:10:15,030
So let's start by sending them to functionality where once we click on a button, I'm changing the state

152
00:10:15,030 --> 00:10:23,040
value of the main color and we just go with unclick and then of course we'll pass in our our function.

153
00:10:23,370 --> 00:10:29,250
And here let's go set main color and we'll just pass in the color.

154
00:10:29,550 --> 00:10:31,260
So by default I'm getting the first one.

155
00:10:31,680 --> 00:10:37,890
But then once I click on specific color, of course I change the value in my step.

156
00:10:38,100 --> 00:10:39,090
Hopefully that is clear.

157
00:10:39,330 --> 00:10:40,200
By the way, you're not.

158
00:10:41,190 --> 00:10:45,530
I'll change this one to a lowercase thing that's going to make a little bit more sense.

159
00:10:45,620 --> 00:10:52,140
Now, of course, we're changing the state now and then depending on that state value, I would want

160
00:10:52,140 --> 00:10:53,160
to display two things.

161
00:10:53,160 --> 00:10:58,050
First of all, I would want to display the Czech icon inside of the button.

162
00:10:58,470 --> 00:11:01,260
So that just signals which item I have selected.

163
00:11:01,560 --> 00:11:10,350
And then the second one, I would want to add dynamically that class of active notice again, by default,

164
00:11:10,350 --> 00:11:15,180
all the buttons have zero point five abashiri, but then the active one is going to have the capacity

165
00:11:15,390 --> 00:11:16,120
of one.

166
00:11:16,410 --> 00:11:17,850
So it's going to be more visible.

167
00:11:18,210 --> 00:11:24,090
That's why here, where we have a class name now, of course, all set up the dynamic approach where

168
00:11:24,090 --> 00:11:28,680
there's going to be an expression, I'm going to go back to template literals and I'm going to set up

169
00:11:28,680 --> 00:11:35,430
my ternary operator and I'm going to say if my main color is equal to the color, that means that,

170
00:11:35,430 --> 00:11:38,670
of course, that is the main color in the state.

171
00:11:38,790 --> 00:11:39,240
Correct.

172
00:11:39,480 --> 00:11:46,320
And if that is the case, well, not only I'm going to add the color, but then I'll also have a class

173
00:11:46,320 --> 00:11:50,580
of octave again, something we have already done during the course.

174
00:11:50,940 --> 00:11:56,250
And if it's not the case, then, of course, it's just going to have this color button class.

175
00:11:56,550 --> 00:12:01,740
And then the second place where I'm going to be checking whether the main color matches the color,

176
00:12:02,190 --> 00:12:07,680
meaning every color in my right, that is, of course, inside of the button where I'm going to say

177
00:12:07,680 --> 00:12:08,700
if my own color.

178
00:12:08,790 --> 00:12:12,360
So pretty much the same thing, the same ternary operator.

179
00:12:12,570 --> 00:12:14,970
Only the result is going to be a little bit different.

180
00:12:15,330 --> 00:12:19,080
If the main color is equal to color, then return a check.

181
00:12:20,160 --> 00:12:23,700
OK, so that means that that is the main color in my state.

182
00:12:23,850 --> 00:12:26,600
And if it doesn't match and just return anal.

183
00:12:27,060 --> 00:12:31,870
And what you'll notice right now is that once I click on a button.

184
00:12:31,890 --> 00:12:35,620
Notice how this one gets back the opposite of zero point five.

185
00:12:35,880 --> 00:12:37,740
And this one gets the class of active.

186
00:12:38,010 --> 00:12:42,620
So there's passthrough one as well as the Czech icon.

187
00:12:42,960 --> 00:12:48,250
And again, the reason why we're doing that, because we will pass this value into the card.

188
00:12:48,600 --> 00:12:55,200
So in the car, I also want to display which color I'm getting for the specific product.