Our cart page is now displaying all the items,
including their totals.
The next step is to allow the user
to add an item to the cart.
In each product page we want to display a button
that lets the user add this product to the cart.
Now, to add an item to the cart
using the backend API
we need to make a POST request
like this one that we tried before.
As usual, this request must be authenticated,
that is we must pass the JSON web token,
so we'll need to do that in an API route.
Rather than adding a new path,
we could use this existing "cart" route.
At the moment this handler
returns the cart items,
which is appropriate for a GET request.
But we could do something different
if it's a POST request.
In that case we could add an item to the cart.
This is something we haven't done before,
so let me show you one way to do it.
We still want a "handleCart" function,
that will be the entry point for this route.
But we can rename the existing handler
to "handleGetCart",
and then, in the entry point,
we can look at the request method
to decide exactly which handler function to execute.
If it's a "GET" request then we want to call
our existing "handleGetCart" function,
passing the request and response objects,
and stop here.
But if it's a "POST" request
then we can execute a different handler,
that we could call "handlePostCart".
We can also add a "default" case.
if it's neither "GET" nor "POST'
then we should return a 405 status,
that means "Method Not Allowed".
Ok. So at this point we need to write
the "handlePostCart" function,
and this is your challenge for this video.
Write a handler function that
extract the item details from the request body
and calls the Strapi server, adding a new cart item.
Let me show you how this should work
once you've implemented it.
Note that in Strapi I still have
these two cart items for user Alice.
Now, to test the request to the new API route
we can use the browser console.
We want to make a POST request
to the "/api/cart" route,
sending a JSON object in the request body
with the "productId" and the "quantity"
to be added to the cart.
So you can run this code
to test your implementation.
We're not really interested
in what the response body contains,
so in your handler you can simply return
an empty JSON object, like you see logged here.
The important thing is that
making that POST request should add a new cart item.
And in fact we can see three items in the list now.
The new one has "Snake Plant" as the product,
which corresponds to "productId: 3".
So you should have everything you need
to implement the "handlePostCart" function now.
All right. Here's my "handlePostCart" function.
As usual it first checks that the cookies
include the JSON web token.
But then it extracts the "productId" and "quantity"
from the request body.
It makes a POST request to the "/cart-items"
path in the CMS.
And the object sent to Strapi
contains the "product" and "quantity" properties.
Note that this handler expects the client
to send a "productId",
but Strapi expects the same property
to be called just "product".
I preferred calling it "productId" in our own API,
because that makes it clear that it's an ID,
not a full product object.
Anyway, if everything goes well
we return a 200 response with an empty JSON object.
While it there's an error
it returns 401 like we did elsewhere,
on the assumption that the token must be invalid.
So this is a possible implementation
for handling a POST request
to the "/api/cart" route.