- [Male Instructor] I need to improve the way
that I'm storing data into the cart.
So right now if I add a few items you'll notice
that every time I click on this plus button,
a separate item gets entered into the cart.
And what I actually want is a list of each unique item,
and then the quantity of the items
that I add by clicking on these plus buttons,
as well as a subtotal of the price.
So lets go ahead and code how we would do that then
I'm going to hide this right here.
In the HTML right now
when I click on the plus button which is down here,
then I pass along the information which for each item.
And if we look at our JavaScript,
you'll notice that we have this item called addItem
where we push the information into the cart.
Now our data right now is going
to be essentially a list of each product.
So it's going to get like a object
with a product information here
and every time I push it in,
it's just going to get another one of those.
What I actually want to happen is
to pass along the same thing
but with a separate quantity
and where each of these products is not just going to be
the data for the product,
but each one of these is going to be stored as an object,
and then quantity for each one of those objects.
So it's going to look more like this right here.
Alright so lets go ahead and go back into that method.
Imma get rid of this right here,
So right now that item info is being passed
into this product variable and this addItem function, so.
We're going to go ahead and improve it
and we need to know a couple of things,
when we try to add an item into the cart,
we want to test to see if there's already an item
with that name in the cart.
If there is an item with that name,
then I want to go ahead and add one to the quantity.
So if there's one item I want to have two,
and three and four, et cetera.
And if that item doesn't exist,
then I want to push a new record for that item.
So the first thing I'm going to do is create a variable
that's going to get me the index of the item
that I'm trying to push,
if that item currently exists.
I'm going to call that whichProduct.
Then I'm going to create a variable called existing,
and this is going to let me go through the list
of items in the cart,
and I'm going to use the JavaScript filter function
to look through them and analyze
if the item is already in our cart.
So I will say
create a filter and that allows me
to create a couple of temporary variables.
I'll call it item and then index.
So it's going to loop through the cart
and find these for me,
and what I can do here
is try to take a look at the product ID,
cause remember each card has an item called product ID.
So I can say, item.product.id
so this item happens to be the item right here
the temporary variable,
and then check it against,
and I'm going to just make sure that's its a number,
the product id.
So I'm checking to see if
as we're looping through all the items
if each one of the items matches the product ID, right.
Now if that's the case if it does match,
then I'm going to return true here.
And of course if it doesn't match,
then I'm going to return false.
Also want to go ahead and enter that whichProduct variable.
I'm going to store the index,
so that if it does match,
I can target the product that matches,
because I'm going to need to increment the quantity
of that product, right?
So next up what I'll do is,
check out to see if we got anything in existing,
in this existing variable that we're creating here.
As it go through the loops,
if it identifies that there is something in our cart,
so I'll say if existing.length
means there's something in the cart with this product.
Then what I want to do is go to the cart,
and go to the specific item in the cart using
the whichProduct which should have the index
of the product that matched.
And then increment the quantity for that product.
Then if the product doesn't exist,
then I want to go ahead and push it.
So I'll say this.cart.push
and I want to pass along the product
and a quantity of one.
So this product will pass along all the product information
into this product key,
And then we'll initialize.
The first time we push a product in there,
it'll get initialized with a quantity of one.
That's cool, now that should almost work.
There's one more thing I have to do,
and that's make sure
that as I'm listing the elements up here,
I can no longer just get the item name,
because now that happens to have an extra key.
So I need to say product name,
and same thing for the price
it just needs to say item product price.
Now item quantity in this case will still work
because the quantity is of the same level as the product.
So lets go ahead and slide this open and take a look.
And you can see that
if I click a few times on this plus sign,
this quantity is going to be wrong.
We'll fix that in another video,
but if I pull up the list,
you can see that I have three items
and here's the right name.
Now the price isn't quite correct,
but lets go ahead and add some other items
from our list of products.
And notice that it says that there's three items.
This essentially means
that there's three categories until we fix it.
But now you can see that I have three of each one
of these items and I have the price for each one of those.
Now that means that I just need
to fix this price right here.
So this price needs to be the item.quantity
times the item.product price
and we can put that in a parenthesis just
to make it a little bit clearer.
And now let's go ahead and add a few items
to make it see that it's adding these up
and we'll add a few of these.
So that gives us almost everything we need
in this cart list.
Clearly there's a few other improvements,
we'll take care of them starting in the next video.