Livewire Sidebar Filters for E-Shop Products: Step-by-Step

Have you ever needed a checkbox-based filter for a list, like in e-shop sidebars? In this tutorial, we will use Livewire to build this step-by-step and update the products list without page refresh.

Notice: the link to the repository will be at the end of the tutorial.

We will use Livewire features like Events and Lifecycle Hooks to achieve the end result.

So let's dive in!

Laravel Project Preparation

For this demo, we'll use our own Laravel Breeze Pages Skeleton which will give us a Breeze-like layout but with a public page for the products list.

As you saw in the screenshot above, we will filter by three criteria:

• Price (within the Product itself)
• Category (a belongsTo relationship)
• Manufacturer (a belongsTo relationship)

So first, we need Models and Migrations for all of them.

php artisan make:model Category -m
php artisan make:model Manufacturer -m
php artisan make:model Product -m

database/migrations/xxxx_create_categories_table.php:

public function up(): void
{
    Schema::create('categories', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->timestamps();
    });
}

app/Models/Category.php:

class Category extends Model
{
    protected $fillable = [
        'name',
    ];
 
    public function products(): HasMany
    {
        return $this->hasMany(Product::class);
    }
}

database/migrations/xxxx_create_manufacturers_table.php:

public function up(): void
{
    Schema::create('manufacturers', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->timestamps();
    });
}

app/Models/Manufacturer.php:

class Manufacturer extends Model
{
    protected $fillable = [
        'name',
    ];
 
    public function products(): HasMany
    {
        return $this->hasMany(Product::class);
    }
}

database/migrations/xxxx_create_products_table.php:

public function up(): void
{
    Schema::create('products', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->text('description');
        $table->decimal('price');
        $table->foreignId('category_id')->constrained();
        $table->foreignId('manufacturer_id')->constrained();
        $table->timestamps();
    });
}

app/Models/Manufacturer.php:

class Product extends Model
{
    protected $fillable = [
        'name',
        'description',
        'price',
        'category_id',
        'manufacturer_id',
    ];
 
    public function category(): BelongsTo
    {
        return $this->belongsTo(Category::class);
    }
}

Livewire Components

Next, after the installation of Livewire itself, we will need two Livewire components:

• One to show the products
• And another one for a sidebar with filters

When we click on any filter in the sidebar, the event will be sent to the Products component.

php artisan make:livewire Products
php artisan make:livewire Sidebar

First, let's just show filters and products, and later we will actually make filters work.

Here's how to add Livewire components in the Blade...