Laravel 8 Project Home Services - Services by Category

In this video, we will learn about displaying services by category in our Laravel 8 project.

Let's see how we can show services by category.

First, let's create a new Livewire component. Go to the command prompt and type the following command:

Php artisan make:livewire ServicesByCategoryComponent

Now, switch to the project and let's create a route for this component.

Go to the routes directory and open the Web.php file. Here, let's create a new route:

Route::get('/{category_slug}/services',ServicesByCategoryComponent::class)->name('home.services_by_category');

Next, let's open the ServiceByCategoryComponent class file and add the layout:

<?php

namespace App\Http\Livewire;

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

class ServicesByCategoryComponent extends Component
{
    public $category_slug;

    public function mount($category_slug)
    {
        $this->category_slug = $category_slug;
    }

    public function render()
    {
        $scategory = ServiceCategory::where('slug',$this->category_slug)->first();        
        return view('livewire.services-by-category-component',['scategory'=>$scategory])->layout('layouts.base');
    }
}

Now, add the Livewire lifecycle hook method mount:

Write the necessary code here.

Now, let's open the view file and remove the comment.

Go to the template directory and open the services-by-category.html file in a text editor. Copy the code from here to here and paste it into the view file.

Let's make some changes here:

<div>
    <div class="section-title-01 honmob">
        <div class="bg_parallax image_01_parallax"></div>
        <div class="opacy_bg_02">
            <div class="container">
                <h1>{{$scategory->name}} Services</h1>
                <div class="crumbs">
                    <ul>
                        <li><a href="/">Home</a></li>
                        <li>/</li>
                        <li>{{$scategory->name}}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <section class="content-central">
        <div class="container">
            <div class="row" style="margin-top: -30px;">
                <div class="titles">
                    <h2>{{$scategory->name}} <span>Services</span></h2>
                    <i class="fa fa-plane"></i>
                    <hr class="tall">
                </div>
            </div>
        </div>
        <div class="content_info" style="margin-top: -70px;">
            <div>
                <div class="container">
                    <div class="portfolioContainer">
                        @if($scategory->services->count() > 0)
                        @foreach($scategory->services as $service)
                        <div class="col-xs-6 col-sm-4 col-md-3 nature hsgrids"
                            style="padding-right: 5px;padding-left: 5px;">
                            <a class="g-list" href="{{route('home.service_details',['service_slug'=>$service->slug])}}">
                                <div class="img-hover">
                                    <img src="{{asset('images/services/thumbnails')}}/{{$service->thumbnail}}" alt="{{$service->name}}"
                                        class="img-responsive">
                                </div>
                                <div class="info-gallery">
                                    <h3>{{$service->name}}</h3>
                                    <hr class="separator">
                                    <p>{{$service->tagline}}</p>
                                    <div class="content-btn"><a href="{{route('home.service_details',['service_slug'=>$service->slug])}}"
                                            class="btn btn-primary">Book Now</a></div>
                                    <div class="price"><span>$</span><b>From</b>{{$service->price}}</div>
                                </div>
                            </a>
                        </div>
                        @endforeach
                        @else
                        <div class="col-md-12"><p class="text-center">There is any services.</p></div>
                        @endif
                    </div>
                </div>
            </div>
        </div>            
    </section>
</div>

Now, go to the ServiceCategoriesComponent view file and add a link:

<a href="{{route('home.services_by_category',['category_slug'=>$scategory->slug])}}">

Save the file and let's get the services images.

Go to the Surfside Media GitHub page and open the repository. Download the services zip file and extract it.

Open the folder and copy the images. Go to the project directory and open the public folder, then images, and services. Paste the images here.

Copy the thumbnails and paste them here.

All done! Let's check it.

Switch to the browser and refresh the page. Click on service categories and then click on any service to show the services of that category.

Let's click here. Here, you can see all the services of this category.

Let's try another one.

So, in this way, you can show services by category.