In this episode, we're focusing on upgrading our navigation so it can display our cart, complete with a badge showing how many unique items are inside. Right now, our navigation bar is just a static Blade component, but to enable real-time updates (so the cart count updates instantly when items are added), we turn it into a Livewire component.
We go through moving the navigation markup into a new Livewire component, swapping it out in our main layout, and making sure everything still renders the same. Then, we introduce a cart icon (or simple button) in the nav, using some quick markup tweaks and spacing to make everything look tidy. The cart initially shows "cart: 0", but we want it to pull real data next.
We create a method on our cart class to fetch the current cart instance from the database using a UUID stored in the session. After a bit of trial and error (and some manual database tweaking for testing), we hook up the navigation component to display the live count of unique items in the cart, using Laravel collection methods.
For future-proofing, we add a computed property so other parts of the component can easily access the cart's contents count. Now, when you add more items to the cart (we do this manually for now), the navigation updates to reflect the correct count—no page refresh needed!
There's a bit of a cliffhanger at the end: right now, we're hitting the database more than we like. Next episode, we'll tackle caching to improve performance before moving forward.