(upbeat music)
- [Instructor] Okay.
Now that you've given this challenge a try,
here's how I chose to go about solving it.
The first thing I did was down
in the script section of our product detail page
I added another property to our data object here
and I called that property cartItems
and it started off as an empty array.
And then down here in the created lifecycle method
I added a little more logic
so that in addition to loading the product from the server
we would load the cart items from the server.
And here's what that looked like.
I also took advantage of this time
to do a little bit of cleanup.
So instead of having this extra line,
we can just say const data
and rename that to product equals.
And basically that just gets the data property
from this thing here
and reassigns it to the variable name product.
Okay?
And then I did basically the same thing here.
I got the data and called it cartItems
and then said equals await axios.get
and loaded slash API slash users
slash one, two, three, four, five, slash cart.
And then I just said, this.cartItems equals cartItems.
So at this point,
our product detail page has the cart items
successfully loaded into its data.
The next thing I did was that I created a computed property
that would return a Boolean telling
whether or not the cart items that were currently
in the user's cart,
included the product that I'm looking at on this page.
So here's what that looks like.
Underneath data here,
I added a computed property
and inside there I added a property called "ItemIsInCart."
Okay?
And here's how I computed that.
I said, return this.cartItems.some, okay?
And then I checked to see
if some item in the cart has an ID equal
to the ID of the product that we're currently looking at.
So basically I just said
item.id is equal to this.product.id.
All right.
So now that I had the computed property here,
"ItemIsInCart,"
what I did was I went up to the template
and just like we already have two buttons here
one that just says, add to cart.
And one that says successfully added item to cart.
I copied the second button here and put it down underneath.
Okay?
And for the class, I changed that to gray-button.
And for the message,
I made it say something along the lines
of item is already in cart.
Okay.
And the other thing that I had to change here was
for the V if I said, "ItemIsInCart."
So that this button would only show up
if the item was in fact in your cart,
based on this computed property.
And then what I had to do was change the VF properties
of the add to cart button and the success button.
So in addition to the show success message thing,
I also had to say
if not item is in cart and not show success message.
And for this one, I said, if not, item is in cart,
and show success message.
So basically neither of these would show
if the item was already in the cart,
it would only show this grayed out button.
Okay?
And last but not least down in the styled portion
I had to add another class for the gray button.
So I said, gray button, background color
and then I just did the #888.
And it looks like I actually spelled that differently here.
Let me go back and change that to G-R-E-Y.
And now if we take a look at our front end again
and take a look at an item
that we've already added to our cart,
we see that it shows this button
that says item is already in cart.
And if we go to a shoe that isn't already in our cart
we see that it displays the add to cart button correctly.
If we add that to our cart, it shows the success button.
And then of course, if we go back to that,
it shows the item already in cart button.
So that's how I solve the challenge.
Congratulations if you figured that out
and don't worry too much if you didn't figure it out
or if you did it slightly differently than I did.
As long as you understand what I just did there,
you should be fine.