Laravel Home Services Project - Show Service Categories on Homepage

In this video, we will learn about displaying service categories on the homepage of our Laravel project.

Let's see how we can show service categories on the homepage.

Switch to the project and open the HomeComponent.php class file.

Inside the render method, let's fetch the service categories:

<?php

namespace App\Http\Livewire;

use App\Models\ServiceCategory;
use Livewire\Component;

class HomeComponent extends Component
{
    public function render()
    {
        $scategories = ServiceCategory::inRandomOrder()->take(18)->get();
        return view('livewire.home-component',['scategories'=>$scategories])->layout('layouts.base');

    }
}

Next, let's open the home-component.blade.php view file and add the following code:

<div class="content_info content_resalt">
	<div class="container" style="margin-top: 40px;">
		<div class="row">
		</div>
	</div>
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<ul id="sponsors" class="tooltip-hover">
					@foreach($scategories as $scategory)
						<li data-toggle="tooltip" title="" data-original-title="{{$scategory->name}}"> 
							<a href="{{route('home.services_by_category',['category_slug'=>$scategory->slug])}}">
								<img src="{{ asset('images/categories') }}/{{$scategory->image}}" alt="{{$scategory->name}}">
							</a>
						</li>
					@endforeach                            
				</ul>
			</div>
		</div>
	</div>
</div>

Save this and let's check the result.

Switch to the browser and refresh the page.

Here, you can see the service categories.

If you refresh the page, you will see a random selection of categories.

Every time you refresh the page, it will show a different set of service categories.

If you click on any category, you will see all the services belonging to that category.

So, in this way, you can display service categories on the homepage.