At this point we're using React Query everywhere
when fetching data on the client side,
and we implemented authentication,
so we can add user-specific functionality.
The final feature I want to add to this example
is a shopping cart.
Here on the product page we want to show
a button saying "Add to cart",
and clicking it will add this product
to the user's own shopping cart.
Now, this final section of the course
is a bit different from the others
in that there are really no new concepts.
You should already know pretty much everything
that's needed to implement this functionality.
So this section will consist of
a series of challenges for you to complete,
as a way to practice some of the things
you learned in the course.
But before we start with the challenges
I shall explain to you how to use
the Cart Items collection in Strapi.
This collection will contain one entry
for each product that a user adds to their cart.
Let's start by adding a new cart item
from this user interface.
Now, each cart item has three fields:
There's "User", which is a relationship
to the "Users" collection
so we can only choose one of the existing users
such as "Alice".
Then there's "Product",
and again this is a relationship,
this time to the "Products" collection.
Let's pick "Aloe Vera".
And finally we need a "Quantity",
which means how many "Aloe Vera" plants
does Alice want to buy?
Let's say 3.
We can now save this entry,
and if we go back to the collection page
here we can see our new cart item in the list
with the three values we entered.
Note that it also has an "Id" field
that's assigned automatically.
Anyway, now that we have some data
let's try fetching it using the REST Client.
Here I already have a "GET /cart-items" request.
If you remember we tried it before,
when we discussed why we needed
to add authentication to our app.
If I send this request,
it failed with "401 Unauthorized".
This must be because the token I used is expired.
It expires after 24 hours by default.
I need to get a new token
by logging in a "Alice" again.
And I called our API route,
so the token is in the cookie value.
Anyway, let's use this token instead of the old one.
And if we try getting the cart items again,
this time we get a successful response.
You can see that it returns a JSON array
containing an object that is
the cart item we just added in the UI.
Note that each relationship is expanded
as a full nested object.
Like, for "user" we have all the properties:
"id", "username", "email", and so on.
Same for the "product": we get all the fields,
including the "picture" details.
That's more than we need for our shopping cart,
but we certainly have all the fields we entered,
including the "quantity".
So this response will be useful
if we want to show a page
with all the cart items for a certain user.
But how can we add an item to the cart
using the API?
We'll need to make a different request
that is a "POST" to the same path.
And again we'll need to send
the authentication token,
because the server needs to know who the user is.
Each user can only add items to their own cart.
We'll send some JSON data, so we also need
the right "Content-Type" header.
And the body will be a JSON object
with the cart item details.
This should have the same fields
that we've seen in the Strapi UI,
so in theory we should start with a "user",
but actually we don't need this, because
we're already sending the "Authorization" header
with a token that identifies who's making the request,
so the server will set the "user" automatically
based on that token.
What we do need is a "product",
and this will actually be the product "id".
Let's look at the "Products" collection in Strapi.
We could use the second product,
that has id "2"
and corresponds to the "Golden Pothos".
So let's put "2" here.
Finally we need the "quantity",
that's just a number, for example "1".
Ok. If we send this POST request,
we get a "200" response,
and the body contains the details
of the cart item we just added.
You can see that the "product.id" is "2",
the "quantity" is "1",
and of course the "user" is "Alice".
So that's how you add a cart item through the API.
You can see that there are now two entries here
both for "User: Alice",
and the second one is the "Golden Pothos"
with "Quantity: 1" as per our request.
Obviously we can see the same data
if we make another GET request for "/cart-items".
The array in the response should now contain
two elements,
where the second one has
"Golden Pothos" as the "product".
Now, if you make the same request,
but passing a token for a different user
of course you will not see Alice's items.
Feel free to give it a try:
log in as "Bob" for example,
with password "Bob123"
and if you get the cart items for Bob
you should see an empty array.
Each user has their own separate cart items.
So this is how the backend API works.
In the next video we'll start
by adding a "cart" page to our Next.js app
that displays the cart items
returned by this "GET" request.