Filter By Category using Dropdown in Laravel-CodePudding

I'm trying to filter some products by categories using the Dropdown. The filter worked very well, but the category in the Dropdown only showed the categories result, e.g there's a Coffee, and Tea category, if I select Tea, the dropdown only showed the Tea category, unlike before, showing every category available.

Controller :

    if(request()->category_filter){
        $resultCategory = request()->category_filter;
        $products = Product::where('category_id', $resultCategory)->with(['category', 'image'])->get();
    }else{
        $products = Product::with(['category', 'image'])->get();
    }

    return view('home.products', compact('products'));

View :

@extends('home.layouts.app')

@section('page-content')
    <section  id="products">
        <div >
            <div >
                <div >
                    <h2 >Products</h2>
                </div>
                <div >
                    <div >
                        <p>Category</p>
                        <div >
                            <form action="{{ route('homepage.products') }}" method="get">
                                <select name="category_filter" id="category_filter" >
                                    @foreach ($products as $p)
                                        <option value="{{ $p->category->id }}">{{ $p->category->name }}</option>
                                    @endforeach
                                </select>
                                <button type="submit" ><i ></i> Search</button>
                                <a href="{{ route('homepage.products') }}" ><i ></i> Reset</a>
                            </form>
                        </div>
                    </div>
                </div>
                <div >
                    @foreach ($products as $p)
                        <div >
                            <div >
                                @foreach ($p->image as $image)
                                    <a href="{{ asset('storage/'.$image->path) }}" >
                                        <img src="{{ asset('storage/'.$image->path) }}"  alt="">
                                    </a>
                                    @break
                                @endforeach
                                <div >
                                    <h5 >{{ $p->name }}</h5>
                                    <h6 style="color:{{ $p->category->indicator }};">{{ $p->category->name }}</h6>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>
@endsection

CodePudding user response：

You should query the categories separately from the products, so when you filter the products, the category list will not be affected.

if (request()->category_filter) {
    $resultCategory = request()->category_filter;
    $products = Product::where('category_id', $resultCategory)->with(['image'])->get();
} else {
    $products = Product::with(['image'])->get();
}
$categories = Category::whereHas('products')->get();

return view('home.products', compact('products', 'categories'));

Then in your blade, just loop the $categories variable

<select name="category_filter" id="category_filter" >
    @foreach ($categories as $category)
        <option value="{{ $category->id }}">{{ $category->name }}</option>
    @endforeach
</select>