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

and we're going to list all of the products that are in our cart and then we can move on to things like grabbing the cart totals, choosing shipping and all that other stuff that's going to bring our checkout together. So before we do anything, let's just head over to the database and we're going to go ahead and set this product back as live. Now to be able to get that back in here

properly, we're going to have to go and just re-index with Laravel Scout. So let's say scout import and of course app models and product and let's come over and there we go. So at the moment we did add some variations for this so we can technically add this to our cart which is great. Let's go ahead and find this Air Force One and we'll add one of these in here as well. So that

will be it for now. Now of course over on the checkout page at the moment we don't have anything so that's the page that we're going to be building and pretty much listing things out like we have here just in a very slightly different way as we saw from the introduction. So the first thing to do would be to create our controller for this so let's go ahead and make a controller. Let's call

this checkout index controller and once we're done we will head over to our routes and let's go ahead and just create this down here doesn't really matter for now. Call that checkout and checkout index controller. Great. So over to checkout index controller we'll just create an invocable magic method here and let's just go ahead and return a view in here and we'll just of course

call that checkout and for this we need to be authenticated so let's go ahead and add in our middleware here and we'll say auth. In fact we don't because we're implementing guest checkout so let's leave that out of there and let's just create our checkout page. So resources and views we'll just create checkout.blade.php. Won't bother putting that in a subfolder and for this we're

just going to have the same sort of scaffolding as we have before with the checkout at the top then we're going to have a checkout live wire component which we're going to be building here. So if we do head over to checkout now this is pretty much what we see and we're going to have the majority of this stuff inside of a live wire component because this is going to be pretty

dynamic we're going to be choosing addresses that we want to input of course processing our payment and all that other stuff. So let's go ahead and create that live wire component out now we'll go ahead and pull across a markup we'll go through it together and then we'll finish off by outputting a list of the products that are actually in our cart. So let's use live wire and make and we'll

just call this checkout and let's go ahead and add that in here live wire checkout now we don't need to pass anything through from here because we can access our checkout or our cart from this checkout component so we're going to head over to checkout.blade.php under live wire and once again I'm just going to go ahead and pull out some pre-built markup now there's a lot here so we're

going to go through this together let's just take a look at it really quickly and you can see here that we've got the account details here which will only be shown if the user is not authenticated if they are authenticated of course we're already going to have their email address we've got the ability to enter some shipping details here all of the form errors under here as well which we can of

course toggle and also an ability to choose a pre-saved address if the user is authenticated and does have pre-saved addresses and also the delivery option just here as well so you can add more to these later on but we'll just keep this really basic for now and then adding things later on it's going to be really simple same with shipping options as well of course down here

we've got our stripe card form which we'll be implementing later and then of course here we have the products that are currently in our cart with all the subtotals the total including the shipping as well and of course the shipping and the confirm order and pay button which will confirm the order and make a payment okay so let's just focus on this for now so we've got something out

here to start with if we just go through the markup again we've just got all of this information here have a really good look through we're not going to waste time building all of this markup up we've got our select boxes here that we built earlier and all of this stuff so have a really good look at that so we're going to go over to our livewire component which is checkout.php

and let's open that up and let's first of all just look at grabbing all of the products and iterating through them so for this we can keep it really simple and just go ahead and pull our cart in with our cart interface and we can just pass that down to our view so cart and cart and we can just use that to iterate through all of the products and out of the title so let's go ahead

and just look for formatted price and this is what we want to iterate through just here so this one so let's go ahead and say for each cart contents as product and let's go down and that for each and pull that in let's actually call this variation because we know that we've been doing that throughout the course that makes a lot more sense so of course as you would expect we have two

items in our cart because we've got two products in here let's go ahead and start with the variation image which we've already seen a couple of times already so let's say variation get first media url and then really importantly passing that thumb in let's choose the collection name first of all which is default and it's thumb 200 by 200 i think let's have a look and there we go there are two

products in there and the next thing to do is formatted price again all this stuff is pretty straightforward we'll just say variation and formatted price we'll do the title while we're here as well which is the product title remember so really importantly from the variation we go up to the product and grab the title let's go over give that a refresh and there we go two products

in the cart we just need to grab the quantity now and again we know that we've got that pivot in there so we can very easily say variation and pivot on that pivot table between the cart and the variations and then say quantity and that will tell us how many we have in that cart which is one of each at the moment let's just change one of them to two just so we've got a little bit more

in there and then we just want to go through our ancestors again so much like we did over here where we went through our ancestors and output the size the color whatever other variation types you have we can do exactly the same down here so let's go ahead and do a for each here on variation that's really annoying as well we need to grab the ancestors and self

remember because that includes the variation we're currently within as ancestor and we'll end that for each there and then we'll output the ancestor title so ancestor let's just pull that in and title and let's have a look great eight and black 12 and rainbow we know that's the case and we can either use css or just a quick if statement on that last object that we get

through when we do a for each loop so we can say if and let's just separate this loop and alert oh no not alert sorry last and end if and that should be if not last because we want to show that if we're not on the last one and if we head over there we go that will just about do for now so now as we're browsing through the categories adding products to our cart seeing

them in here and changing quantities we can finally go through to a checkout page where we can see very clearly the products we are about to order let's head over to the next part and before we get to the subtotal and the total we're going to work on displaying the available shipping options and being able to choose one of these