Build an E-Commerce Platform

Sign in Get started

This episode is for members only

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

Already a member? Sign in to continue

Playing

04. Recursively displaying categories

Episodes

0%

Your progress

Total: 8h 42m
Played: 0m
Remaining: 8h 42m

Join or sign in to track your progress

01. Introduction and demo

02. Installing Laravel, Breeze and Livewire

03. Creating categories

04. Recursively displaying categories

05. Product model and migration

06. Showing a product

07. Product variation setup

08. Creating the product selector

09. Loading child variation dropdowns

10. Faking adding the final variation

11. Setting up product stock

12. Calculating variation stock levels

13. Adding product images with MediaLibrary

14. Creating the product gallery

15. Providing a fallback image

16. Adding media to product variations

17. Creating the cart model

18. Registering the cart service

19. Creating a cart session

20. Showing the cart in the navigation

21. Caching the cart instance

22. Adding items to the cart

23. Creating the notification component

24. Showing the user's cart

25. Outputting cart items

26. Showing variation specifics

27. Updating item quantity

28. Removing an item from the cart

29. Calculating the cart summary

30. Showing the category products page

31. Indexing products in Meilisearch

32. Hooking up products to categories

33. Building the product browser

34. Showing child categories

35. Indexing product variations for filtering

36. Outputting variations for filtering

37. Hooking up product filters with Livewire

38. Filtering products

39. Filtering by price

40. Adding global navigation search

41. Handling products that are not live

42. Price range category fix

43. Scaffolding the checkout page

44. Listing shipping options

45. Calculating the cart totals

46. Validating the account form

47. Validating the shipping form

48. Saving the shipping address

49. Selecting a saved shipping address

50. Fix shipping address error for non authenticated users

51. Redirecting if the cart is empty

52. Checking for quantity changes

53. Syncing if quantities have changed

54. Flashing a message when quantities have changed

55. Setting up for orders

56. Creating an order

57. Attaching variations to order

58. Reducing stock after ordering

59. Meilisearch filter query fix

60. Showing the order confirmation page

61. Attaching orders for registering guest users

62. Scaffolding the orders page

63. Filling in order variation details

64. Returning the order status

65. Detecting order status changes

66. Sending the order status change email

67. Sending an order confirmation email

68. Handling deleted cart records

69. Transferring the guest cart

70. Creating a presenter for the order status

71. Setting up Stripe

72. Creating and updating a PaymentIntent

73. The Stripe card form

74. Validating before payment

75. Submitting a payment

76. Checking for a successful payment

77. Handling Stripe client errors

78. Entangling Stripe customer data

Transcript

00:00

So we have this category tree nicely structured for us, how are we going to start to iterate over this? Well let's start with just a really simple for each loop over in home.blade.php. So we'll redesign this in a second but let's go ahead and say for each categories as category and in that for each and let's go ahead and just output the category title. So category

00:26

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

00:48

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

01:15

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

01:39

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

02:01

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

02:26

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

02:50

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

03:14

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

03:41

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

04:05

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

04:30

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

04:52

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.

05:19

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

05:39

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

06:07

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

06:28

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

06:54

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

07:19

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

07:40

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

07:57

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

Episode summary

In this episode, we dive into how to recursively display a category tree in Laravel using Blade components. We start by simply looping through the categories with a regular foreach in home.blade.php, just to see them output on the screen. Quickly, though, we hit the limitation of regular loops—you'd have to keep adding more loops for every new depth of nesting, which isn't scalable.

To solve this, we set up a Blade component that can call itself recursively, making it possible to display unlimited nested categories without touching the code every time you add a new category level. We walk through making this component, cleaning up some files, and making sure it renders the category and its children in a tree-like structure. We also adjust some styles, using Tailwind CSS and grid layouts, so the categories look good at all screen sizes.

We make sure the top-level categories get a distinct bold style, discuss how to dynamically link each category by its slug, and show that the structure can handle any level of nesting with just a single initial query. By the end of this video, you’ll have a reusable and maintainable way to display nested categories, styled nicely and ready to plug into your app!

Episode discussion

No comments, yet. Be the first!