- So at this point, we've got the three
main pages of our front end application
loading data from our server,
which is pretty cool.
Right.
We have the shopping cart page.
We have the products page
and we have the product detail page.
However, as you may have noticed,
there are still two other end points
on our server that we need
to hook up to our front end.
And those are the Add-to-cart
and Remove from Cart endpoints.
In this video, we're going to take a look
at making the Add-to-cart request happen
When we click this, Add-to-cart button on
the product detail page,
and we're going to make a Remove from Cart request.
When we click the Remove from cart button
for a given item in our shopping cart.
And just to warn you, each of these
is going to have it's own little quirks.
So stay on your toes here.
So let's first open up our product detail page.
Here we go.
And our basic plan of attack here
is going to be like this.
We're going to create a method called
Add-to-cart that will send
the right post request to our server.
And what we're going to do then is
have this Add-to-cart button here,
call that Method when it's clicked.
And we haven't seen how to do this yet,
but it's pretty straightforward.
So first of all, the way that we define functions
that our components can call in view is like this.
Basically what we do is down here in
our export default object,
we add another property that's called Methods.
So I'm going to add that right underneath data,
since that seems to make sense for me.
And then inside this methods object,
we can define whatever functions we want
and then call them from inside our template.
So in our case, let's define a Method
for our product detail page called Add-to-cart.
Okay, and this is going to be an Asynchronous methods
since it's going to be making server requests.
And inside here, basically what we're going to do
is we're going to make a request using Axios.
So we've already imported that on our
product detail page up at the top here.
So all we need to do is say, await Axios Dot post
and then say, Slash API Slash users Slash
one, two, three, four, five Slash cart.
And then as the second argument we
learned about this earlier, when we were
first learning about the Axios library,
we can provide the request body for
this post request, which is going to look like this.
We just need to add a product ID,
which in this case is going to be the ID URL Parameter
that we used down here to fetch
the right project from the server.
Okay.
So here, we're going to say this Dot Dollar Sign,
Route Dot Params Dot ID, just like That.
And now that we've got that method coded out,
here's how we actually make the Add-to-cart button call.
We saw earlier in the course, so we could
use these things called Directives
to bind data in our components script to
values that we saw inside the components template
when it gets rendered, for example,
this product price thing or the product name thing here.
And as it happens, we're also able
to link events that happen in our components templates,
a button getting clicked, for example,
to methods that we define in our components script,
right inside the methods property we just created.
in our case, here's what that's going to look like.
for our button, which was just going to expand a
little bit here for readability.
We're going to say V Dash on, which is
the directive for tapping into events in view,
and then we're going to say Colon click,
which is the event that we want to react to here.
And finally, we're going to say Equals Add-to-cart,
which is the method we just defined.
And what all of this means is that when
the button gets clicked, we want it to call
the Add-to-cart method that we defined for our component.
So that should be all we really have to do
for now to add an item to our shopping cart.
So if we take a look at our app now,
and just open up one of our products here,
preferably one that isn't already in our shopping cart.
So we'll just choose this first one here.
So now if we click on this, Add-to-cart button,
nothing's going to happen visually and this is
something we'll remedy shortly, but
behind the scenes, our app should be
making a post request to our server and
adding the corresponding product to our cart.
And this is something we can check by
taking a look at our cart, and seeing
whether the product was actually added to our cart.
In this case, it was, which is great and
that means that we hooked everything up correctly.