- [Instructor] There's a little bit of a problem
when we add more than one of the same items.
Although the dropdown shows these elements properly,
you can see that the elements aren't really adding up
right here in this cart section.
So, let's go ahead and fix that.
We'll use some computed properties.
I did notice that I need to add an additional class here
of dropdown for things to be aligned properly.
So now let's try adding some items here,
and now the dropdown is a little bit better aligned
with my menu item, but we still have to fix the other issue.
So to do that, we are going to add
some additional computed properties.
I'll add one called cartTotal,
and this'll be pretty simple.
Let's go ahead and hide this for a second.
And we'll do a variable here called sum,
initialize it to zero, and it should be cartTotal.
And then we'll create a loop for key in this.cart.
So go through each of the elements in the cart
and then calculate the sum of the elements.
So we'll just use the previous value of sum plus,
and here's where it gets a little bit tricky.
We'll say this cart,
and then we will go through each of the keys in the cart,
and look for the price of each of those items.
And then we'll just need to multiply that
for the value of the quantity for each of the items.
So, instead of all this, we'll just say qty.
So we're adding the quantity of each item
times the price for each of the elements,
and we're going through all of the elements in the cart.
And then when it's done, we'll just return this sum.
That should work for the total.
Then we'll create something pretty similar,
so I just copied and pasted it for the quantity,
and of course instead of sum,
we'll call it quantity here.
Here we're just going to add the quantities together.
So I'm going to loop through all the elements
and just add all the quantities
into this variable that I created here, and then return it.
So that should give us the cart quantity
for every item in the cart,
and then the total price for all of the items in the cart.
So once I have that, I can modify my display a little bit.
So actually let me keep on hiding this.
And I'm going to get rid of this label here called cart.
All right, so here what I'll do is
I'll modify this to my computed property, so cartQty.
Instead of badge success here, I'm going to use badge light
so that we get a white sort of circle around the quantity.
And then I'm going to add another icon.
I still have all the icons from the Font Awesome library.
So, instead of the text cart,
I'm just going to show a little shopping cart here.
So, fas fa-shopping is the proper class.
Actually it should be shopping-cart.
And I'll give it a little bit of room
using the bootstrap spacing properties.
This will show the cart icon and then I can use cartTotal
to add up all the items, and then use my currency filter.
So you can use filters with computed properties, no problem.
All right, so let's see if this is looking better.
It looks pretty nice.
See, here's the sort of lighter badge,
and then the little cart icon and the price.
And let's try adding these,
and you can see that they're adding themselves properly.
And my dropdown's a little better aligned now,
and I get the quantities here correctly.
These are all adding up
and everything is aligning beautifully,
and our cart is looking pretty good.
There's a couple of other improvements that I want to add
so we'll keep on adding things in the next video.