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
04. Getting category children

Episodes

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

Transcript

00:00
The idea now is we want to be able to click on each of these categories and go into the children of that category.
00:06
And then we want to do the same thing once we are in that and go again into the subchildren of the category that we have just clicked. That sounds more difficult than it is. Let's go over and start to build this up.
00:19
So we're going to create out a new controller in here, which will be to show a category. We've already created an index to list our categories. Let's make out a controller in here called category show controller.
00:32
And once we've done this, let's hook this up in our web routes, first of all. OK, so we're pretty much just going to copy all of this down. Of course, the URL is going to change to now pull in the category by the slug that we want to see.
00:47
Let's change the controller over to the category show controller. And let's change the name up here to categories.show. OK, so we're going to do exactly the same thing here and just create out a really simple view.
01:00
So let's go ahead and return a view in here with categories. And we'll put that as a show view. And once again, let's come over to Artisan and make out a view here called categories and show.
01:13
OK, so we're going to go ahead and just grab the categories index. And let's copy that over because this is going to be very similar. And let's copy that over to the show template in here. Now up here, we want to show the title of the category
01:30
now once we've passed that down. So let's grab the category title. And let's just temporarily get rid of this so we can see this working. OK, so over in the index, we now want to link this up.
01:42
So let's use the route helper to go through to categories.show. And let's get rid of that. And let's pass the category in so it can be fetched out with route model binding. Now we need to update our controller.
01:55
So we need to make sure we actually pull this in to the route. That will be resolved out of the database. And then we can just pass this directly down to our view. So let's go pass that down.
02:06
And let's have a look at what we've got. OK, so I'm going to click on shoes. And there we go. We're into shoes.
02:12
The slug is in the URL. And that's working nicely. Now we just need to list through all of the children of this category. So to do this, let's go over to the show template.
02:23
And let's bring back this iteration. But now what we want to do is iterate over the category children. Remember, we have that relationship within the nested set package that we've pulled in.
02:34
And this is now going to be a child. So let's just output the child title just to make sure this is working. And then we'll link this up to go even further into our category nest. OK, let's give that a refresh.
02:47
And there we go. We've got boots and formal. Let's go back to our categories and click on jackets. And we've got outdoor and winter.
02:54
Now to continue going into this, although at the moment it's pretty confusing because we don't have our breadcrumbs, which we're going to pull in very shortly, we want to be able to click on this and go over to the exact same URL, which
03:05
will just continue to list through all of the categories. And then what you can do is you can display any products here which are associated with categories, but also show all of the categories as well.
03:16
OK, let's go over and link this up then. So we're just going to go through to the exact same route. So we're just self-referencing the route we've already created, say category show.
03:25
But of course, now we're passing in that child. Let's go over, give that a refresh. And now we can list right the way down into the last category that we have. Of course, if we add any more subcategories to this subcategory,
03:39
we'll be able to continue going down. Now a really important part about this is just making sure that we're not running too many queries. So let's do a composer require on Laravel debug bar,
03:50
pull that in for development purposes. And this will be set up straight away so we can just start to examine the queries that we've got. Now this package will create a few more queries than we're used to.
04:01
But everything will be automatically egoloaded for us so we won't see any issues. Let's go over to the database tab here. And you can see that we're not looking at an n plus 1 problem
04:11
here when we're iterating through. And if we were to add an additional category here, we wouldn't see an extra query. So everything is being pulled in for us really nicely.

Episode summary

In this episode, we're working on making our categories a lot more interactive. The idea is to let users click on a category and immediately dive into its subcategories (the "children"). Not only that, but you can keep drilling down, clicking into subcategories as deep as your category tree goes.

Here's what we do step-by-step:

  • We set up a new CategoryShowController to handle showing a specific category and its children.
  • We adjust our web routes so each category has its own dedicated URL based on its slug, making use of route model binding (so fetching the category from the database is automatic).
  • We create a new view for displaying an individual category. At first, we just copy over most things from the category index since it's similar.
  • The important bit is updating our view to loop through the current category’s children, and let users click those to repeat the process, diving into further subcategories.
  • Each click is wired up to the same controller/view, so you can drill down endlessly, always using the child as the new context.

Toward the end, we pay attention to performance by bringing in Laravel Debugbar. This helps us check if we're causing any N+1 database queries by loading children categories. Thankfully, everything is set up efficiently, so Laravel is smart about loading what we need without running more queries than necessary.

By the end of this episode, you'll have a smooth, clickable category tree that doesn’t slow down as you add more depth or categories!

Episode discussion

No comments, yet. Be the first!