So, when we give this a try, you can see that nothing really happens. Even though it gets added to the database, our User is not made aware of the fact that it got added to his or her cart. So, one thing that we can do is add a little banner that shows, like, thank you, your cart has been added to the cart. So, if we switch back to our Product component, we can use a trait that ships with Jetstream, and it's called interactsWithBanner. Now, once our productVariant is added to our cart, we can display a message to our User.

Now, once our product variant is added to our cart, we can display a message to our user. So, thanks to this trait, we get access to a new method called banner, and we're going to say, your product is added to your cart. So, now, if we click the button, we get a nice notification stating that our product is added to the cart. Now, one thing that I don't really like is that this message stays on top of the store. So, I have to manually remove it every time I add something to the cart. So, let's fix this. If we head back over to our editor, we can go into our resources folder,

So, let's fix this. If we head back over to our editor, we can go into our resources folder, views, components, Banner. And here you can see what is happening. Whenever it receives an event called bannerMessage, it will set this style message and show the message, and it currently doesn't hide itself automatically. So, this is very easy. We can simply create a timeout, set show to false,

We can simply create a timeout, set show to false, and let's make the message disappear after three seconds. Let's try it out. Let's add our product to our cart. We get a notification. One, two, three, and it disappears. That's perfect.