Nested Categories and Breadcrumbs with Laravel
This episode is for members only

Sign up to access "Nested Categories and Breadcrumbs with Laravel" right now.

Get started
Already a member? Sign in to continue
Playing
05. Rendering nested sets as a tree

Episodes

0%
Your progress
  • Total: 46m
  • Played: 0m
  • Remaining: 46m
Join or sign in to track your progress

Transcript

00:00
Before we look at how we're going to implement breadcrumbs, let's go ahead and look at building out a tree of all of this data.
00:06
It's likely that on a category index page, you're going to want to show all of the categories and subcategories all at the same time, so it's a little bit easier to navigate.
00:16
Let's go over to our controller, so our category index controller, and let's see how we can do this now. So I'm going to go ahead and just duplicate this down, but comment this out so we have it as a reference.
00:27
And what we're now going to do is instead just get these, so get them as we normally would with Eloquin. But on the collection that we get back here, this package adds in a toTree method.
00:40
I'm going to go ahead and dump this out just so we can see what this looks like, and then we'll start to recursively iterate over it. OK, let's go back over and give that a refresh.
00:49
As you can see, we've got a collection of items. So these are our two top-level categories. If we go down into these a bit deeper, you can see that we've got in here some relations, which
01:00
has children, so everything as we would expect. And this will just continue to nest down, regardless of how many categories that we've got. What we want to do now is iterate over all of this data,
01:11
but we need to do this recursively so we can reuse the same blade template for each of the categories. We don't have to manually create a nested forEach loop
01:22
for every single category that we want to go down to, because if we add any more subcategories, we'll have to update our code. That's not what we want to do.
01:30
OK, let's head back over to the controller and get rid of this. If we head over now and give that a refresh, you can see it still does work because we're
01:37
iterating at the top level, but now we want to do this recursively. OK, so over in the category index template, let's do this, but let's extract what we're doing in here out
01:48
to a blade component. So to create our blade component, we're going to go and make out a component. I'm just going to call this CategoryItem,
01:56
and I'm going to pass in the view option so we don't have a class associated with this. Let's create that out, and let's just move this over, first of all.
02:04
OK, so if we open up the CategoryItem.blade.php file, we're just going to paste that entire thing into here, but then we're going to reference it over here. So to do this, we say x CategoryItem,
02:16
and we're going to need this component to know what this category is because we're using it as a prop. So we're going to pass this down as a prop,
02:24
passing the category in. So nothing has changed at the moment apart from the fact that we've created this partial that we can use to render this out.
02:31
If we head over to the browser and give that a refresh, you see we get the exact same thing. What we can do now, though, is we can take this partial, and just underneath here, we can, again,
02:42
iterate over all of the children, but we can self-reference this component. Let's take a look at how this works. So I'm going to create out a div in here, and inside of here,
02:53
we're going to have a forEach loop that goes over each of the category children as a child. Now what we can do is self-reference this CategoryItem component, and the new subcategory
03:07
that we're going to pass in as a prop becomes that child. What this will do is when it renders this out, it will then go ahead and render out all of the categories, but also then continue infinitely
03:19
to render out all of the children. OK, let's take a look at what this looks like. And we'll see what we need to do. OK, so this looks like it's working.
03:27
Let's go ahead and check our queries just to make sure we're not running too many. And as you can see, we're just running five. All of the queries that need to be run
03:35
will be run when we use toTree, and it will build that up for us, so we don't need to do much else. OK, so now this doesn't look great. What do we do?
03:43
Well, we can go over, and we can add in a class on here. Maybe we could add some padding on the left of six just to push out each of these subcategories. Let's also make sure we're running npm run dev here just
03:57
so we can compile up our styles. OK, now that we've done that, let's give it a refresh. And as you can see, for each nested component now, we're adding a little bit of padding
04:06
for each nested category. If we were to add another one under, say, newIn, this would again push this out, and we would see another subcategory.
04:15
So although recursive nested categories using a blade component might have seemed a little bit tricky at first, hopefully, the way that we've done things clears this up.

Episode summary

In this episode, we focus on how to render a set of nested categories as a tree structure in Laravel. First, we look at why showing a full tree of categories makes sense (especially for an index page), so users can easily browse all categories and subcategories.

We dive into the controller and use the nifty toTree method, which comes from the nested set package. This method transforms our flat category collection into a nicely nested tree. We dump the data so you can see how each category contains its children — no matter how deep the nesting goes.

Next, we talk about displaying this on the front-end. Rather than making an endless number of Blade loops for every possible category depth, we extract rendering logic to a Blade component called CategoryItem. This way, each category renders itself and recursively outputs its own children using the same component. It's a neat bit of recursion, and once set up, adding new subcategories just works without any extra code!

We test our implementation to ensure it's efficient (only a handful of queries!) and add some simple styling so subcategories are visually indented. The end result? A clean, infinitely nestable category tree that's easy to maintain and looks good on your page.

Episode discussion

No comments, yet. Be the first!