I want to filter product data based on the checkbox selected by the user.
I am testing it by using abc() method on ProductController and sending ajax request from view page to it by passing array data to it.
ProductController
public function abc(Request $request, Product $products)
{
$products = $products->newQuery();
if ($request->has('category')) {
$category = $request->get('category');
$products = $products->whereHas('category', function($query) use($category) {
$query->where('category', 'LIKE', $category.'%'); //query fire to get product as per category name
});
}
if ($request->has('subCategory')) {
$products = $products->whereIn('sub_category_id',$request->subCategory);
}
if ($request->has('color')) {
$color = $request->color;
$products = $products->whereHas('colors', function($q) use($color){
$q->whereIn('colors.id',$color);
});
}
return $products->get();
}
JQuery code
$(document).ready(function(){
var category = "{{ $category }}";
$(document).on("click", ".sub-category-checkbox, .color-checkbox", function(){
var subCategory = [];
var color = [];
$('#subCategoryFilter input[type="checkbox"]:checked').each(function() {
subCategory.push($(this).val());
});
$('#colorFilter input[type="checkbox"]:checked').each(function() {
color.push($(this).val());
});
$.ajax({
url: "{{ route('abc') }}",
type: "GET",
data: { category : category, subCategory : subCategory, color : color },
success: function(data){
console.log(data);
},
error: function(error){
console.log(error.responseJSON);
}
});
});
});
I am testing it so I am getting $category from the controller which is passing this $category to view(show_product.blade.php) which has the category name in it e.g. Men, Women, etc.
The problem I am facing is when a user checks a sub-category checkbox for e.g. shirt, t-shirt, jeans it returns products related to that particular category.
But when a user checks color checkbox it returns an array with product related to the color selected as well as returns another array that has data related to previously selected check fields. For e.g. on fresh page load, it returns all products related to a category passed e.g. Men. At that moment when users click on the black color checkbox, it returns one array with products having color black and another array with products having category as men.
I am not able to figure out why its returns two array data.