Okay, let's move on and create our actual cart. So if we head back to our navigation cart, we currently have it linked up to our home page, but of course we want to make sure that we have a dedicated cart page. Let's update this route and let's change it to cart. Let's go to our routes file, and at the same time, create our cart component. So php artisan livewire:make Cart. Next, we'll register the route, make sure that we reference our cart component, and let's update the route as well to cart. And now this should work. There we go.

And now this should work. There we go. Of course, there's nothing here yet. Let's switch back and let's open up our CartNavigation component so we can simply copy and paste this, and let's move over to our Cart component. Next, we'll create a new computer property, and let's have it return our items. Now we can go to our cart.blade.php file, and now we can loop through each of our items. And to verify that this is working, we'll simply echo out the different values. Let's switch to our browser, and there you go.

And to verify that this is working, we'll simply echo out the different values. Let's switch to our browser, and there you go. Let's add a bit of styling here. And similar like our other components, we'll add a margin of 12. Let's set the background to white, round those corners, a shadow, and a bit of padding. Now let's turn our cart into table. So let's create a table heading, and we'll add a first column, which is going to be equal to our product name, and our second column is going to contain our product quantity. Now let's add our table body.

and our second column is going to contain our productQuantity. Now let's add our tableBody. Now let's add our tableBody, and inside foreach loop, we're going to add a row and make sure that our columns match up with our tableHeading. So here we want to have our productName, so we'll still have to set up that reverse relationship, and here we'll have our quantity. If we head back, we can see that we have all of our products and our quantity listed. So now we have a productItem. Now we have an item.

So now we have a product item. Now we have an item. We basically want to say item, product name, and at the same time, we want to make sure that we include the variant information, like the size and the color. So we can do variant, size, and color. So let's make sure that we can do this by setting up the appropriate relationships. So let's open up our CartItem model and create a new relationship. So we'll define a new method called variant, and we'll make sure that it returns a belongsTo relationship.

So we'll define a new method called variant, and we'll make sure that it returns a belongsTo relationship and match it up with our ProductVariant model. Now, we would like to do the same for our Product. Like you see here, we do item, productName. What we could do is do variant, productName. I think it's nice if we can also reference it like this. So we can achieve this by using a hasOne relationship. So we'll set up a hasOne relationship, and the related model is our Product.

So we'll set up a hasOne relationship, and the related model is our Product. We want to retrieve this Product through our ProductVariant. The first key is going to be our productId. The second key is going to be id. The local key is going to be equal to id. And finally, the second local key is going to be equal to productId. So now if we give this another try, you can see that we currently get a new error attempting to read size. So something is not going correctly with our variant relationship.

you can see that we currently get a new error attempting to read size. So something is not going correctly with our variant relationship. I think we need to make sure that we add a key here as well. So we need to make sure that it's referencing our productVariantId. So now if we refresh the page, everything seems to work. So we have our product, we have our size, and our color, and our quantity. Okay, let's clean up our table a little bit. Let's make sure it's full width. Let's align our columns to the left. There we go.

Let's align our columns to the left. There we go. It looks better.