Perfect.
We're done with our STOSZ component, and I would want to complete my single product by setting up the
add to cart component.
Now, I have to be honest with you.
Normally when we're talking about the car, it is simply some kind of function that is in the cart context
or in global context that just does the functionality where we just add a component or I'm sorry, add
a product to a cart.
Now, in this case, we have a separate component and then there's going to be even more components.
Why?
Well, because we have more functionality.
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
would want as well as the amount and I our want to control so the amount doesn't go more than the stock.
So then this value is not more than how many items we have in stock.
That's why we will be setting up a separate component.
And like I said, there's going to be more functionality in there.
So normally it's just a function that adds the item to the cart and we are in good shape.
In this case, we do have more functionality, that's why we're setting up a separate component and
I'm going to navigate back to my single product page.
Again, let's go over the logic.
So I only want to display my add to cart component if the items in stock are bigger than zero.
So if I have some items to sell, then I would want to display the card.
If not, then of course I'm not going to display.
That's why I'm checking if the stock is bigger than zero and none of that is the case.
I'm adding the add to cart component to my UI.
Now what is missing in the add to cart?
I would want to put in the whole product.
So I'm not going to pass property by property, I'm just going to grab the whole thing so all the properties
and pass it in a prop.
So on here.
All right.
Product is equal to a product Monsarrat and you can probably already guess that we'll have to navigate
to that component.
So here in the add to cart component, first, let's take a look at the imports.
So we start with react we have you state because there's going to be some local state.
Of course we have styled since we will style this component as well.
We have a link because once we click on Add to Cart, I would want to navigate to the car page and you
can double check that, of course, in the complete application, which is going to be over here.
Now, once you click on Add to Cart, you also navigate the cart page.
That's why we have a component.
We have this little icon if I check, because as we're clicking on the colors and of course, I have
to open up the one that doesn't have add corruption and notice every color is going to have this effect
check icon.
I mean, the one that has been clicked on, of course.
And then we have this used car context, which, of course, we'll set up later.
But this is where the add to cart function is going to be coming from.
Again, at the moment we don't have it, but eventually we are going to get it from used car context
and then we have AMOLED buttons, because when it comes to these buttons, I also set them up in a separate
component because I just thought that there's too much stuff already in the add to cart component and
I'm going to start by structuring three things out of the product.
I would want to get the ID, I would want to get the stock and I would want to get the colors in here,
I'm going to go with Eddie Stark and of course, Colma colors and all of that is coming from the product
that we're going to structure in the parameters.
So that's the product that we are passing in.
And there's going to be two state values, one for the amount.
So as we're controlling the amount, of course there's going to be one state value and there's also
going to be one for the colors because we need to understand that.
And let me get the one that has maybe multiple kernels.
Hopefully I'll be able to find it.
And of course, again, I get the one that doesn't.
And this one still doesn't seem to be this guy.
And there is now we have two colors.
So I would want to display, of course, the first color by default.
So in this case, of course, it is green and that's why we'll set up those state values in here.
Let's go with CONSED and then main color and then comma set, main color, main color.
And by default the main color will be the first item in my colors.
All right.
Remember, color was in red.
Correct.
So we go here with colors and then zero and that's going to be my initial value.
Then there's going to be two functions, increase and decrease that we're going to set up a bit later
in this video.
I would want to focus on the colors first and then we'll deal with amount.
So let's go here with a wrapper.
And instead of the wrapper, there's going to be two tiers.
There's going to be a button container and then the colors and also inside of the button container,
we will set up our add to cart icon.
But at the moment, we're not going to worry about it.
Let's just start with a colors.
Let's say that instead of the wrapper, we go with the div with a class of colors.
And also, like I said, side by side, there's going to be a day for the class of B10 containers or
B10 container.
So we'll work on this return a little bit later.
Let's just start with a color and instead of the colors I would want to go with this plan will say some
kind of text in my case is going to be colors and then let's set up a different side by side.
And now what I would want is similar to like we did in the images.
I just want to iterate over my colors.
And then once I click on a color, I would set my state value equal to that color and something we have
already done quite a few times as far as the logic.
So let's go with colors we're mapping over.
And for time being, let's not add any functionality.
Let's just display those colors over here.
So I'll say color, that's how I'm going to name my individual color and I also want to get the index.
And as far as the return, well, I'm going to return a button since once I click on a button, I would
want to change that state value.
I'll set my key equal to the index like so.
And then I do need to add a class name as well as the style.
So for the time being, we won't return anything in the button, although eventually there's going to
be more function.
And if we save, I mean the moment we won't have anything right.
So we have only the colors, which of course is the spine.
And then we have a div since we're not returning anything.
Now, if you want, you can maybe return an index if you want to see whether everything works and that
should return zero and one, because in this case I have two colors.
OK, awesome.
So that looks good.
I can see that I have two colors in this case.
And now of course we just need to add a bit more logic.
Now, if you remember, when it comes to colors, it was an array with values, right?
The hex values.
If you want, you can log it.
We're going to go with colors and in the console we should see that.
Right.
So let's take a look.
We have a console and we have an array of colors and noticed now these are hex values.
So what I would want to do right now is to add a class to my button.
So there's going to be some styling.
And if you scroll down, the class name is color B10, but all of them will have the same background
and that is going to be the black color.
So of course I would want to have that background dynamically.
And I know that this background is coming from my array, from my color.
All right.
So how we can set this up?
Well, somewhat easy.
What I could do is just say that, yep, there's going to be a class name and eventually will make this
dynamic, don't worry.
But for the time being, was just this manually and let's say color and then hyphen B10.
So eventually we'll check for the active button.
We're not doing that right now.
And as far as the style, since all of them will be black, not all of them will be just black because
that's the color that I set up.
Now what I would want is the background dynamically that is equal to the actual color since I'm getting
those values.
And we can simply do that by setting up the style.
So we're doing the inline style and we're going to go.
The background and background is equal to whatever color we're passing.
And you'll notice that now, of course, I have both of the colors in this case that is red and green.
So that should be the initial setup.
Now, of course, once I click on a button, I would want to change my state value for two reasons.
First, and by the way, get rid of the council.
Like hopefully that is clear and for two reasons.
I would want to change the main color first, because this is going to be the value that I pass into
the card, because, again, if we take a look at the complete project, you'll notice that whichever
color I pick is also going to be displayed in my card.
That's the reason why we're setting up this whole thing.
And then the second thing, depending on the value, whatever it is, the main color value, I also
want to change the opacity because if we again, scroll down, notice here how by default, all the
colors here have the capacity of button.
So all the buttons, I'm sorry, have zero point five.
So all the buttons have the capacity of zero point five and only the active one has the capacity of
one.
So let's start by sending them to functionality where once we click on a button, I'm changing the state
value of the main color and we just go with unclick and then of course we'll pass in our our function.
And here let's go set main color and we'll just pass in the color.
So by default I'm getting the first one.
But then once I click on specific color, of course I change the value in my step.
Hopefully that is clear.
By the way, you're not.
I'll change this one to a lowercase thing that's going to make a little bit more sense.
Now, of course, we're changing the state now and then depending on that state value, I would want
to display two things.
First of all, I would want to display the Czech icon inside of the button.
So that just signals which item I have selected.
And then the second one, I would want to add dynamically that class of active notice again, by default,
all the buttons have zero point five abashiri, but then the active one is going to have the capacity
of one.
So it's going to be more visible.
That's why here, where we have a class name now, of course, all set up the dynamic approach where
there's going to be an expression, I'm going to go back to template literals and I'm going to set up
my ternary operator and I'm going to say if my main color is equal to the color, that means that,
of course, that is the main color in the state.
Correct.
And if that is the case, well, not only I'm going to add the color, but then I'll also have a class
of octave again, something we have already done during the course.
And if it's not the case, then, of course, it's just going to have this color button class.
And then the second place where I'm going to be checking whether the main color matches the color,
meaning every color in my right, that is, of course, inside of the button where I'm going to say
if my own color.
So pretty much the same thing, the same ternary operator.
Only the result is going to be a little bit different.
If the main color is equal to color, then return a check.
OK, so that means that that is the main color in my state.
And if it doesn't match and just return anal.
And what you'll notice right now is that once I click on a button.
Notice how this one gets back the opposite of zero point five.
And this one gets the class of active.
So there's passthrough one as well as the Czech icon.
And again, the reason why we're doing that, because we will pass this value into the card.
So in the car, I also want to display which color I'm getting for the specific product.