Step 1: Setting Up the Product Model and Database
1. Create the Product Model
Run the following Artisan command to generate the Product model and migration:
php artisan make:model Product -m
2. Update the Migration File
Open the generated migration file and define the structure of the products table:
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateProductsTable extends Migration
{
public function up()
{
Schema::create('products', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('category');
$table->decimal('price', 8, 2);
$table->timestamps();
});
}
public function down()
{
Schema::dropIfExists('products');
}
}
3. Run the Migration
Execute the migration to create the products table in your database:
php artisan migrate
4. Seed Sample Data
Create a seeder to populate the products table with sample data:
php artisan make:seeder ProductSeeder
Open the generated seeder file in database/seeders/ProductSeeder.php and add the following:
<?php
namespace Database\Seeders;
use Illuminate\Database\Seeder;
use App\Models\Product;
class ProductSeeder extends Seeder
{
public function run()
{
Product::create([ 'name' => 'Smartphone', 'category' => 'electronics', 'price' => 699.99 ]);
Product::create([ 'name' => 'Laptop', 'category' => 'electronics', 'price' => 999.99 ]);
Product::create([ 'name' => 'T-Shirt', 'category' => 'fashion', 'price' => 19.99 ]);
Product::create([ 'name' => 'Jeans', 'category' => 'fashion', 'price' => 49.99 ]);
Product::create([ 'name' => 'Headphones', 'category' => 'electronics', 'price' => 199.99 ]);
}
}
Run the seeder to populate the database:
php artisan db:seed --class=ProductSeeder
Step 2: Creating the Livewire Component
We’ll begin by creating a new Livewire component for the search and filtering functionality:
php artisan make:livewire SearchFilter
This will generate:
app/Livewire/SearchFilter.php– The PHP class for the component logic.resources/views/livewire/search-filter.blade.php– The Blade file for the search UI.
Step 3: Setting Up the Component Logic
Open SearchFilter.php and update it with the following logic:
<?php
namespace App\Livewire;
use Livewire\Component;
use App\Models\Product;
class SearchFilter extends Component
{
public $search = '';
public $category = '';
public $priceRange = '';
public function render()
{
$products = Product::query()
->when($this->search, function ($query) {
$query->where('name', 'like', '%' . $this->search . '%');
})
->when($this->category, function ($query) {
$query->where('category', $this->category);
})
->when($this->priceRange, function ($query) {
[$min, $max] = explode('-', $this->priceRange);
$query->whereBetween('price', [(int)$min, (int)$max]);
})
->get();
return view('livewire.search-filter', [
'products' => $products,
]);
}
}
Key Points:
Dynamic Filters: The
when()method dynamically applies filters based on user input.Search Field: Filters results based on product names.
Category and Price Filters: Allows filtering by category and price range.
Step 4: Creating the Search and Filter UI
Open search-filter.blade.php and design the search and filter interface:
<div>
<div>
<input type="text" placeholder="Search products..." wire:model="search">
<select wire:model="category">
<option value="">Select Category</option>
<option value="electronics">Electronics</option>
<option value="fashion">Fashion</option>
</select>
<select wire:model="priceRange">
<option value="">Select Price Range</option>
<option value="0-50">$0 - $50</option>
<option value="50-100">$50 - $100</option>
<option value="100-500">$100 - $500</option>
</select>
</div>
<div>
@if ($products->isEmpty())
<p>No products found.</p>
@else
<ul>
@foreach ($products as $product)
<li>
<h3>{{ $product->name }}</h3>
<p>Category: {{ $product->category }}</p>
<p>Price: ${{ $product->price }}</p>
</li>
@endforeach
</ul>
@endif
</div>
</div>
Step 5: Real-Time Search in Action
Real-time search allows users to see the results instantly as they type in the search box. This is achieved through the wire:model** binding**, which keeps the backend and frontend properties in sync without page reloads.
Example:
If a user types “Phone” in the search box, Livewire will filter and display only the products matching “Phone” instantly.
Final Output
With the above setup, your search and filtering component will:
Allow users to search for products by name in real time.
Filter results by category and price range dynamically.
Display updated results instantly without reloading the page
Key Features Covered Today
Real-time search using
wire:model.Dynamic filtering with multiple criteria.
Query building using
when().Responsive and styled UI for search and filter components.