- [Instructor] So at this point,
our Add to Cart button works.
However, the user interface here could use
a little bit of improvement.
As we noted, nothing really happens visually
when we click the button,
which will signal to most users
that something is wrong with our site.
So what we're going to do in this video,
is we're going to add a little bit more logic
to our product detail page to improve things for the user,
our basic strategy is going to be something like this,
after the user clicks the Add to Cart button.
And after the post request completes successfully,
we want this button here to turn green
and say something like the item has been added
to your cart, something like that.
And then shortly after that,
we want the app to automatically navigate
our users back to the products page.
So hopefully, that makes sense.
Here's how we're going to actually
do that on our front end,
inside the ProductDetailPage.vue,
what we're going to do is go down to the script,
and down here, we're going to add another property
to our data object here called showSuccessMessage.
Which will start off with the value false.
And now that we've done that,
we're going to add two more lines
to our Add To Cart method, okay?
The first thing we'll want to do
is set this showSuccessMessage thing to true.
So we're going to say this,
that showSuccessMessage equals true.
And after that, we're going to want
to navigate the user programmatically back
to the products page.
Now, we haven't seen how to do this in view yet.
But here's what it looks like.
Underneath here, we're going to save
this.$router.push
and then the URL that we want to send the user back to,
in this case, it's going to be /products.
And at this point, what the app would do,
is immediately navigate the user back to the products page.
But what we actually want it to do
is wait about a second or so and then do it.
And as some of you may know, we can do this
in JavaScript using the setTimeout function,
which looks like this,
we're going to put this.routerpush thing inside of it.
And we're going to say setTimeout.
And give it a callback that will get called
after the time that we give it is up.
And this.router.push thing is going to be inside of it.
And then as the second argument to setTimeout,
we give it the duration of time in milliseconds
that we want it to wait before calling this callback.
I've played around with it and I think that about
one and a half seconds,
which is 1500 milliseconds feels about right to me.
Alright, and now that we have that logic down,
we actually need to reflect this logic
in our components template.
So here's going to be our basic strategy for that,
we're going to define a completely separate button
with different texts and a different class property
that will only show if the showSuccessMessage property
here is true.
And what we're going to do also
is make it so that the real button,
the Add to Cart button here
only shows if the showSuccessMessage property is false.
So here's what that's going to look like.
We're going to add another property to our button,
that's going to say v-if equals,
and then we're going to say not showSuccessMessage.
Okay, so this will hide it if showSuccessMessage is true.
And then we're going to just copy that button
and paste it underneath that.
And we're going to change v-if here to showSuccessMessage
and we're just going to remove this v-on:click thing
since we don't need our button
to actually respond to click events.
In fact, we don't want it to.
And then we're just going to change the text here
to something like Successfully added item to cart!
And we're just going to add a class here
that will change the button to green,
we're going to say class equals green-button.
And the last thing we have to do
is go down to our components styling and actually define
something for this class.
So let's go down here.
And at the very bottom,
we're just going to define .green-button
background-color, green.
Okay, and now we should be able
to see all of this in action inside of our app.
So let's select a shoe that isn't
in our shopping cart yet.
We'll select this red one here.
And now if we click on Add to Cart,
and this isn't going to work for us,
and that's actually because of a mistake
that I made earlier on our server.
Okay, so let's go back to our server code here
and this is one thing that we want to update.
And that is that inside our post endpoint here
inside the endpoint for adding an item to a user's cart,
we never actually loaded the products from the database.
So we're getting an undefined error here,
now that we deleted the fake data from up above, okay.
We were getting sort of a false positive there.
So all we need to do in order to fix this
is just go down to somewhere else where we load the products
like here, down inside our delete endpoint
and right underneath where we load the user,
we're going to say const products and that should fix it.
Okay, so let's try this again.
So now if we click on Add to Cart,
we'll see that the button successfully changes to,
you know, the green button that says
successfully added to cart.
And now if we go to our shopping cart,
we'll see that the bright red shoes are indeed
inside our shopping cart.