- [Instructor] We're pretty much done moving items around.
So let's focus on adding some functionality.
Before we do anything else,
let's take a look at our cart one last time
before I explain what we're going to do.
So right now, if I add items, it sort of just adds them
in sequence right here to this list.
And so, it would be nicer
since they're the same type of shirts
if I could just sort of list this once
and then list a quantity every time I hit the plus button.
That way, my list would be much shorter and easier to read.
So that's what we want to do right now.
What we're going to do then is to move the cart total
into app.vue.
And then we're going to go through
and create a new addItem method.
This is going to be a different one
because right, now we have something called addToCart.
I'm going to change the name of it to addItem.
And it's going to make an object that has the quantity
as well as the product.
Or rather, it's going to be an array with an object in it.
And that object is going to have the product info.
So that has to be programmed.
And then, we're going to create an additional
computed property called cart quantity
to store the quantity.
It's going to have to be calculated a little bit differently.
And then we'll update the files to display the cart.
Here's where you find the code to begin.
Here's the end.
And here's the div.
Let's get to it.
And we're going to start off by making this much bigger.
And that way, it'll hide all the sort of in-between errors
while we program things.
Right now, we have a method here called AddToCart.
So I'm going to rename this to addItem.
Still going to get passed along a product, but here,
all this is going to be pretty different.
So I'm just going to delete all that.
And I'll start off
by creating a variable called whichProduct
and then also create an element called existing.
So existing, it's going to let me check to see
if the items in the cart have an item
that is exactly like the one I'm trying to add.
So existing is going to check this cart
and run it through a filter.
And this filter is going to in a function.
It's going to create a temporary variable here called item
and another one called index.
So we can go through things.
Then in here, we'll do a check to see
if the item has the same product ID
as the product ID of the item
that I am passing when I hit the plus sign, right?
So number, just to make sure
that it's a number product ID here.
And then if that's the case, then I'll make
the whichProduct variable equal to whatever
the index of the item is.
So I hope if I haven't saved anything, you should be able
to sort of visualize this.
So right now, you know, we've got this list
but what we want is just for it to say, polo shirt once
the price over here, right?
And then it's going to have another item.
The second item would be skater graphic T-shirt
'cause we haven't clicked on anything else.
So as I create things in here, each one of these list items
is going to have an index.
And that's kind of what I'm storing in here.
I'm storing the index of the cart and I'm going to add
quantities to those indices if they already exist.
So I get whichProduct equals index.
Okay, we'll do return true.
Otherwise, return false here.
In addition to that, if the item currently exists,
then I'll say the current cart
with the proper index that we checked for.
And we'll add one to the quantity.
So it'll increment whatever quantity we've stored in there.
Otherwise, if this is a brand new item,
then we're going to push an element into my new array.
So this cart push and that new element
is going to have an object in it.
That's going to have the product
We're going to pass along
the thing that we clicked on the whole sort of element
that we clicked on, as well as a quantity of one
the first time that we hit on the plus sign.
Then we'll have the entire sort of product stored in there
plus a quantity of one.
And then the next time I hit that plus button,
it's just going to increment that quantity by one.
All right, I'm going to move this creative method up some.
I usually like my things in a certain order.
It's usually like the data then usually like props
but this one doesn't have anything.
And then I usually do like the components.
Then I usually do my life cycle methods
and then like the methods and computer properties.
I'm sorry.
I think having a bit of consistency is always a good thing.
And sometimes as I'm coding, I kind of like get away
from it, but then it's good to reign it back in.
All right, so do we have any computer properties in here?
Right now we don't.
So we're going to create a computer property section.
So that will go here.
First one's going to be called cartTotal.
Because that's going to have to be calculated
completely differently now.
So we'll say let sum equal zero and then do a loop here.
So go through the items
in the cart and then just add them up.
So we had to add them up by quantity times the price
of each of the items so that we can get a proper total.
All right, and then we'll return this sum.
Then we'll do a cart quantity compute at property.
I thought I had that one somewhere.
Maybe it's the navigation or the drop down.
Yeah, actually we had this cartTotal before
and now that's actually handled earlier,
and I don't think it matches this cartTotal anymore.
So we'll just remember to take that one out of here
and then go back into app.vue
and create the other computer property
when this was going to be called cartQty.
So the quantity, I'll do sort of another kind of loop
through to add all my quantities.
Because now, everything is just organized
a little bit differently.
So we have to go through each of the items.
So then, we just go through and we just add the quantities
because we need to know how many items are.
So remember, we have like an array and each
of the arrays has a quantity for how many items they have.
So I think this will just also make sense
whenever you just see it.
So return quantity here.
All right, cool.
This is looking pretty good, except that now,
I need to make sure that I pass things down.
So cartTotal, it's going to be that new method cartTotal,
and then cart quantity, cartQty.
We're passing those.
And we need to rename this one
because it was called the addToCart
and now it's just called addItem.
And remember I'm doing this because I know
that I'm going to have a thing called the delete item.
So might as well rename that to add item.
All right, so that, it's looking pretty good.
I guess next up, I would go
to the nav bar.
And in my props here,
so this is going to receive a couple of things.
It's going to receive the cartTotal
as well as the cartQty.
And here, we're just doing cart length
because essentially, you had one item for each
of the items in the cart, but now we have less items
and each one of those items has quantity.
So that's what we had to write this entire
other method to calculate that.
So we'll just see show the cart quantity here
that gets received as a prop.
And that's all we need for that.
So let's work on the dropdown
and this was going to have to be pretty heavily modified.
So we'll say let's see div if displayCart,
the classes, list group.
I'm going to add a background of white here
because the cart is going to be kind of bigger.
So it's going to need, like to knock out
some of the background.
Then we're going to have a div again
with V4 item index, in car, key index, all that is fine.
And then the class is going to be
a little bit different drop down item.
And these are just bootstrap classes.
It's going to have to just look a lot nicer.
So we have to make sure that it's vertically aligned.
So you'll see that I have a little bit of a badge in there.
So in order for the look nice,
we just need to change it around.
So actually, all this
is going to go in another div here.
Almost feel like deleting everything
and just rewriting the whole thing
'cause it's quite different.
Here, we're going to create a span
and it's going to have a class.
This is going to be where I put my quantity.
And I'm going to add a badge here
with a background of success.
Which I think is a green aligned text top here
and then margin right one.
And then in here, we will get the item quantity,
which we just added in the app vue component.
And it's just going to let us print the quantity in here
inside of this nice little badge.
I think I somehow deleted one of these curly braces here.
And now I have an extra closing thing.
So hopefully, that should be right.
All right, so now, let's just go ahead
and delete all this stuff
because it's just going to be a completely different thing.
So once I put the little badge
with the quantity, then we'll just going to print out
the name and then we're going to need to print out the price.
So that'll be using the currency.
We'll pass along as the amount, the item quantity so times
and we'll cast this thing to a number
and get the product price.
So let's see, we'll put this on the next line.
I forgot to close that P tag actually.
All right, take div tag, div div div
and then it should be a transition.
And then this div sort of be on the next line.
I don't like the way the formatter sometimes does things.
So that I think should be it.
I think there's one more thing that I need to do
but hopefully, at least you can see it and visualize.
So there's actually one more thing that I need to do.
And again, because now I've sort of encapsulated
things further, I moved the products like up a level.
So now, I need to update my product
and add one more parent here.
This thing has a lot of parents.
And also, instead of emitting addToCart,
it's going to need to emit AddItem.
And that means that down here,
we need to update the emit section.
All right, so let's try it out.
And now, it looks the same.
Let's click on some of these other ones.
And notice that the quantity looks good.
Also the final price of everything, got calculated properly
but now, take a look at this beautiful kind of thing
where it tells you the quantity for each one,
the name and then the price.
And it's the price of, let's refresh.
So let's see.
35 bucks.
And then if I do it again, it's 70.
So it's actually taken that into consideration.
It's multiplying this times the original price of the item
and then displaying sort of the subtotal here.
And then when you add additional things,
they'll just get added
and all these things will update properly.
It's a little bit of math work, but I think it was worth it.
And you can see that you're going to need to figure out
when building a slightly better UX
is really advantageous to your app.
And you can see here
that the addition of the different order
of the cart is really helpful for the user.