Laravel 11 E-Commerce - Products Filter By Brand

Welcome back to the Laravel E-Commerce Tutorial. In this video, we will learn about filtering products by brands.

Step 1: Fetch All Brands

First, let's display all brands on the shop page. Go to the ShopController and fetch all brands:

$brands = Brand::orderBy('name','ASC')->get();

Step 2: Return Brands to the View

Return the brands to the view:

'products'=>$products, 'brands'=>$brands

Step 3: Display Brands on the Shop Page

Go to the shop.blade.php file and display the brands:

<div class="accordion" id="brand-filters">
	<div class="accordion-item mb-4 pb-3">
		<h5 class="accordion-header" id="accordion-heading-brand">
			<button class="accordion-button p-0 border-0 fs-5 text-uppercase" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-filter-brand" aria-expanded="true" aria-controls="accordion-filter-brand">
				Brands
				<svg class="accordion-button__icon type2" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg">
					<g aria-hidden="true" stroke="none" fill-rule="evenodd">
						<path d="M5.35668 0.159286C5.16235 -0.053094 4.83769 -0.0530941 4.64287 0.159286L0.147611 5.05963C-0.0492049 5.27473 -0.049205 5.62357 0.147611 5.83813C0.344427 6.05323 0.664108 6.05323 0.860924 5.83813L5 1.32706L9.13858 5.83867C9.33589 6.05378 9.65507 6.05378 9.85239 5.83867C10.0492 5.62357 10.0492 5.27473 9.85239 5.06018L5.35668 0.159286Z" />
					</g>
				</svg>
			</button>
		</h5>
		<div id="accordion-filter-brand" class="accordion-collapse collapse show border-0" aria-labelledby="accordion-heading-brand" data-bs-parent="#brand-filters">
			<div class="search-field multi-select accordion-body px-0 pb-0">
				<ul class="list list-inline mb-0 brand-list">
					@foreach ($brands as $brand)
						<li class="list-item">
							<span class="menu-link py-1"> <input type="checkbox" name="brands" value="{{$brand->id}}" class="chk-brand"  @if(in_array($brand->id,explode(',',$f_brands))) checked="checked" @endif  /> {{$brand->name}}</span> <span class="text-right float-right">{{$brand->products()->count()}}</span>
						</li>
					@endforeach                                                                
				</ul>
			</div>
		</div>
	</div>
</div>

Step 4: Add Hidden Field to the Filter Form

Inside the filter form, add one more input hidden field:

<input type="hidden" name="brands" id="hdnBrands" />

Step 5: Bind Checkbox Change Event

Bind the checkbox change event:

@push('scripts')
    <script>
        $(function(){           

            $("input[name='brands']").on("change",function(){
                var brands ="";
                $("input[name='brands']:checked").each(function(){
                    if(brands=="")
                    {
                        brands += $(this).val();
                    }
                    else{
                        brands += "," + $(this).val();
                    }
                });
                $("#hdnBrands").val(brands);
                $("#frmfilter").submit();
            });

            
        });
    </script>
@endpush

Step 6: Filter Products by Brand

Go to the ShopController and add a where condition to filter the brand:

Create a variable for getting the query string value for the brands:

$f_brands = $request->query('brands');

Add the where condition:

public function index(Request $request)
{        
	$size = $request->query('size')?$request->query('size'):12;
	$sorting = $request->query('sorting')?$request->query('sorting'):'default';	
	$f_brands = $request->query('brands');	

	if($sorting=='date')   
	{
		$products = Product::where(function($query) use ($f_brands){
								$query->whereIn('brand_id',explode(',',$f_brands))->orWhereRaw("'".$f_brands."' = ''");
							})							
							->orderBy('created_at','DESC')->paginate($size);  
	}
	else if($sorting=="price")
	{
		$products = Product::where(function($query) use ($f_brands){
			$query->whereIn('brand_id',explode(',',$f_brands))->orWhereRaw("'".$f_brands."' = ''");
		})		
		->orderBy('regular_price','ASC')->paginate($size); 
	}
	else if($sorting=="price-desc")
	{
		$products = Product::where(function($query) use ($f_brands){
			$query->whereIn('brand_id',explode(',',$f_brands))->orWhereRaw("'".$f_brands."' = ''");
		})		
		->orderBy('regular_price','DESC')->paginate($size); 
	}
	else{
		$products = Product::where(function($query) use ($f_brands){
			$query->whereIn('brand_id',explode(',',$f_brands))->orWhereRaw("'".$f_brands."' = ''");
		})		
		->paginate($size);  
	}           	
	$brands = Brand::orderBy("name","ASC")->get();
	return view('shop',compact("products","size","sorting","brands","f_brands"));
}  

Final Step: Check the Brand Filter

Now, let's check the brand filter. Go to the shop page, and you can see all the brands. Check on any one brand, and you can see the products from that brand only. If you uncheck the checkbox, you can see the brand filter removed.

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

That's all about products filter by brand.