- [Instructor] Let's go ahead
and take care of our checkout page.
So we are going to pass the cart total
to checkout from the app.vue file
and we're going to receive that as well as the cart using props
into the checkout page.
And then we're going to loop through the items in the cart.
And finally, we'll use that information
to display the price, the total
and everything else on our page.
So, here is the beginning, the end
and the difference that you can go check out.
Remember if you have this slide
you can also click on these buttons,
and let's take a look at our codes.
So on our page right now, when you add items,
add a few, you'll get this dropdown,
and this has a link to the checkout page
which right now just has placeholders for all these items.
So in order to make that all work
we're going to start in the app.vue file
which is always our beginning page.
And in here, we're going to need to pass to the router view,
'cause remember the router view is the thing
that manages all of the different pages.
So cart-total as a prop, and it's going to send
the cart total item from this place
which is a computed property right here
that just calculates the total of the cart.
So, let's go ahead and save that.
And other than that, we don't really need
to do anything else on this page.
So we're going to go then to the checkout page
on the vue's folder and receive that information.
So right now, all we got is a template here
and we don't actually have any styles.
So in here we're going to need a few things
before we receive those.
So we'll go ahead and import the currency component.
And then inside this export default
we'll go ahead and receive a couple of props
we sent along the cart, as well as the cart total.
So now we can use those in this page
and we need to create a component section
so that we can receive the currency component.
And this page is going to emit a couple of things.
So this is going to emit a couple of events, add item
and of course delete item.
All right, so now let's go ahead and wire these things up
into the template that we have built right here.
So we'll start off
and make sure that this table doesn't show up
unless there is an item in the cart.
So we'll say vf and then cart.length, right?
And then for our total,
right now we're just using this placeholder.
So we'll use the currency component
and pass along as the amount
and I'm going to use the number.
Sometimes they like to use that number method to make sure
that I sort of cast a number
just in case it comes a long as a string
and output the cart total.
We received that as a prop already.
So, all right.
And then at this tr right here,
so this is the body of the page.
So in this tr we'll have to use a v for statement
to loop through the different items in our cart.
So item index, we're going to need the item
and the index in cart, and we'll pass along a key.
It's nice that these items have a product ID on them.
So remember, this is the items from the cart.
It's not just item.
We have to go to the product
'cause that's where all the product information is.
And then look for the ID in there.
Then there's these couple of buttons.
This is the add button.
So it will need to target a click event here.
And this is going to emit, add item,
passing along item product.
This isn't so good, I'm just going to copy this one.
So I'll just paste that over here.
And this is going to pass delete item
and this will pass along the index.
So remember, the list of items in the cart it's going to be,
well, I can't show you 'cause I'm sure some
of the stuff doesn't work
but the list of items in the cart is an array of items
and so I'm passing along which one of the items needs
to be deleted from that list.
And that delete item method takes care of handling that.
And let's go ahead and save that.
And now we need to go ahead
and output the other elements right here.
So let's go ahead and output item, product name.
And then item quantity.
Remember the quantity is at the same level
as the array item, right?
And then the products are in their own sort of object.
For the price, we'll have to use that currency component,
pass along as the amount,
casting things to a number just in case item product price.
So passing along the price to our currency component.
All right, I feel like I should just copy that
and put it in here.
So this is going to be sort of like the subtitle.
So it needs to be item a quantity times the price
for the item.
This is sort of weird.
Go ahead, put that on the next line
so it looks a little nicer.
Sometimes I don't like the way prettier formats things
but at least it's consistent.
So let's see if our page is working.
Looks like I probably missed a comma somewhere, right there.
And it looks like also here.
So it looks like I missed a few commas.
All right, let's check it out.
So right now it's just as keep shopping
'cause if there's no items on this page
it doesn't show anything.
So we need to populate our cart
and then go to the checkout page,
so go ahead and close that menu.
And you can see the items
and it has these nice buttons that let you add items
and remove items directly from here.
So everything seems to be working pretty well.
Our dropdown still works and I can go keep shopping
and use that to get more products.
So this is a typical app,
and I think you can see that most
of what you do and Vue.js is that sort of repetitive process
of creating components that are self-contained as possible.
And then you just need to worry about wiring things.
The greatest thing about Vue is
that you don't have to worry about the DOM itself.
All you have to worry about is modifying the data
and you can easily reuse these components and other projects
like the currency component is a perfect example of that.
That's one that I can just use everywhere
and you'll be building your own
for different needs and you can use them wherever you want.
So it's a great framework.
Hope you enjoyed the course.