Sign up to access "Build an E-Commerce Platform" right now.

also the count of items we currently have inside of the cart. Now at the moment we can't add anything to our cart but this is going to show us how we can do this and then also later when we do for example choose black size a and click add to cart we won't have to refresh the page because we're going to create a live wire component for this cart to refresh this for us. So let's take

a look at the current state of our navigation which I've just closed off. Now at the moment this is just a blade component and we tweaked this earlier. This is referenced inside of our main app file. Now at the moment we can't really add much dynamic behavior to this navigation like our search which we're eventually going to do and also our cart button. So I'm going to turn

this into a live wire component so we can easily refresh it. So let's go over and create out a live wire component which represents our navigation. So let's say live wire make and we'll just call this navigation. So we're going to go ahead and open up our navigation.blade.php file, grab the contents of this and open up navigation.blade.php inside of our live wire views

and paste this in. Then we can come back over to app.blade.php and we can replace this with a live wire component and we shouldn't see any difference at all because at the moment we've just got a blade file that's rendering out everything as normal and live wire works really well for that. So now that we've got our navigation I'm going to really make sure we delete our base navigation

which should be under the layout here. So we don't want that in there anymore and let's come over and we now have a live wire component for our nav. So let's go ahead and create out that cart item over on navigation. So let's figure out where we're going to put this and I think if we go over to the settings drop down section yeah we could put this just here I think

I think that would be absolutely fine. So let me go ahead and copy over some predefined markup for this very very very simple there we go. So let's just go ahead and pull that in and effectively what I've done is just taken one of the styles that we already have for our navigation items just over here and just very slightly tweaked it. So let's just add some content in here let's say

carton zero and let's give that a refresh and there we go so it sits directly next to that. Now we can change this up by adding some spacing in here so let's say space x8 just to space out them items and I think that's fine for now. We can also go ahead and log out and see what that looks like of course because we have a guest car and I think that looks absolutely fine. Okay so we can

leave ourselves logged out that's fine but I am going to come over to the products page just so we have something nicer to look at and let's focus on grabbing the total amount of items that we actually have in our cart. Let's come over to our cart class and the first thing we want to do because at the moment we don't have any way to pull this out of the database what we want is some

sort of method which is going to allow us to grab the current instance of our cart out of the database. So let's go and just create out a method called instance this isn't going to work brilliantly at the moment we're going to look at caching this in the next episode but let's go ahead and just say return and cart model or model cart I think it's namespaced under in here and

where uuid and then first so let's go and fill this in and we know that this is under our session so session and get and then config cart session and key let's just roll over this just in case it doesn't make sense so this is our cart model the one that exists in the database we know that we've got a uuid stored in our session and this will have been for the one where I was logged in

and this was the one where I'm logged out we're plucking it this out where the uuid equals the uuid that we have stored in our session and then we're just grabbing the first item out of here so what we could do is again just test this out so I'm going to come over to our product in fact we can come over to our navigation now and test this so under live wire let's go ahead and pass our

cart interface directly into our render method and we'll just die dump on cart instance and let's just see what we get okay there we go so we've got our car instance there from the database which means because this is now a model we can start to pluck out the relationships for like the variations we have stored when we've added these to our cart so with this we're actually going to make this a

protected method because we're not going to need to access this directly from outside of our class because everything else is just going to lean on this instance now this isn't cached at the moment so every time we call instance we're going to be performing a database query we'll look at a really simple caching technique to get rid of that in the next episode so the next method that we're going

to implement is the contents of our cart so what that is going to do is basically just return to us very very simply using the instance all of the variations which we haven't set up yet from our cart so if we come over to our cart model we know that this has multiple variations so let's create a variations method here and we'll just say that this has many

and variation like so so let's go ahead and call this contents method from our navigation here just play around with it let's give that a refresh and yes we've got variations cart id does not exist oh of course it's not a has many it's a belongs to so let's come over to belongs to many so let's come over to our cart model and this is belongs to many variation because we're working through a

pivot table and the pivot attaches this to the variations let's give that a refresh and there we go so we've currently got no items but we could kind of mock this just to get a feel for how it's going to work so i'm going to add a manual row in the database here and i'm going to attach the current session which i'm assuming is the latest one to these black size eights and i'm just going

to say a quantity of one so let's save this out come over and give this a refresh and there we go so that is one item technically in our car that we have manually added so now that we've done that what we can do is using this contents grab how many are in here now this isn't the total quantity so we don't need to think about summing up quantities just yet we just want the

total unique variations that we've added so let's go ahead and create a method in here called content count and let's just return this contents and just say count so we're just using a count on a laravel collection that we get back so we can use contents count now to display this in our navigation let's just check this is working first of all that should say one and sure enough

it does if we had more of course it would increment so this is the value that we want to display so let's go and just cut this out of here we're not going to pass this directly down to the template instead because we might need to reference it in multiple places and we might need to do some other cool stuff with it we want to go ahead and create a getter so let's go ahead and create

out a get cart property method so what that's going to do is again use our car interface and just return that to us cached because livewire will cache dynamic properties that we create inside of there so now what we can do is inside of our navigation template in place of this we can say cart which is now available and contents count like so so if we come over and

give that a refresh and undefined variable cart so that needs to be this cart because that's a property there we go we've got one item in our cart and of course if we come over here and just duplicate this down and choose maybe the white size eights as well we see two items in the cart so there we go so now when we eventually get to clicking this add to cart button and we call our cart to add an

item and attach a variation to our cart model we can actually refresh this and then the cart value will be updated because it will read the new value but there is a massive issue with the way that we have set things up at the moment and that is the amount of queries we're going to be running and we're going to talk about that in the next episode before we go any further