- [Instructor] So we've done our products page
and products detail pages.
The last page we need to do here is the cart page,
so let's open that up over here.
And remember that the cart page is going to display
a list of all the items in the user's shopping cart.
Now there's not really going to be anything too different
about this page.
The main difference is that instead of displaying data
from the products array, we're going to be using the cart items
array from our fake data file instead.
So let's start off as usual in the script section
of our component, and we're going to import the cart
items array from our fake data file, so we're going to say
import cart items from dot dot slash fake data.
And then we're going to want to add a data property
for our component as well,
just like we've done with our other ones.
We're going to say data, and inside here we're going to return
an object, and this object is just going to have
the key cart items which is going to have
the value from the fake data file, okay?
And now what we're going to do, is inside our template
we're going to use the V for directive that we saw earlier,
to display all our products to basically display a new div
for each of the products in our cart items data array.
So let's delete this heading here, and we're going to say
div ID equals page, wrap for styling, and inside there
we're going to have an H one heading that says shopping cart.
And then here's going to be the div that we use
the V for directive on, so we're going to say V for equals
product in cart items.
And just one thing to note here is that we are allowed
to name whatever, we're allowed to name this variable
that we get inside a V for directive,
pretty much anything we want.
So if we wanted to, we could name this item or cart item
or even X if you really want it to although
I don't recommend that.
So, for now we're going to say product in cart items.
And under that, remember that when we use this
V for directive we also have to provide a key attribute.
So just like before, we're going to use V bind, key equals
and we're going to set product id as the unique key.
And just one thing that I want to note here is that
a shorthand for writing out this V bind colon thing,
is just to remove the bind and say colon key,
and that'll mean the same thing.
It's just a shorthand way of writing
a V bind directive in view.
And under there, while we're at it, we'll add a class
that will be product container.
And then inside this div, it's going to be pretty similar
to what we've seen with our products page.
We're going to display an image,
with the class equal to product image.
We're going to V bind the source attribute for this image,
which remember we can either write like that,
or we can write by simply saying colon source
equals product dot image URL, okay?
So that is the image underneath there.
We're going to have a div with a class equal to details wrap.
And inside this div, we're going to have an H three tag,
with the name of the product.
So product name inside of curly braces.
And we're going to have a paragraph tag that displays the price
of the product, so we're going to say dollar sign,
and then in double curly braces, product dot price,
and we're going to close the div tag here.
And then underneath there, we're just going to have a button
with the class equal to remove button.
This is going to be a button that shows up on each of our items
that allows us to remove it from the cart.
We're not going to implement the click functionality
for this yet, just like with the product detail page,
we're not going to actually hook this button up to anything
until we get to integrating our front end
and back end, okay?
And that'll happen later in the course.
So, for now the buttons just going to look like this.
It's going to say remove from cart.
And then underneath there, we're going to close this V for div,
so inside here, it's the only thing that's going to be repeated
for every product.
And under there, what we're going to do is display
the total price for all of the items in the user's cart.
So for that we're going to say H three ID, equals total price
close that string there.
So we're going to say total, dollar sign,
double curly braces, total price.
And here's something new that we're going to look at, right?
What we're going to need to do, is we're going to need
to calculate the total price of all of the items
in our shopping cart.
And I'm going to show you how to do that in just a minute.
The only other thing that we're going to do,
is underneath here, we're going to add a button,
that's going to be the checkout button and we're not actually
going to be implementing checkout functionality
in this course as I stated earlier,
but this is just going to to be a placeholder here
for if you want to take this on, and run with it
and create your own actual e-commerce site
that lets people buy things, okay?
So the next thing inside this button, we're just going to say
proceed to checkout button, and we're going to close
the surrounding div.
Okay, so now what about this total price thing
that we haven't really implemented yet?
Well to calculate this, what you might think of doing,
is adding something in here, right?
This is total price, that simply takes all of the cart items
and adds their prices together and comes up
with a total value.
However, the problem with that, is that it wouldn't
actually update when the cart items themselves update.
So for example if we remove an item from our cart,
the total price in that case, wouldn't automatically update,
we'd have to do that ourselves.
So in order to sort of get around this problem,
we're going to use something called
a computed property and view.
Computed properties are basically pieces of data
like our total price here, that we want to display
in our component it's template, but we don't actually have
on hand in the form that we need them, right?
So again, in our case we have an array containing
all of the items in our cart, but we do need a little bit
of computation to actually get the total price
of all those items.
So here's what computed properties look like.
We define them inside a computed key,
inside our default export here.
And basically what we can do,
is each of our computed properties is going to be a function.
So for total price, we're going to define a function
called total price.
And these functions are going to be rerun every time
something that's going to affect their return value happens.
So I'll show you what I mean.
In our case, what we want to do in order to get the sum
of all the items in our cart,
is going to look something like this.
We're going to say, return this dot cart items,
and we're going to use just reduce here to get the sum.
Don't worry too much if you don't know about how
reduce works, this is just how we get the sum
of all the prices of the items in our cart.
So we're going to say sum, item, and then what we're going to do,
is this little function here is just going to return sum plus
the items price, except what we're going to do,
is we have to convert that to a number.
And don't worry too much about what's going on here
if you're not familiar with reduce again,
it's just basically we're just finding the sum
of the items prices, okay?
And then we're going to define a starting value of zero here,
and that should be all we need to do.
So now that we have this total price computed property,
what it's going to do, is it's going to watch this dot cart items,
and whenever that updates, right?
Whenever say we add an item to our cart, or remove an item,
this will run again and recompute the value of total price,
and that'll update on the page.
And now if we take a look at our app,
we should see that the cart page is working just fine.
And just notice here that down here for the total price,
it's displaying the sum of the prices
of all of our current items that are in our cart.
And that's our cart page.