Ecommerce Product Filter using Laravel Livewire

Usage

      @livewire('product-filter')
    

Documentation

This is a simple e-commerce filter component using Laravel Livewire. Let's break down this component step by step.

Rendering Initial Products

return view('livewire.product-filter',[
            'products' => DummyProduct::filter($this->filters)->orderBy($this->orderBy['key'], $this->orderBy['direction'])->paginate(12),
        ]);

By default we get all products from the database, paginate the results and apply the default ordering of created_at date.

Filtering Products

In this demo I am using a package named Tucker-Eric/EloquentFilter. This package requires you to add an additional scope method named filter to your Eloquent query and pass in all the filters in the array as the parameter.

Initially all the filters are empty.

   [
        'price' => [],
        'colors' => [],
        'type' => [],
        'connectionType' => [],
        'brand' => [],
        'rating' => []
   ];

We have used livewire's wire:model to bind these properties to different filters on the front end. When the user selects a value on the backend it updates the filters array and hence Products are filtered. Sleek, isn't it?

Query Parameters

One important thing to note in the Component class is:

protected $queryString = ['filters'];

With this whenever the user selects the filter value, it updates the URL's query parameter. This is useful since user may want to share the filtered product URL or bookmark the URL.

However, since filters are an array and only user-changed values goes into the URL. It creates a problem when a user loads the URL along with the query parameter (on reload the filters array will only have the array parameters passed in the URL and not the others defined.)

For this we have applied a hack on the mount method

$this->filters = array_merge($this->filtersToMerge, $this->filters);

Filters on frontend

Showing filter's on the front end is straightforward. We have defined different filter options in the component.

    public array $filterOptions = [
        'prices' => ['0,25', '25,50', '50,100', '100,200', '200'],
        'colors' => ['blue', 'red', 'pink', 'yellow', 'orange', 'dark', 'green', 'purple', 'white'],
        'connection_type' => ['wired', 'wireless'],
        'brands' => ['sony', 'apple', 'bose', 'beats', 'panasonic', 'amazon-basics'],
        'types' => ['earbuds', 'earphones', 'overhead'],
        'ratings' => [4,3,2,1],
    ];

We just loop through them on the front end and use the filters property to keep track of which values are selected.