then we'll head over and from the next episode onwards, build this out from scratch. So you can see that we've got a product browser here. We're not going to start here. We're going to go over to the homepage and although this looks pretty plain,

these are just the categories that you can add in. So, of course, when it comes to using this, you can add more categories. A lot of these categories don't actually have products in. We pretty much just have products in this Nike category here.

So for this, we are going to allow an unlimited nest of categories. It doesn't matter how many you create, how many children categories you create. This is going to work really nicely. So for example, we click on brands here.

You can see that we have no products in this overall brand category, but under Nike, we do have them. Now, that's just the way I've set things up. What you could do is add them to this overall brand category as well. So it's completely flexible as to which products you associate.

So you have one product and that can be in a number of different categories. So over to the product browser page here, you can see that we've got three products. This is the product we're going to be focusing on because this is the product that I've already attached different variations to and added images to

and you can see these variations here. So whichever variations we have associated with a product, e.g. size, color, any kind of customizations for them products, they will appear over here on this sidebar.

And what we can actually do with this is just filter down the products by color, size, or whatever you're selling. And there's also a slider here so we can adjust this down and that will reduce these under the max price range.

And by default, this will jump straight up to the most expensive price. So you have it set there already. Now all of this is very fast. We're going to be using MeliSearch for this.

So we're going to index all of our products, grab out all of the variations here and then do some cool stuff to get this to work really nicely. Okay, let's head over to the product just here. So that's gone ahead and given us a large image of that product.

We actually have two images associated with this product which represent the two colors that we can do. Well, there's three here, but I've only added the black and white. This 24 karat gold probably doesn't exist.

So at the moment, you can see that these are all out of stock. So they're unselectable. We pretty much can't go any further than this. Let's go over and actually add some stocks to this.

So let's go to the database. We're going to choose a variation here and this is going to give us a clue as to how the variations within this course work. Now what's going to happen is you're going to have an unlimited amount of variations.

So you could choose a overall color, a size, some sort of customization, some sort of pattern, it really doesn't matter. But the last variation in the list is the one with the SKU, which is your kind of final variation.

So these are the actual items that are in stock. Now if we look at the size 8 here, this has a parent ID of 1, which is black. So this SKU represents a black trainer in size 8. This represents a black trainer in size 9 and so on.

So we have a unique end product for every single variation that ends up in this list. Now if that doesn't make any sense, don't worry. Of course, we're going to be going through all of this as we go through. So I'm just going to add some stock to black 8

and let's go ahead and just choose the stock amount. We'll see what happens to this stock table as we check out. It's actually going to go ahead and add a negative stock level in here. So we're not just reducing a single number.

We're kind of keeping a table of each iteration of this. So we add 5, someone checks out with 2, that's going to take 2 off the overall stock level. So let's give this a refresh and there we go.

This is in stock, but it is low stock. So we'll be adding this low stock modifier as well. Now we've also only added stock for size 8. So that's the only one that shows and these kind of trickle up.

So if you had just a low stock for size 8 and that was the only variation black would show low stock as well. But again at this point that might not make sense but as we go through the course that will.

Okay, so we're down to the final variation which presents us with a price. We can change the price for different variations and we're going to go ahead and hit add to cart and you can see here we get a little notification

that that's been added to our cart. So let's head to our cart and check it out. Okay, so we've got one item in our cart. We can add more but we'll just leave it at one for now.

We can change the quantity from here. You could of course also add the quantity over here as well, but we'll kind of leave that off for now. We can remove this product if we want to very easily

and of course we can change the quantity and this is based on the max stock level as well. So we'll only be able to add five here because we only have five in stock.

So this is all pretty simple unless you have more items and once we're ready to check out once we're happy with this we can go ahead and click check out. Now you notice that we're not signed in at the moment.

We are implementing guest checkout, which means that we can just enter our email address, our shipping address, choose our delivery and then confirm and pay and that will work.

What we can then do is after we have created an order, we can register an account and have all of the orders associated with our email address hooked up to our account.

Let's look at a demo of that now. So I'm going to go ahead and just create an account out here. With my email and we'll just go ahead and put in any kind of shipping address here.

And of course you can add more items here if you want to and let's choose the delivery option. So these have just put in I've not really researched them, but you can go ahead and just pull them in if you want to

and then we can go ahead and enter a card number and all of our details. Okay, so that's it. You can see as well here.

We've got the quantity and the variation types as well, which really helps so we can sort of see exactly what we're checking out with. And of course we have these smaller thumbnails as well,

which we're actually going to be using the media library package for. Okay, let's go ahead and click confirm order and pay. Now in the background what this is going to do is it's

going to try and process the payment first and then once it has processed the payment with Livewire, then we're going to trigger a submission of all of the other details.

Let's go ahead and click confirm order and pay and just wait for that to finish and that's successful. Okay, so because we're not signed in at the moment, we can see here your order and the order number just

in case the customer needs to reference it has been placed and it says here create an account to manage your orders. Of course at the moment,

we can't do any of that. Now just before we do do that, let's just take a look at this stocks table and you can see that we get a new record inserted which subtracts

from that stock level. So what happens is the next time someone wants to go over to that product and add some items, they're limited now to four.

Now I haven't demoed the global search, but this just basically gives us a list of all of our products so we can go ahead and click straight on that and you can see here that when we add this to our

cart just to test it out, we only have four. So that's going to calculate all of that for you. Okay, so that didn't update but we'll fix that before

the course. All right. So now we're going to go ahead and register an account. So let's enter our details here and I'm going to choose

the same email address that I used for that order. Enter a password and hit register. Okay, so I'm now logged in. I've registered an account.

You can set up like email verification or anything like that on here. And if we head over to our order section, you can see sure enough that order is now in there.

Now if I was already signed in that order would be associated with my user and it would be good. Now what we also didn't see is over on our email that's going to head and send an order created email,

which I haven't filled out here just yet, but we're going to go ahead and fill that out in the course to give a summary of the items that have been ordered, the order number and of course a link to our

orders page if we are authenticated. We'll also be sending out emails when the order status changes. So what's going to happen over in the database here

if we just open up our orders table is we have a placed at column, a packaged at column and a shipped at column. Now you can choose as many of them as you want to as many as you want to include.

You might have lots of different steps of an order status. But once these are filled in, so if I fill in packaged at that's now going to detect

that this has been packaged and then once we fill in shipped at that's going to go ahead and detect that that's the case as well. Now this wouldn't have sent an email because we're not

triggering this from any particular location. But if you were to hook this up to an admin panel and you were to change them, what that will do is an event within your code will fire

off the correct email whether it's been shipped or packaged or whatever. So those are the main features here. But what we're going to do is really focus on these

product variations because we want to make this as flexible as possible. As you can see you pretty much got everything you need here for the kind of checkout experience that you want.

Another thing is now that you can see I'm signed in we can actually choose a pre-saved address. So if I were to fill this in now that will be ready for next time and we can use that.

Okay, so that was a huge introduction. Let's head over to the next part get Laravel, Breeze, Livewire and DebugBar set up so we can start building this out from scratch.