In this episode, we tackle a pretty important user experience problem: what happens if items or quantities in your cart change (for example, if an item becomes unavailable or a quantity is adjusted in the backend)? Chances are, you as the user won't even notice unless we tell you. So, let's make that clearer by flashing a notification message when it happens.
We start by adjusting our controller logic to flash a message into the session when such cart changes occur. However, we're not inside a Livewire component anymore, so we can't just rely on Livewire's built-in notification system. Instead, we leverage Laravel's session flashing capabilities, and update our notification blade component to also check the session for flashed notifications.
To make this work, we trigger a custom JavaScript event (just like Livewire does under the hood) when the notification component loads and detects a flashed message in the session. This lets us reuse our notification UI and display the session-based message with a timeout, providing a seamless user experience whether the flash comes from Livewire or good ol' Laravel controllers.
We also work through a little debugging (the notification was being invoked twice!) and find that, while not perfect, dispatching this event twice isn't the end of the world for our setup. In the end, your users will now get a clear and timely alert if something in their cart has changed, improving both usability and trust in your app.