Now, what you also often see on web shops is that on the top right corner, you often have a card icon or a message saying your card, and it is an indicator on how many products are in your card. So I think that would be a nice touch, so let's add this as well. If we go to our navigation menu, you can see that we have all our links here. One thing that we can do is copy and paste these changes into your card, and we want to have a number here. I will update the route as well, eventually. In order to make this interactive and respond to whenever we add a new Livewire component, I prefer to make a new Livewire component.

In order to make this interactive and respond to whenever we add a new card, I prefer to make a new Livewire component. So let's open up our terminal, and let's create a new component, and let's call it NavigationCard. Now we can remove this and replace it with our Livewire component. Let's head over to our blade view, paste this in. Next, we want to make this number dynamic, so let's switch to our NavigationCard component, and let's implement the count. So again, we're going to create a computed property, and we're going to call it getCountProperty. So in order to get the count, we need to get the card and the cardItems.

So again, we're going to create a computer property, and we're going to call it getCountProperty. So in order to get the count, we need to get the card and the cardItems. So as you might guess, we might end up doing some repetitive work, because we again have to check whether the user is logged in or not to get the card and eventually get the cardItems. I think it's good to abstract away this logic, so one way we can achieve this is by creating a factory. So I'm going to create a new directory called Factories. I'm going to create a CardFactory. Not to be confused with DatabaseFactories, this is something else.

I'm going to create a CardFactory. Not to be confused with DatabaseFactories, this is something else. A factory is basically a php pattern in order to initialize a model based on a certain context. So we're going to create a static make function. Now we can simply take this code, move it into our factory, add return type. Now we can simplify this as well. So now here we can say CardFactory as well. Call make. There we go. Now we can do the same on our NavigationCard component.

There we go. Now we can do the same on our NavigationCard component. So we'll call the items relationship on our card, and next we're going to sum the quantity. Now we go back to our view, and echo out the count. So now if we head back over to our store, you can see that at the moment our card is set to 5. If we attempt to add something else to the card, we get a message, but this value is still set to 5. And if we refresh the page, you can see that it is updated to 6. So these two components are unaware of what is happening between the two of them.

And if we refresh the page, you can see that it is updated to 6. So these two components are unaware of what is happening between the two of them. So we can use events in order to make the count update whenever we add a new product to our card. So let's head back to our code. Let's head over to our ProductComponent. Now we can say this. And we're going to say that we want to emit an event. And we're going to emit an event called ProductAddedToCard. Now let's head over to our NavigationCard.

And we're going to emit an event called ProductAddedToCard. Now let's head over to our NavigationCard. Let's define a public property called listeners. This is a reserved property by Livewire. This accepts an array. And here we can add the event that we want to listen for. So ProductAddedToCard. So whenever this event is emitted, we can call a method. Now in this case, we don't necessarily want a method to be called, but we want the count to be updated.

Now in this case, we don't necessarily want a method to be called, but we want the count to be updated. So if we add $refresh, we can instruct Livewire to refresh the entire component whenever this event is emitted. So if we switch back to the browser, you can see it's currently set to six items. And let's add a new one. And there you go. We get the notification message on the top of the screen. And our number of our card count has been updated to seven.

And our number of our cardCount has been updated to seven.