multi level subcategory in laravel

Question

i want to show categories list on selectbox with tree structure (multi level subcategory)
similar this:

-electronic
  --camera
    ---sumsung
       ---- other subcategory
       ---- ...
    ---lg
-art

table structure:

+----+------------+-----------+
| id | name       | parent_id |
+----+------------+-----------+
| 1  | electronic | 0         |
+----+------------+-----------+
| 2  | arts       | 0         |
+----+------------+-----------+
| 3  | camera     | 1         |
+----+------------+-----------+
| 4  | sumsung    | 3         |
+----+------------+-----------+
| 4  | lg         | 3         |
+----+------------+-----------+

Category model:

public function children()
{
    return $this->hasMany(self::class, 'parent_id', 'id');
}

public function parent()
{
    return $this->belongsTo(self::class, 'parent_id');

}

and this return only category and 1 level subcategories

<select>
    @foreach($data as $categories)
        <optgroup label="{{ $categories->name }}">
            @foreach($categories->children as $category)
                <option value="{{ $category->id }}">{{ $category->name }}</option>
            @endforeach
        </optgroup>
    @endforeach
</select>

how to show multi level subcategory?

I'm not sure if html5 select supports multiple levels of option groups. — TheMisir
@MehdiJalali one solution is you can use mega menu with <ul /> tag cascading. — Ramesh KC

Ahmad Karimi Ahmad Karimi · Accepted Answer · 2021-01-08T20:28:58

Well, here I didn't followed your approach by putting the categories in a select box, but instead I have chosen to depict it via nested unordered lists, but you can find a way to make it work for you in select box too.

To tackle multilevel category rendering, you can use a recursive approach. Here, I have created a blade template file namely categories.blade.php the code is as below:

categories.blade.php

<!-- Displaying the current category -->
<li value="{{ $category->id }}">{{ $category->name}}

    <!-- If category has children -->
    @if (count($category->children) > 0)

        <!-- Create a nested unordered list -->
        <ul>

            <!-- Loop through this category's children -->
            @foreach ($category->children as $sub)

                <!-- Call this blade file again (recursive) and pass the current subcategory to it -->
                @include('subcategories', ['category' => $sub])
        
            @endforeach
        </ul>
    @endif
</li>

Now, in your parent blade template file, you can include the categories.blade.php file in a way to loop through your categories and display them.

... 

<!-- Start an unoredered list -->
<ul>

    <!-- Loop through each category -->
    @foreach ($categories as $category)

        <!-- Include subcategories.blade.php file and pass the current category to it -->
        @include('subcategories', ['category' => $category])
    @endforeach
<ul>

...

Here is an example that worked for me using the above technique:

Note 1: based on my example, the categories.blade.php file and the parent blade file are assumed to be in the same folder, if you decide to put them in different folder, make sure to put the correct path in the @include statement in the parent blade file.

Note 2: As per this: https://www.w3.org/TR/html401/interact/forms.html#h-17.6, you cannot put nested optgroup tags inside one another, so I suggest you find another way to display your select box.

id	name	key	parent_id
1	electronic	abc	null
2	camera	abc,efg	1
3	Samsung	abc,efg,hij	2
4	other	abc,efg,hij,klm	3

multi level subcategory in laravel

2 Answers