- Hello, Visitor
- Thursday, December 12, 2024
Search Result
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.
Related posts
Laravel Livewire 3: Building Dynamic Web Apps Made Easy
Live Form Validation with Laravel Livewire
Auto Generate Slug with Laravel Livewire
Laravel Livewire Crud - Part 04 (Delete Data)
Laravel Livewire Crud - Part 03 (Edit Data)
Laravel Livewire Crud - Part 02 (Get Data from Database)
Laravel Livewire Crud - Part 01 (Add Data to Database)
Laravel Livewire Installation & Layout Setup
Laravel Livewire Image Upload with Preview
Laravel Livewire CRUD with Bootstrap Modal
Popular Posts
Featured Post
Categories
- Html Css 7
- More 3
- Card Design 2
- Spinner 2
- GitHub 2
- Laravel 16
- Livewire 12
- Javascript 1
- Form Design 1
- SEO 1
- Php 0
Leave a Reply