We added this Cart page,
but it's still almost empty.
Now we want to display the cart items in that page.
And we know that we can get the cart items data
by making an API request,
But we also need to pass the JSON web token
in the request header,
so we cannot call the Strapi server
directly from the frontend.
We'll need to write a new API route first.
We could call it simply "cart".
And it will be similar to what we did
in the "user" route,
so you could use this code as a reference.
In this handler we fetch the "user" data,
while in the "cart" route we'll want to fetch
the cart items of course.
Now, to test the API route
you could use the JavaScript console
like I did earlier in the course.
You could use "fetch" directly from here,
requesting the "/api/cart" path.
And in fact I was trying this earlier
so it's in my history.
It's just extracting the JSON
from the response and then logging it.
By making the request from here
the browser will automatically send the cookie
containing the user token.
Right now the API route doesn't exist yet,
but once you implement it
you should see the JSON data logged to the console.
Now, the question is:
what data should our new API route return exactly?
When we request the cart items
the CMS returns a pretty large response,
but we don't really need all these fields.
Let me copy this response body,
and then I'm going to copy it into a new file
that we want to format as JSON.
So let's say that, for each cart item object,
we can keep its "id".
But we don't need this "user" object ,
because we already know who the user is
in our application.
As for the "product", we can keep "id" and "title"
but we don't need the "description"
for the "Cart" page.
We do need the "price",
but we can remove everything else,
including all the "picture" details.
Ok, so that's the "product".
We do want the "quantity",
but don't need these timestamps.
So these are the fields we want to return
from our "cart" API route.
This means you'll need to transform
the data you get from Strapi
before returning it to the frontend,
keeping only the fields we want.
Once you have implemented the new API route
you should be able to call it,
from the browser console.
And you should get a successful response,
with an array of two items,
where each item has exactly these properties.
So this is the manual test you can do
to verify that you've implemented
the API handler correctly.
Please stop this video now
and go and write that new API route.
Ok. Let's look at the solution for this challenge.
You should have added a "cart.js" file
under "pages/api",
and this should contain an API handler function.
Here we first extract the JSON web token
from the request cookies,
and then we fetch the "/cart-items" resource
from the CMS API.
But we transform each cart item
by mapping it to a function
that I called "stripCartItem".
This creates a new object
keeping only the properties we want.
So this is a possible implementation
for the cart API route.
Your code may be slightly different
but that's all right,
as long as it returns the right data.
Now that we have this API route
the next step will be calling it from our frontend.