Now that our basic shopping functionality is complete, let's dive into some details to improve the user experience. One of the things I was thinking of is to add a dose notification when a product was added to the cart. To achieve this, let me introduce you to pins on action functionality. Let's open up app view. Let's first initialize our cardStore, use cardStore.

Let's first initialize our cardStore, use cardStore. There we go. And then we can set up a listener as follows. We'll say cardStore.on action and the inner callback. We get an object that we can destructure as follows. We can say name and we can say store. And for now, let's log it to the console. Let's go to our application and see our log in action. When we reload, we'll see a log for all actions.

Let's go to our application and see our log in action. When we reload, we'll see a log for all actions that have been executed on our store. For example, getting the amount for product or incrementing and decrementing a product's own action is pretty powerful because this allows us to observe actions and even do changes before actually executing the action where we create a listener.

before actually executing the action where we create a listener. It's also good practice to destroy the listener and we can do so as follows. Let's say const unsubscribe equals and on beforeUnmount. Let's unsubscribe. And this way we'll clean up after ourselves nicely. Now in our callback, let's take a look at what we get through the args.

Now in our callback, let's take a look what we get through the arcs. Let's log the arcs and let's say we increment the product. And in here we get an array with our product. Now, let's say we want to modify the quantity before actually executing the action. We can say if the name of the action equals incrementProduct, let's say rxOne equals 10, open up our cartStore and let's do some modifications here.

equals 10, open up our card store and let's do some modifications here. We'll say amount equals one. And instead of incrementing the quantity, we'll say quantity plus equals amount. And here we'll say amount. Now, every time we add a product, we actually add 10 because we intercept the action, make modifications before actually doing the mutation. Now let's get rid of this

before actually doing the mutation. Now let's get rid of this and add something useful instead, let's add our dose notification and using she cn. We can add sonar as follows. We can say MPX shed, cn Xian view, latest at sonar. Now we can add our toaster and adot view. That's first import toaster from components UI, sonar, and,

That's first import toaster from components UI, sonar, and, and here we can say toaster. And here in our listener, let's say those success will get the name of our product, which is RXZeroTopTitle. And we can say, added to cart. And let's only execute this if name equals incrementProducts. Let's import toast from useOwner.

name equals increment products. Let's import toast from useOwner. And now if we add something to the cart, we'll see our notification appear. Cool. Let's position the toaster in the center at the top of the screen and let's give it some rich colors. There we go. And now we'll see a green notification appear. Nice. Now let's also add one if we remove a product from the cart.

Nice. Now let's also add one iffy. Remove a product from the cart. Let's say else if $name equals removeProduct. Let's copy this and let's say toast error or product has been removed from the cart. Now when we remove a product from the cart, we'll see a red toast appear. So far, so good. But wouldn't it be nice if you can undo an accidental removal?

So far, so good. But wouldn't it be nice if you can undo an accidental removal? Well, using penia actions, it is very easy. So let's start by adding an undo button to our error toast. Let's say action label undo and on click will simply say cart::store()->increment($product). And we'll increment it with the $product we get in our $args. Now when we add a product and we remove a product, we'll see an undo button appear.

Now when we add a product and we remove a product, we'll see an undo button appear. But when we click it, nothing happens. Why is that? Well, if you open up our card overlay, we go to our inspector and we take a look at our app, we see it gets an attribute called inert. When the overlay is opened, when the overlay is closed, this attribute disappears. The inert attribute prevents all forms of interaction on elements inside of it.

The inert attribute prevents all forms of interaction on elements inside of it. And even though our toast is rendered with a super high Z index, because the root element has this attribute, it's unclickable lucky for us. This is a very simple fix. We just wrapped the toaster inside of a teleport and the target will be notification route. Then let's not forget to import

And the target will be notification route. Then let's not forget to import or teleport open up index.html, and next to our app D, we'll say notification route. And because our notification container is a sibling of our app container, it won't be affected by the inert attribute that will be applied when we open the card overlay. So now when we add our burger, we open the cart overlay, we press remove, we click on undo,

So now when we add our burger, we open the cart overlay, we press remove, we click on undo, we'll see the burger gets added to the cart again. But now let's say maybe we remove and we undo, we get a new notification and let's say we want to skip that notification. Well, this is pretty straightforward. We can go to app view and instead of saying incrementProduct, we'll say restoreLine.

and instead of saying increment product, we'll say restoreLine. Let's open our cardStore and say restoreLine storeLine equals, And we can simply say cart.value.push(line). Let's not forget to return or restoreLine function. Now when we remove a product from the cart, we get a notification and when we press undo, the cartLine will be restored and we don't get a second notification.

and when we press undo, the cart line will be restored and we don't get a second notification. Great. And the cool thing is that this also works on our checkout page. So we can say DU and it'll be added. Again. To conclude this lesson, let's add an empty state in the overlay on this element. Let's say V if cardStore is not empty, and let's go to our cardStore. Let's create our isEmpty gather.

and let's go to our card store. Let's create our isEmpty gather. It's gonna be a compute property. And in here we'll simply return cardValue.length === 0. And let's not forget to include isEmpty in our return value back in our cart overlay. If it is empty, let's say class h, full flex justify-center,

If it is empty, let's say Class H, full flex justify center, item center and flex call. And let's add our empty Card component. And maybe let's add a Button with the size of algae, some spacing on top. And when we click on it, let's say cardOverlay, storeClose and let's add some text. Let's shop. Finally, let's also hide the subtotal. If we have an empty state where we open up the cardOverlay.

Let's shop. Finally, let's also hide the subtotal. If we have an empty state where we open up the card overlay with zero products in the card, we get a nice empty state. Let's actually do the same for our checkout page because when we remove a product, we get this weird state on this element. Let's say VF card store empty. Let's say if it's not empty, and let's scroll down. Let's say N vs. And in here we can say card empty.

Let's say N vs. And in here we can say card empty. And let's add a button that goes back to the homepage. We'll say text-center empty three. And let's add a router link to our homepage. Let's say as child and add a button here. So let's shop. And there we go. Now our checkout page also has a nice empty state. We added a nice interaction by using pins on action to subscribe to the increment product.

We added a nice interaction by using pins on action to subscribe to the incrementProduct and removeProduct action. And along the way, we updated our cardOverlay and checkoutPage with an empty state. I'd say this is a great improvement to our shop. Let's move on to the next lesson.