- [Illustrator] We're almost ready with the applications.
So we'll put a button to delete items
and start working on our checkout page.
To do that, we're going to need a template,
and I've put the HTML right here.
Make sure that you get the link to the slide
from the beginning of this video.
So I'm going to copy this,
and I'm going to go into my Checkout.
That would be under Views,
and then Checkout right here.
And this is going to go on their template.
So that's all for right now.
And let's take a look at what we're going to do here
in the practice section.
We're going to create a DeleteItem Method,
and then we're going to add this delete button to the cart
so that we can delete items in the cart dropdown.
And then finally, we'll add the checkout code
which we just did a second ago we copied that over.
And finally, we're going to link to the checkout page
as well from the dropdown.
So let's get to it.
We already did a little bit of it,
make this window bigger here,
And we'll start out with the App.vue file.
Let's see, we have to create now a delete item.
So that makes sense to put it after the AddItem Method.
All right, so we will do DeleteItem function
and it's going to expect the ID of the item
that you want to delete.
So is really doesn't delete a product,
it just deletes something from the cart.
So that means either make sure that you know
if it has a quantity already
and just reduce the amount of items.
And if you're hitting that item the last time,
so when there's only one item
and you hit the delete button,
it's got to get rid of that item from the list.
So let's code that, if this cart ID,
and then we'll take a look at the quantity
to see if there's any.
And if it's greater than one,
then we're just going to decrease the quantity here.
So we'll say cart ID,
quantity minus, minus,
and then otherwise we're going to remove the item
from the cart.
So this cart, splice
ID one.
So that will delete one item or the item from the cart.
And this now means that I have to add this in here.
So in my navbar, I'm going to pass along
or capture the DeleteItem custom method here.
Then we'll do DeleteItem, right?
We'll save that.
And we're going to also pass that along
to the router view.
We're already passing along AddItem
because when we hit that plus button,
it's going to add an item.
And then will allow people to delete items.
This is really going to be important for the checkout page.
You'll see that I have a plus and minus button
on the checkout page.
So it's not going to be something that we display
in the main page, just on the checkout page.
All right, so now let's go into the CartDropdown
'cause that's where we need to do the rest of the work.
And so we're going to need to create some items.
This element is going to emit.
So we'll do emits
delete item, right?
And then we need to add a couple of things in here.
So after this bold, closing tag,
we're going to add a button here,
and we're going to look for a click and stop propagation
so that it doesn't try to do anything else.
And then this parent emit.
It's going to emit that DeleteItem custom method
pass along the index of the element.
'Cause you remember on the cart,
what's important now is which elements are you looking at.
And then class will add some bootstrap classes.
So btn, btn-small.
So a small button,
btn-danger for like a red button
and margin left two.
And then of course we'll close the button here.
It's like I may be missing something here.
Yeah, you know what?
We need to close this button
and actually put a minus sign here
that people will actually click.
Right, let's see if that is working.
So if we add some items here
and we pull this thing up,
you'll see that there is now a delete button
and we can click on it
and it deletes an item using our method that is on App.vue.
Now, one more thing that I want to do is,
when people are looking at the cart
I want them to have a button to actually
finally go to that other page that we created.
You know all the way at the beginning,
I think we created at least a template.
So underneath the button
two divs afterwards.
I really dislike how HTML has so many divs.
It's so hard to read sometimes.
So router-link, so we're going to make a link.
So this is going to be a router-link using two.
And we're going to go to the checkout route,
little bit of styles from bootstrap.
Again, this is going to be a button, btn-sm again,
btn-success.
Bootstrap has a lot of classes, text-white float-right.
Although, I'm not sure this actually need the float-right.
But margin-right two to give it a little bit
of nice spacing here
and also margin top two.
I think, I like having these utility style classes.
It makes it so that I don't have to write CSS.
Let's see that I get everything here.
Yeah, and so now I need to say checkout
and then close out the router-link.
I then liked the utility classes at first,
but sort of won me over because I don't have to worry
about writing complicated CSS.
Let's see, I may have missed something.
No, I think it looks fine.
So there it is, this checkout button.
And if we click on it, it's going to take us to our page.
And in the next video, we'll take care of making
all of these actually work and display our items.
You can see that actually the keep shopping button
is actually working.
It's just another route or link,
and you already know how to do that.
So we'll take care of finishing up the app
by taking care of this checkout in the next video.