In this video we are going to learn about Services by Category
So let see how can we show the services by category
So first of all lets create a new livewire component
so go to the command prompt and type the command

Php artisan make:livewire ServicesByCategoryComponent

Now switch to project and lets create the route for this component
So go inside the routes directory then open
Web.php file
Now here lets create the new route

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

Now lets open the the ServiceByCategoryComponent class file and here lets add the layout first

<?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 here livewire lifecycle hook method mount
So write here
Alright now lets open the view file
And here remove this comment
And now go to the template directory and from here lets open this
services-by-category.html file in text editor now copy code from here to here
And go to view file and paste here
Now lets 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 here add link

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

Now save it now lets get the services images
So go to the surfside media github page and open this repository and from here download this servies zip and after extracting the zip file
Lets open this folder and
From here lets copy these images and go to project directory and open public folder then images services
Now paste here
Now copy these thumbnails and paste here
Now all done
So lets check it
So switch to browser and refresh the page
Now click on service categories
And now click on any service for showing the services of that category
So lets click here
And here you can see the all services of this category
Now lets another one
So in this way you can Show the Services by Category