(upbeat music)
- [Instructor] At this point,
we've got a pretty full featured, full stack application,
which is really exciting.
The last big change we're going to make to our front end
is actually going to be given to you as a challenge here.
You see, here's the problem.
When we implemented our add to cart end point
on our backend a little while ago,
remember that we made sure that only one item
with a given ID could be added to a user's cart.
In other words, if we try and add
item one, two, three to the cart,
and the item is already in the cart, nothing will happen.
So for example, we can click add to cart here.
We can see that it's in the cart.
And if we go back and do the same thing again,
we'll see that nothing really changed, okay?
Now this is fine,
but it would be even better if there was some sort of
visual cue on the front end that told the user
whether or not a given item was already in their cart.
And as you might imagine, adding this to the front end
is going to be your challenge here.
So more specifically, here's what we want to happen.
When we visit the product detail page for a product
that the user has already added to their cart,
instead of displaying the normal add to cart button,
we want to display a sort of grayed out button
that says something like, item is already in cart, okay?
And that's your challenge here.
So here are a few hints to get you started.
The first hint is that on the product detail page,
you're going to want to load the cart items into the data here,
just like we've done with the products and other things
throughout the other pages in our application.
The second hint is that you're going to want to create
a computed property for the product detail page
that determines whether or not the cart items
that we've loaded from the server include
the current product that we're looking at on the page.
And you'll then use this computed property
to show or hide another button, that is a third button,
up here in the template with different texts
and special styling so that it shows up slightly grayed out
and lets the user know that the item
is already in their cart.
Well, that's your challenge here.
This challenge should probably take you
around 15 minutes to complete.
After you've given it a try,
feel free to move on to the next video
where I'll show you how I solve this challenge.