Laravel 10 E-Commerce Project - Filtering Products by Brand

In this tutorial, we will learn about filtering products by brands.

Let's explore how to filter products by brands.

Displaying All Brands on the Shop Page

First, let's display all brands on this shop page.

For that, go to the ShopController and inside the index method, fetch all brands and return these brands to the view as follows:

public function index(Request $request)
{   

    $brands = Brand::orderBy('name','ASC')->get();    
    return view('shop',['products'=>$products,'page'=>$page,'size'=>$size, 'order'=>$order,'products'=>$products, 'brands'=>$brands]);
}

Displaying Brands in the Shop Blade Template

Now, go to the shop.blade.php file and display the brands:

<div class="accordion-item category-rating">
    <h2 class="accordion-header" id="headingTwo">
        <button class="accordion-button" type="button" data-bs-toggle="collapse"
            data-bs-target="#collapseTwo">
            Brand
        </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse show"
        data-bs-parent="#accordionExample">
        <div class="accordion-body category-scroll">
            <ul class="category-list">
                @foreach ($brands as $brand)
                <li>
                    <div class="form-check ps-0 custome-form-check">
                        <input class="checkbox_animated check-it" id="br{{$brand->id}}" name="brands" @if(in_array($brand->id,explode(',',$q_brands))) checked="checked" @endif value="{{$brand->id}}" type="checkbox" onchange="filterProductsByBrand(this)">
                        <label class="form-check-label">{{$brand->name}}</label>
                        <p class="font-light">({{$brand->products->count()}})</p>
                    </div>
                </li>
                @endforeach
                
            </ul>
        </div>
    </div>
</div>

Adding a Hidden Field to the Filter Form

Inside the filter form, add a hidden field for brands:

<input type="hidden" id="brands" name="brands" value="{{$q_brands}}" />

Handling the Change Event

Now, write code to handle the change event:

<script>        
        $(function(){
            $("#pagesize").on("change",function(){
                $("#size").val($("#pagesize option:selected").val());
                $("#frmFilter").submit();
            });                     
        });
</script>

Creating a JavaScript Function for Filtering Brands

Now, create a JavaScript function for filtering brands:

function filterProductsByBrand(brand){
    var brands = "";
    $("input[name='brands']:checked").each(function(){
        if(brands=="")
        {
            brands += this.value;
        }
        else{
            brands += "," + this.value;
        }
    });
    $("#brands").val(brands);
    $("#frmFilter").submit();
}

Updating the Shop Controller for Filtering

Now, go to the Shop controller and add a where clause for filtering:

public function index(Request $request)
{
    $brands = Brand::orderBy('name','ASC')->get();    
    $q_brands = $request->query("brands");
    $products = Product::where(function($query) use($q_brands){
                            $query->whereIn('brand_id',explode(',',$q_brands))->orWhereRaw("'".$q_brands."'=''");
                        })                                            
                ->orderBy('created_at','DESC')->orderBy($o_column,$o_order)->paginate($size);
    return view('shop',['products'=>$products,'page'=>$page,'size'=>$size,'order'=>$order,'brands'=>$brands,'q_brands'=>$q_brands,'categories'=>$categories,'q_categories'=>$q_categories]);     
}

Testing the Filtering Functionality

Now, let's check. Go to the shop page, and you can see all the brands.

Now, let's check on any one brand, and you can see the products from this brand only.

Now, let's display the selected brand.

So, in this way, you can filter products by brand.