Laravel fully dynamic catalog filter

Best Answer

Level 1

Problem solved. I think i shall leave my way to do it for somebody who wants to check out how its done.

Properties are in hasMany relation with products with property value pivot

Here is the code of function that retrieves them from database based on products builder. Works fast enough even for 5k products and 15 possible properties.

$properties = $products->flatMap(function ($item){
          return $item->properties->where('filter', 1);
        })->groupBy('id');
        $properties = $properties->map(function ($item){
            $item = $item->unique('pivot.property_value');
            return [
                'id' => $item->first()->id,
                'name' => $item->first()->name,
                'values' => $item->pluck('pivot.property_value')
            ];
        });

View code to display form. $filtersActive is simple collect(json_decode($request->filters)) at controller

@foreach($filters['properties'] as $filter)
        @if(count($filter['values']) > 1 || $filtersActive->keys()->contains($filter['id']))
            <div class="multifilter multifilter_material @if($filtersActive->keys()->contains($filter['id'])) multifilter_active @endIf">
                <div class="button-dropdown">
                <span class="button button_left button_s arrow-bottom multifilter__button">
                    <span class="multifilter__title">
                        {{$filter['name']}}
                            @if($filtersActive->keys()->contains($filter['id']))
                                    : {{$filtersActive[$filter['id']][0]}}
                                @if(count($filtersActive[$filter['id']])>1)
                                + {{count($filtersActive[$filter['id']])-1}}
                                @endIf
                            @endIf
                    </span>
                </span>
                    @if($filtersActive->keys()->contains($filter['id']))
                        <span class="button button_right button_s multifilter__reset"></span>
                    @endif
                    <div class="dropdown multifilter_sectioned">
                        <div class="multifilter-list">
                            <div class="multifilter-list__section">
                                <div class="multifilter-list__section_header">
                                   {{$filter['name']}}
                                </div>
                                <div class="multifilter-list multifilter-list__section_list" id="{{$filter['id']}}">
                                    @foreach($filter['values'] as $value)
                                        <div class="multifilter-item">
                                           <label class="multifilter-item__label @if($filtersActive->keys()->contains($filter['id']) && in_array( $value, $filtersActive[$filter['id']])) checked @endif"
                                                   val="{{$value}}"><input class="checkbox" type="checkbox" >{{$value}}
                                           </label>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                            <div class="multifilter-actions">
                                <span class="button button_s button_blue w-100 text-center multifilter-actions__apply" onclick="applyFilters()">Применить</span>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        @endforeach

Jquery to push filters to HTTP query (F**k u AJAX, simple STR_replace does fine)

I've used JSON.stringify to easily retrieve filters at controller

function applyFilters() {
        if ($('.multifilter-list.multifilter-list__section_list').find('.multifilter-item__label.checked').length) {
            let filters = {};
            $('.multifilter-list.multifilter-list__section_list').each(function () {
                let name =  $(this).attr('id');
                let values = [];
                    $(this).find('.multifilter-item__label.checked').each(function () {
                        values.push($(this).attr('val'));
                    });
                if (values.length > 0){
                    filters[name] = values;
                }
            });
        let link = '{{$request->FullUrlWithQuery(['filters' => ''])}}';
        link = link.replace('filters=','filters=' + JSON.stringify(filters));
        window.location.href = link;
        }
    }

Now we have to apply them to our products and its done

if ($request->filters){
           $products = $this->applyFilters($request->filters, $products);
       }

 public function applyFilters($filters, $products){
        $filters = json_decode(stripslashes($filters));
        foreach ($filters as $id => $values) {
                $products = $products->whereHas('properties', function ($query) use ($id, $values){
                    $query->where('id', $id)->whereIn('property_value', $values);
                });
        }
        return $products;
    }

Works absolutely fine, keeps pagination alive, and new filters are generated based on previous iteration, which means, if user selects "blue" in filter, and there is no blue coats, he wont be able to select "coats" in filter and get 0 results;