Home » Laravel » Livewire » Building a Product Listing with Pagination using Laravel Livewire

Building a Product Listing with Pagination using Laravel Livewire

Posted by NzCoding - 21 October 2024

Introduction

In this guide, we’ll build a dynamic product listing with pagination using Laravel Livewire, which provides real-time interaction without full page reloads. This approach simplifies building a more interactive frontend while leveraging the power of Laravel.

What You’ll Learn:

Setting up Livewire in Laravel
Implementing real-time pagination
Creating reusable Livewire components for product listings
Using Livewire's built-in pagination

Step 1: Set Up Laravel with Livewire

First, ensure your Laravel project is set up. If you don’t already have one, create it:

laravel new product-list

Next, install Livewire:

composer require livewire/livewire

Publish the Livewire assets:

php artisan livewire:publish

Step 2: Create Product Model and Migration

Generate a model and migration for the Product entity:

php artisan make:model Product -m

In the generated migration, define the structure for the products table:

Schema::create('products', function (Blueprint $table) {
    $table->id();
    $table->string('name');
    $table->decimal('price', 8, 2);
    $table->text('description')->nullable();
    $table->timestamps();
});

Migrate the database to apply these changes:

php artisan migrate

Step 3: Seeding the Database with Products

To test pagination, seed the database with dummy products. Use a factory or create them manually by adding a ProductSeeder:

php artisan make:seeder ProductSeeder

In the run method of the seeder, generate multiple products:

public function run()
{
    \App\Models\Product::factory(50)->create();
}

Seed the database:

php artisan db:seed --class=ProductSeeder

Step 4: Create a Livewire Component

Now, we’ll create a Livewire component that will handle the product listing and pagination logic:

php artisan make:livewire product-listing

This generates two files: a PHP class at app/Http/Livewire/ProductListing.php and a Blade view at resources/views/livewire/product-listing.blade.php.

In the ProductListing.php class, update the render method to fetch paginated products:

namespace App\Http\Livewire;

use Livewire\Component;
use Livewire\WithPagination;
use App\Models\Product;

class ProductListing extends Component
{
    use WithPagination;

    public function render()
    {
        $products = Product::paginate(10);
        return view('livewire.product-listing', ['products' => $products]);
    }
}

Step 5: Design the Livewire View

In the product-listing.blade.php file, set up the layout for displaying the paginated products:

<div>
    <h1>Product List</h1>
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Name</th>
                <th>Price</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
            @foreach($products as $product)
            <tr>
                <td>{{ $product->name }}</td>
                <td>${{ $product->price }}</td>
                <td>{{ $product->description }}</td>
            </tr>
            @endforeach
        </tbody>
    </table>

    {{ $products->links() }}
</div>

This uses the built-in paginate() method for simple pagination, while the {{ $products->links() }} automatically renders pagination controls.

Step 6: Integrate Livewire in the Main Blade Layout

To make Livewire work, ensure you have included the necessary Livewire directives in your main layout (e.g., app.blade.php):

<head>
    @livewireStyles
</head>
<body>
    @yield('content')

    @livewireScripts
</body>

Then, within your main content section (such as home.blade.php), include the Livewire component:

@extends('layouts.app')

@section('content')
    <livewire:product-listing />
@endsection

Step 7: Add Routes

Finally, add a route to display the product listing using the Livewire component. Update routes/web.php:

Route::get('/products', function () {
    return view('home');
});

Step 2: Testing the Product Listing with Pagination

Start your Laravel server:

php artisan serve

Now, navigate to http://localhost:8000/products to see your paginated product listing. You’ll be able to click through the pagination links without reloading the entire page, thanks to Livewire’s real-time interaction.

Conclusion

In this tutorial, we explored how to create a product listing with pagination using Laravel and Livewire. This approach gives a smooth user experience with fewer full page reloads, making it easier to manage data-heavy pages. By combining Livewire’s real-time capabilities with Laravel’s power, you can further enhance this project by adding features like search filters, sorting, and more.