Laravel E-Commerce Project - Show Subcategories on Shop Page

In this video, we will learn how to display subcategories on the shop page.

Let's explore how to achieve this. First, switch to the project and open the shop-component.blade.php file. Make the following changes 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>

Next, go to the base.blade.php file and uncomment the following code:


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

Now, open the functions.js file located in the public directory. To find this file, navigate to the public directory, then the assets directory, and finally the js directory. Inside this file, go to line number 78 and comment out the following line of code:


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

Also, make the following changes to the category-component.blade.php file, inside the categories 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>