- [Instructor] So let's go ahead and build the component
that's going to have our checkout information.
So I'll make a new file here and this is going to be called
checkout.view it's got to be a pretty simple component
so it's going to have a template and I'll just do a div
for right now and an h1 and this is going to say checkout.
And then we're going to have a script.
The script is going to just import, I think we're going
to need here is going to be the price component.
And we'll need to give this a name and this will be
the name of the tag and it's going to take just a few props
so we're going to need the cart as well as the cart total.
And then we'll need to import or register the component
that we're calling in which is the price component.
Alright so so far so good.
Now I need to bring in some code for a table.
I don't want to type all this bootstrap code in so I've
created this special (mumbles) so I'm going to hit this Raw
button and just copy all this code.
This is just normal bootstrap code and I'm going to paste
that over here.
So let's go ahead and add some of the information that
we're going to receive into this component and then add
all of the code for the event as well.
Alright so first off I'm going to add a V if statement
here and what that's going to do is make sure that this
only shows up when the cart has a certain length.
So the table is not going to show up if there are no items
in the cart.
Then we're going to bring in a total and for that I'm going
to use by price component.
So price is just going to get a few classes and then we're
going to add a value here and we're going to use the cart
total that we get as a prop and let's close out that
price component.
Alright that's pretty good.
Then we'll need to go here to the TR so this TR is going
to be what repeats over and over.
So this is going to require my V for statement, going to ask
for the item and the index and the cart, you should always
include a key here if you have one.
And I'll use the item product ID.
Then we have a couple of buttons and we'll need to add
some things in here so these buttons are going to emit
certain events and in the case of course of the Add
button it's going to emit add and pass along the item
that I want to add.
So in here I'm going to push from this component a new item
into the cart, so this'll quickly allow me to add additional
copies of the products if I want to.
So the other button is going to be the delete button,
so that's going to be pretty similar.
But I'm going to just pass along the index 'cause that's
all I need for when I'm deleting an item.
Alright and then here's going to be my information
so in this row going to do item product name and actually
that needs to happen between the TH so that needs to go
right here.
And that's going to be pretty much the same thing
for these other ones except they'll get different values
of course.
So here I put the name, the quantity, how many items
there are, the price, I'll make sure that it comes in
as a number and then finally the total which is going
to be pretty similar to this so I'll copy that one.
This is going to be the price times the quantity.
Alright we'll go ahead and save that and now we need
to bring this component into the main component.
We're going to put it just at the top of products right now
so this will be checkout.
And it's going to get a few parameters passed out so I'm
going to need the cart quantity cart total, so I'll paste
them as well as a couple of the events,
the add and delete event.
Of course since I'm using it here then it means that I need
to import it.
And I need to register it.
So here's components here's products and now I can import
checkout, so that should work and save that.
And let's make this window bigger now.
Hopefully when I click on any of these items here you'll
see that my checkout is looking pretty good.
Let's make sure that we can add a few items, it doesn't
look like we're able to add items yet.
Let's add another element here just in case so these
buttons aren't quite working, that's good that we check.
And it looks like the problem is that I actually need
to check for click events, not emit events.
So these will be click events on the buttons, let's save
those and I don't know if you've noticed this about the way
that Vue.js works, but sometimes when you make a change
in your components you don't actually have to reload
anything, it'll actually just push the component that
you modified over and you can see that it's working
just fine.
What we're going to do next is actually make these
two things into separate pages.