Laravel 8 Project Home Services - Admin Fetch Services By Category

In this video, we will learn about fetching services by their category in the admin panel of our Laravel 8 project.

Let's see how we can fetch services by their category as an admin.

First of all, let's create a new Livewire component.

Switch to the command prompt and create the new Livewire component by typing the following command:

php artisan make:livewire admin/AdminServicesByCategroyComponent

Now, let's run the application:

php artisan serve

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

Go inside the routes directory and open the web.php file. Create a new route inside the Admin Middleware route group:

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

Now, let's open the AdminServicesByCategoryComponent class file and write the following code:

<?php

namespace App\Http\Livewire\Admin;

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

class AdminServicesByCategoryComponent extends Component
{
    use WithPagination;
    public $category_slug;

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

    public function render()
    {
        $category = ServiceCategory::where('slug',$this->category_slug)->first();
        $services = Service::where('service_category_id',$category->id)->paginate(10);
        return view('livewire.admin.admin-services-by-category-component',['category_name'=>$category->name,'services'=>$services])->layout('layouts.base');
    }
}

Next, let's open the AdminServicesByCategoryComponent View file and write the following code inside this file:

<div>
    <style>
        nav svg{
            height: 20px;
        }
        nav .hidden{
            display: block !important;
        }
    </style>
    <div class="section-title-01 honmob">
        <div class="bg_parallax image_02_parallax"></div>
        <div class="opacy_bg_02">
            <div class="container">
                <h1>{{$category_name}} Services</h1>
                <div class="crumbs">
                    <ul>
                        <li><a href="/">Home</a></li>
                        <li>/</li>
                        <li>{{$category_name}} Services</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <section class="content-central">
        <div class="content_info">
            <div class="paddings-mini">
                <div class="container">
                    <div class="row portfolioContainer">
                        <div class="col-md-12 profile1">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <div class="row">
                                        <div class="col-md-6">
                                            {{$category_name}} Service
                                        </div>
                                        <div class="col-md-6">
                                            <a href="#" class="btn btn-info pull-right">Add New</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel-body">
                                    @if(Session::has('message'))
                                        <div class="alert alert-success" role="alert">{{Session::get('message')}}</div>
                                    @endif
                                    <table class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>Image</th>
                                                <th>Name</th>
                                                <th>Price</th>
                                                <th>Status</th>
                                                <th>Category</th>
                                                <th>Created At</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($services as $service)
                                                <tr>
                                                    <td>{{$service->id}}</td>
                                                    <td><img src="{{asset('images/services/thumbnails')}}/{{$service->thumbnail}}" height="60" /> </td>
                                                    <td>{{$service->name}}</td>
                                                    <td>{{$service->price}}</td>
                                                    <td>
                                                        @if($service->status)
                                                            Active
                                                        @else
                                                            Inactive
                                                        @endif
                                                    </td>
                                                    <td>{{$service->category->name}}</td>
                                                    <td>{{$service->created_at}}</td>
                                                    <td>
                                                        <a href="#"><i class="fa fa-edit fa-2x text-info"></i></a>
                                                        <a href="#" style="margin-left:10px;"><i class="fa fa-times fa-2x text-danger"></i></a>
                                                    </td>                              
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                    {{$services->links()}}
                                </div>
                            </div>                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

Now, let's open the admin-service-category-component view file and add a link for services:

<a href="{{route('admin.services_by_category',['category_slug'=>$scategory->slug])}}" style="margin-right:10px "><i class="fa fa-list fa-2x text-info"></i></a>

Now, everything is done. Let's check it.

Switch to the browser and refresh the page. You can see the link for services.

Click on any link, and you can see all the services of this category.

Let's check another category.

So, in this way, you can fetch services by their category.