nacha's avatar
Level 2

how to display products with checkbox(products related to color ,size and brand :filters)

what's wrong in my code what can I change to make it work because for exemple if I have 3 products have same brand so in brand filter display the brand 3 times (gucci ,gucci,gucci with checkbox) and it's same for other filters and the checkbox not functional how to make it work

I want when check one or multiple (size,color,brand) with checkbox display the products related to the product filters(size,color,brand) (for exemple check size :xl and color:red display products of xl and red)

help please thank you

and this is categorycontroller

 public function show($slug)
    {
        $category = $this->categoryRepository->findBySlug($slug);
        $pagination = 15;
       
        
       
        if (request()->category) {
            $products = Product::with('categories')->whereHas('categories', function ($query) {
                $query->whereIn('id', request('category'))->OrderBy('id', 'desc')->paginate($pagination);
             });
            };
            if (request()->brand) {
                $products = Product::where('brand_id', request('brand'))->OrderBy('id', 'desc')->paginate($pagination);
                 
                };
                if (request()->size) {
                    $products = ProductAttribute::where('id','=',1)->where('id', request('size'))->OrderBy('id', 'desc')->paginate($pagination);
                    
                    };

                    if (request()->color) {
                        $products = ProductAttribute::where('id','=',2)->where('id', request('color'))->OrderBy('id', 'desc')->paginate($pagination);
                        
                        };
      
           
        
        $products = Product::OrderBy('name', 'asc')->paginate($pagination);
   
    
       
        return view('site.pages.category', compact('category','products'));
    }
}

category.blade.php:

for brand:

   @foreach($products as $product)
                            <div class="card-body">
                            
                                <form>
                                
                                    <label for="brand_id" class="form-check">
                                    
                                        <input class="form-check-input" id="brand_id" value="{{$product->brand->id}}" type="checkbox">
                                        <span class="form-check-label">
                                      {{ $product->brand->name }}
                                        </span>
                                       
                                    </label>

for size:

 @foreach($products as $product)
                              @foreach($product->attributes as $attributeValue)
                              @if ($attributeValue->attribute_id == 1)
                                <form>
                                    <label for="size" class="form-check">
                                        <input class="form-check-input" id="attribute" value="{{$attributeValue->value}}" type="checkbox">
                                        <span class="form-check-label">
                                      {{ $attributeValue->value }}
                                      
                                        </span>
                                    </label>

for color:

@foreach($products as $product)
                            @foreach($product->attributes as $attribute)
                            @foreach($product->attributes as $attributeValue)
                           
                            @if ($attribute->id == 2)
                                <form>
                                    <label for="color" class="form-check">
                                        <input class="form-check-input" id="{{$attributeValue->id}}" value="{{$attributeValue->value}}" type="checkbox">
                                        <span class="form-check-label">
                                      {{ $attributeValue->value}}
                                      
                                        </span>
                                    </label>
0 likes
4 replies
ollie_123's avatar

I could be wrong but this sounds like you would require Ajax. Unfortunately it's not my strong suit so hopefully someone more knowledgeable on the subject will come along soon.

jlrdw's avatar

Well if you want to use Ajax / javascript, unfortunately I don't think a quick forum solution will work, to understand what's going on you still need to learn Ajax and JavaScript.

And it's hard to know what JavaScript library you are going to want to work with.

There's plain JavaScript, jQuery, Vue, React, Angular, and others.

One of these libraries alone has a learning curve.

Are you aware that Jeffrey right here on this site has a free vue course.

And some videos on react also.

Also have you thought about looking at some shopping sites on GitHub and get some ideas from the code there.

I'm not saying use one of them just browse and see how they did things.

Please or to participate in this conversation.