Showing the user's cart: Build an E-Commerce Platform

00:10

list of our items and we'll refine that in the next episode. So to start with let's go ahead and create out a controller which we can hit to show our view. So we're going to make a controller in here and we're going to call that cart index controller

00:26

and let's go over to our roots and web file and let's add this in here. So we could just copy this one and add in get cart and cart index controller. Great! Okay so over in cart index controller let's make this invocable and we want to

00:45

return in here a view that's just going to be cart.index and we can go ahead and create that out now. So let's come down to where our views live, create out a cart folder and in here index.blade.php that is our cart. So we should be able to

01:02

access that now if we just head over to slash cart there is our cart. Now is that hooked up? Yes! So our cart page is pretty much going to look like our dashboard page with a header and then some content.

01:14

So we can just copy this over and just paste this into here and go ahead and add cart at the top for our header and then down here we are probably not going to need any of this so let's just stick with this here with the maximum width

01:30

and then this is going to be where all of our items show. So this is where our cart details show. Of course we've got our header. Now in here this is where we're going to create out a live wire component because ideally what we want to do is refresh

01:44

the entire cart when things change. This might not be the best solution right now. We can always change this later but what we're going to do is anytime anything in our cart changes we're just going to refresh the entire thing because inside of here is also going to be our

01:58

cart summary which will give us a total amount based on quantities. So let's create out a live wire component for this. Like I said we'll be keeping an eye on our query count. So let's do live wire make and we're just going to call this cart. So let's create that component out

02:13

and then in here let's say live wire and cart and we'll just leave it at that for now. So let's go over. Nothing changes because we've just got our empty live wire component in here but over in the live wire component for cart I'm going to paste in some pre-made

02:28

markup once again. This is basically just something on the left and something on the right so you can go ahead and grab these from the course resources if you're following it along. So that is the cart items section and this is the cart summary. Now the

02:40

margins here look a little bit weird. Don't worry about that just yet. That's just because when we go ahead and create this we're going to have a list of items and we're going to have a sort of negative margin at the top to account for the spacing

02:52

and we can always get rid of this rounded section as well just to make that look a little bit even. Okay so our goal now is to output the cart items that we have in our cart. Now at the moment we don't have

03:07

too many different items. We have two variations which is fine because they're both going to show up as separate products. So if we just come over to our product section for Nike Air Force One we've got two different variations essentially size eight

03:21

and size nine for black and white. So that will do for now. We can just add in the white ones and the black ones and see them both in the cart. So over in cart.php as in the live wire component this is where we want to pass down the cart itself. So we can just inject in

03:38

our cart interface here and we can just go ahead and pass that down to the component like so and we can just start to use it. So we can grab the contents of the cart out as we need them. So if we come over to cart.blade.php

03:52

we just dump out the cart in here. Probably won't work but let's just go ahead and try it. Yeah so it's just because it's a class so we could say cart contents and there we go. They are the contents of our cart. So we've only got one item in here at the moment.

04:08

Let's just add another one before we start to iterate through this. So let's come over to our product and we don't have anything in stock in white so we're going to need to go ahead and add a stock for that. Let's bump this up as well and we'll choose the variation

04:22

id size eight in white. So let's go back and let's add in white size eight and there we go. So now when we come over to our cart we've got two items up here. We have two products in our cart or two end variations. So we can start to iterate through them

04:39

now and just show some basic information about them just for now. So we already know how to do that. Let's grab cart contents and let's just create a for each loop in here to iterate over them and we'll just call that variation like so

04:52

and we'll end that for each just in there. So for this now we can just extract pretty much any information we want out of this variation. So we could grab the variation title. At the moment that's not useful on its own.

05:05

In the next couple of parts when we start to refine this we're going to traverse upwards to grab the end product and we're also going to go across each of the variations. So as you saw from the introduction the goal isn't just to show size eight without any other information because

05:19

that doesn't make any sense whatsoever. We're going to show size eight the color that we've chosen or whatever other variation we've chosen and then the end product as well in there. So we'll leave this as it is for now just to make things simple

05:33

but what we will do is create out a separate live wire component for each of our cart items. We're going to try and avoid creating too many nested components but in our case for each of the items that we create we need to do dynamic things like update the

05:48

quantity that we have chosen for this. So I'm going to cut this out of here. I'm going to go ahead and create another live wire component and we're going to call this cart item and then inside of cartitem.blade.php we can go ahead and pop that variation title

06:02

into there. Now for cart item if we just open up the live wire class for this let's go down and we know that we're expecting in a variation here so we can set that as a public property variation and that's pretty much all we need to do in here for now. So now

06:19

over in our cart class we can just say live wire cart item and we can pass the variation into there and we should be good. Let's go over and we shouldn't see anything different apart from the fact that we've got a div wrapping them now so they are on

06:35

two different lines. So we're now kind of outputting the products that we have in the cart. Let's go over to the next episode though and just refine this so we can output some more useful information mainly the overarching product title.

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

Episodes

Transcript

Episode summary

Episode discussion