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

and title. Let's go over give that a refresh. So we see brands and we see seasons. Now let's just wrap this in a div just so we get a little bit of spacing out here just to play around with this and then we'll go ahead and create a component which will recursively call itself to iterate through and give each of the items underneath this. So before we do that let's just take a

look at an example. So we know that we've got a category children property so what we could what we could technically do is copy this block here and then go underneath here and say for each category and children let's just fix that up as child for example and this is not a sustainable way of doing things unless you know that you have a strict number of nests. Then we could say child

title as well and we could even go ahead and just add a little bit of styling to here. If you're unaware Breeze uses tailwind so we're going to go ahead and say margin left of four. There we go. So we're starting to build this tree up. So this works well but if for example under Nike we wanted to add another category so if we duplicate this down and say new in and just call this Nike new

in the parent id for this would be three. Now if we save this out we're not going to see that so the more categories that we add we're going to have to add more custom for each loops. Now like I said that's not sustainable because you want to probably just add categories when you want and not have to come back and update your code. So to get around this what we're going to do is

create a blade component which deals with outputting the category and the category children but this is going to recursively call itself. So let's go over and create this component. So let's say php artisan make component and we'll just call this category. Okay so now that we've created that component I'm going to go up to the view folder here and I'm going to delete the base

class for this because we're not really going to need this. We'll just need the blade component itself and what you might need to do is run php artisan view clear just to clear that out. Okay so now that we've done this what we can do is grab the category title get rid of that and instead of this in fact we could grab the whole lot here we could say x category and we can pass the category

through as a kind of prop. Now inside of this category component which will be in views and components just over here we can paste this in. Now that's going to work in exactly the same way as we would expect. So let's go over and just give that a refresh and you can see it works in the way that we originally saw. But now that we've got a component in here what we can do

is add that for each loop to the category children but call this same component to render itself again and that will recursively go through and always output all of the category children. So let's try this out we're going to go and say for each category children as child we're going to end that for each loop there and then inside of here we're going to call the same component

and pass down as the category prop the child itself. So the next loop of this is going to pass the child down as the category and if this child has any children then it will then go ahead and for each loop again. So like I said we have a snippet on this over on codecourse so you can go ahead and check this out if you need a bit more information. Now let's again just go ahead

and add in a margin left to this just so it kind of spaces things out and you can see here that we are now recursively iterating through each of the categories. So if I were to add another category under new in that would appear so we can just add as many nested categories as we like and again we're only running one query for this so it's nice and fast. Okay let's go ahead and style this up

just a little bit if you want to. So over in the main page here I'm actually going to go ahead and get rid of this header slot that might break things and yeah it does. So if we just come over to app.blade.php really quickly we could probably add a really simple is set check in here. So let's grab this header variable and let's say is set header and let's go ahead and end that is set

there indent that and there we go we don't need that header in there anymore. All right so over on the home page we're going to go ahead and get rid of this background here so we could probably just move that out get rid of the shadow because we're not going to need that either and we could probably bring this overflow hidden down to here just to get rid of one level of nesting like so.

Let's go over and have a look yeah it still looks like we've got a back yeah we have background and we can get rid of this border as well let's give that a refresh. Okay so that's looking a little bit better. Okay so let's go over and just change this around a little bit so each of the top level categories are next to each other to do this we're just going to use grid and let's just say we want

this to be a no column grid on small and then when we get up to medium we want this to have two columns and when we get up to large we want this to have four columns and let's give that a refresh and let's also make sure we add the correct class name in there we go so we've got two next to each other great okay so we're going to go and change the gap here to four and let's

give that a refresh that should be everything that we need so we've got two of these categories next to each other if we just double check this with our developer tools and we pull this in slightly you can see that they just drop down next to each other as we get a little bit smaller you can always adjust this we just want something that looks a little bit better okay so for each of the categories

i want the very top level to be a different class so if we come over to our category component here we're going to add a little check to see if the depth is zero eg the first item so i'm going to go and just wrap the title in an anchor because we're going to need that to click through to somewhere at some point and let's go ahead and add in a class here we're going to say in here

category and depth and check that at zero if that's the case we're going to set the font to bold otherwise we're just going to do nothing so if the depth is zero e.g the top one just here we want that to be a font bold now at the moment we don't see this as bold we just need to go ahead and rerun npm run dev just to compile everything the reason that this isn't working is because

under our tailwind configuration these are the three places that we look for our tailwind classes to then build our final bundle to get this to work again we're just going to have to run npm run dev and just wait for that to finish so now that's done if we come over there we go sure enough we've got brands and seasons and also some of the grid stuff has now worked a little bit better now

that we've pulled that in okay so i think the last thing we'll do is just get rid of this padding because that's just going to pull that in a little bit and there we go we have our categories now of course at the moment these don't link through to anywhere but each of these categories will have a url so we could go ahead and fill that in now because we pretty much know what

that's going to be categories slash and then category slug so let's just check this out and if i click on brands sure enough we go through to the overall brands category like so there are categories you can make them look as pretty as you like but for now that will do we have an unlimited nest of categories that we can add with a single query