And this is going to be quite big action and you'll see in a second why, so now I'll open up the sidebar
and we're looking for Kaat reduce her.
And once we have coproducer or our want to handle add to cart action and we'll see if if action and
that type is equal to add to CART and of course, we would want to do something.
And now, of course, I can remove a return state.
I'll throw the error if the action is not matching and of course, I'll start by getting all my values
from the payload, so I'll say the color and amount and then the actual product and all of that is coming
from action and payload.
And I would want to start my functionality by checking whether the item is already in the cart.
And of course, we know that the moment cart is empty.
All right, correct.
But we still need to set it up because there's going to be a if and statement.
So let's go with CONSED and I'll call this time item and then I'll go with state court and find.
And what's interesting, when I'm going to be setting up the I.D. in a cart, I will combine my color
with my I.D. So of course I already have the ID as far as the productivity.
But then since in a cart I have the same product, but maybe with a different color, I will combine
them.
That's why when we're looking for the item, we'll right away combine those values as well.
So use find method.
And then of course I'm looking for the items, so I'm just going to go with parameter of I and I'll
say if item ID matches to that of ID plus color that is coming from my payload, if it matches that
means that the item is already in the cart.
If it's not, then of course we're adding a brand new item and I'll set up my if I use.
If the item exists, that means that it is already in the cart and of course, eventually it will set
up this functionality, but for now, I would just want to go.
What else?
Because I know that I have a..
So we might as well handle that first.
And we're going to start by creating a new item and then just adding it to the cart.
So say here comes a new item that will be a object.
And then as far as the return from this one, I'm going to go with a return that that state than in
the state.
I would want to override the cart.
And as far as the cart, I'm just going to say not that that and then we're looking for the state court.
So I would want to copy all the values from my previous cart, which at the moment, of course, is
just an empty array.
And then I would want to add that new item, that new object that we're constructing over here.
And as far as I remember, I just said that we'll construct our I.D. by combining ID plus color because
I can have the same item.
So the same product, but with different color.
That's why the property will be equal to ID plus color.
And of course, I'm talking about these values over here, the ones that are coming from the action
below.
Then what other properties I would want.
I'm going to go with the name and now I'm going to access that product.
One remember the one that we passed down from the add to cart?
So say your product name.
And then of course I would want to set up my color.
Now, color is again coming from the action paillard.
That is that main color that we're setting up.
Then of course I also would want to have the amount of an image now image is going to be in the product.
So we're going to go with product images.
Remember images, who has an array?
And I'm looking for the first item.
That's why I go with zero and then dot URL.
And then when it comes to the price, I'm going to set up the product price.
And I also want to have a property of Max, which is going to be equal to my stock.
So again, we are doing this because I don't want the user to pick more items than I have actually in
a stock.
You'll notice that, for example, for this one stock is a lemon, but for this one it is five.
So we still need to keep track of that.
That's what there's going to be.
Two more properties, price and product and price.
As far as the max, we're going to go with Max and the product and of course, the stock.
So I will save this one right now.
And I think we're going to work on this guy, the temp item, if it is true.
And next video for now.
We just want to see whether our initial functionality works.
So I would like to open, of course, my components.
In this case, I'm looking for card provider.
And at the moment I can see that cart is an empty array.
But if we navigate to a single product, of course, I pick the one that doesn't have the stock items.
So let's try this one.
Now, of course I have add to cart I can set up right now my color as well as the amount and then add
to cart and there it is now my value changed.
Now we also navigated the cart page, but of course we're not handling that.
So what's really cool that we have the cart now.
Of course I have my item.
So the amount of items is three color is whatever was the name color of course.
And then check it out.
The idea is the product 80 plus whatever color I picked.
So if I'm going to go back to the product, I'll try to remember the same color.
I'm not going to be able to add it out is how we have no matching add to cart.
So why is this happening?
Well, because we have that item and we're not handling not return to notice here.
Of course I am handling what I'm returning from my action put in here.
We're not doing that.
And this is going to be something that we're going to deal in the next video.