In this video we are going to learn about Show Subcategories on Shop Page.
So lets see how can we Show Subcategories on Shop Page.
So, Switch to the project and lets open the shop-component.blade.php file and make change as following inside the category widget.


<div class=\"widget mercado-widget categories-widget\">
<h2 class=\"widget-title\">All Categories</h2>
<div class=\"widget-content\">
<ul class=\"list-category\">
@foreach ($categories as $category)
<li class=\"category-item {{count($category->subCategories) > 0 ? 'has-child-cate':''}}\">
<a href=\"{{route('product.category',['category_slug'=>$category->slug])}}\" class=\"cate-link\">{{$category->name}}</a>
@if(count($category->subCategories)>0)
<span class=\"toggle-control\">+</span>
<ul class=\"sub-cate\">
@foreach($category->subCategories as $scategory)
<li class=\"category-item\">
<a href=\"#\" class=\"cat-link\"><i class=\"fa fa-caret-right\"></i> {{$scategory->name}}</a>
</li>
@endforeach
</ul>
@endif
</li>
@endforeach
</ul>
</div>
</div>


Now go to the base.blade.php file and inside this file lets uncomment this.

<script src=\"{{ asset('assets/js/chosen.jquery.min.js') }}\"></script>


Now lets open the funcitons.js file from the public directory.
So just go inside the public directory then assets directory then js.
and from here lets open the funcitons.js file.
Inside this file go to the line no 78.
and comment this line of codes.

// if($(\"select:not(.except-chosen)\").length > 0){
// $(\"select:not(.except-chosen)\").each(function(){
// $(this).chosen();
// });
// }


Go to the category-component.blade.php file and here also inside the categories-widget make the following changes.

<div class=\"widget mercado-widget categories-widget\">
<h2 class=\"widget-title\">All Categories</h2>
<div class=\"widget-content\">
<ul class=\"list-category\">
@foreach ($categories as $category)
<li class=\"category-item {{count($category->subCategories) > 0 ? 'has-child-cate':''}}\">
<a href=\"{{route('product.category',['category_slug'=>$category->slug])}}\" class=\"cate-link\">{{$category->name}}</a>
@if(count($category->subCategories)>0)
<span class=\"toggle-control\">+</span>
<ul class=\"sub-cate\">
@foreach($category->subCategories as $scategory)
<li class=\"category-item\">
<a href=\"#\" class=\"cat-link\"><i class=\"fa fa-caret-right\"></i> {{$scategory->name}}</a>
</li>
@endforeach
</ul>
@endif
</li>
@endforeach
</ul>
</div>
</div>

Now its done so lets check it.
So switch to the browser and refresh the page.
And shop page you can see the categories list.
If I click on category you can see the subcategories.
So in this way you can Show Subcategories on Shop Page.