Let's finalize our card. I think it would be good to have a different column for our size and color so that it looks cleaner. And then on the right-hand side, we have another box saying like, hey, would you like to continue to the checkout procedure or show a message that they have to sign in or sign up in order to continue. First, let's improve the table. Let's add color and size column. There we go, it looks a bit cleaner. Let's make sure that we have a little box here. Let's create a new grid.

Let's make sure that we have a little box here. Let's create a new grid. Let's say four columns. Next, let's move our margin to our div. Let's simply copy this div as our second box. Now we need to make sure that we apply the appropriate column width. So we'll say col-span, and this is going to be three. And this is going to be one. And finally, we need to make sure that there's some margin, so let's add a gap of maybe four.

And finally, we need to make sure that there's some margin, so let's add a gap of maybe four. Yep, looks good. Now let's update this. Let's say whenever we have a guest, we're going to add a little message, please register or log in to continue. And if we have a login user, we're going to create a button to continue to the checkout. And so again, we can make use of the existing buttons like we did before.

we're going to create a button to continue to the checkout. And so again, we can make use of the existing buttons like we did before. So if we go back to our Product, we can simply copy and paste the button that we have right here. And we're going to change this to checkout. Let's make sure that they actually can click these links. I think it's auth register. No, it's not. There we go. Let's do the same for the login link.

There we go. Let's do the same for the login link. And let's add a little bit of styling and see that they can actually click these. Okay, so let's log in. And while we're here, let's fix this. So if you go to our RouteServiceProvider, you can see that we have a home link here. And let's make sure that this is just set to the root of our... So finally, we want to make sure that we have an Idea

And let's make sure that this is just set to the root of our... So finally, we want to make sure that we have an idea of what we're actually going to pay. So we see the products in our cart. We see the quantity, but we actually have no idea what the amount is that we're going to pay. So we want to add the individual price here. We want to have a subtotal, meaning the individual price multiplied by the quantity. And at the bottom of the table,

meaning the individual price multiplied by the quantity. And at the bottom of the table, we want to have the total amount that we're going to have to pay. So let's switch to our editor. And let's open our Cart model. Next, we want to add a new accessor that returns a subtotal. This is going to return an Eloquent attribute. So what we can do is we can return the product price, which will return the money object.

So what we can do is we can return the product price, which will return the money object. And this is going to give us access to some of the helpers that the money object provides us with. One of them is a multiply method. So now all we have to do is pass the quantity of, in this case, our cart item. There we go. So now if we head back to our cart, we can add a new column.

So now if we head back to our cart, we can add a new column. And let's see if I've correctly set up the amount of columns. 1, 2, 3, 4, 5. 1, 2, 3, 4, 5, 6. So we need one more. And there we go. We now have a total amount displayed here. And if we increase the quantity, you can see that the total amount increases as well.

And if we increase the quantity, you can see that the total amount increases as well. Let's add the individual price for each product here as well. That looks good. Now we want to make sure that we have a total amount as well to display at the bottom of the table. Let's quickly take a look. 2, 3, 4, 5. And we want to show the total amount at the sixth column. So we're going to add a colspan of 5.

And we want to show the total amount at the sixth column. So we're going to add a call span of 5. And we're going to align our text to the right. Let's make the font a bit bigger. Finally, we have the total amount, which will be here. And then we have one final column that we won't use in this case. So that should align okay. Now we want to make sure that we actually get the total amount of our cart item. So let's do that.

of our cart item. So let's do that. Get the total amount of our cart. So let's open up our Cart model, and let's create an accessor here as well. So what we want to do now is to look through each of our items, get the subtotal amount, and add these to one another so we eventually get the total cart amount. So we can call our relationship, this item,

so we eventually get the total cart amount. So we can call our relationship, this item, and this will return an Eloquent Collection, and there's a reduce method, which is really handy for doing these kinds of things. So basically, it moves along a value between each and every... for each, if that makes sense. So we would give it a zero value and add a loop.

So we would give it a zero value and add a loop. And in that loop, we simply add one to that specific value, and we eventually get 10. So the actual values pass along for each cycle. So this is going to be the total value, and this is going to be the item. Now by default, the total is going to be a null value, and we want to set a default.

Now by default, the total is going to be a null value, and we want to set a default. So we're going to create a new Money instance, set the value to 0, and let's make sure that the currency is set to USD. So now this is going to be a Money object, and this is of course going to be our cartItem. So now we can simply say return, we get our total, and we can say add,

we get our total, and we can say add, and we simply call item and our subtotal. So again, our initial value is a Money object with the amount set to zero. We loop through each of our items, and we simply get the subtotal of our cart item and add this to the total amount. So if we switch back to our cart, we want to be able to say

So if we switch back to our cart, we want to be able to say this, cart, total. We still have to define this on our library component, so let's switch there. And here we can simply return our cart factory. So now if we take a look, you can see that we have a total value right here, and whenever we update a value, we see the subtotal being updated.

and whenever we update a value, we see the subtotal being updated and the total cart value as well. There are various developer tools that you can use to do some debugging on queries. So I installed Clockwork. So if you load a cart, you can see that we're currently doing 14 queries. And if we add a bunch more products, and take another look,

And if we add a bunch more products, and take another look, you can see that we're currently performing 32 queries. So let's take a look at how we can optimize this. First, this is scanning our cart from a User, and we're actually replicating this behavior here. These methods are called individually, so it doesn't make any difference there. But let's make a small improvement. So we already have a getter for our cart,

But let's make a small improvement. So we already have a getter for our cart, so we can simply update this to say this.cart, which will reference this getter. Now to make everything more aligned, we can simply update any reference here as well. So now we access our items, but we also know that besides our items, we're also accessing our products.

but we also know that besides our items, we're also accessing our products and our product variants. So what we can do here is we can call loadMissing, and we can load any missing racing ships. So the first one is going to be items. Now if you look at our cart, you can see that we access our item here, our variant, and our product. So if we look at our cart item,

our variant, and our product. So if we look at our cart item, you can see that we have our product relationship and our variant. So what we can do here is we can say items.product and items.variant. So now if we take another look, you can see that we went down from 32 queries to just eight. Perfect.

to just eight. Perfect. Let's quickly clean up this right-hand side container because it doesn't make sense to have it grow alongside the actual table on the left-hand side. So we can simply do this by wrapping this inside a different div. So in this case, the container automatically fits its size. Finally, let's make sure that we align

the container automatically fits its size. Finally, let's make sure that we align all the values to the right. There we go. Let's make sure that the total column is also set to the right. And let's add a bit of margin to the left. There we go.