使用Ajax过滤器购物并加载更多功能

Question

我正在使用ajax过滤器和加载更多功能的商店页面，当没有应用过滤器时，加载更多工作完美，相同的过滤器工作良好，但当我点击加载更多时，它会变得有bug，当我删除过滤器时它显示没有数据。

加载更多按钮:

<button id="load-btn" type="submit">
<span>Load more</span>
</button>

加载更多点击功能:

var page = 1;
var clicked = false
$("#load-btn").click( function(e) {
page++;
clicked=true;
filter();
}
);

Ajax请求:

function filter() {
var url = '{{ route("front.shop.filter") }}';
var categories = [];
$(".category:checked").each(function(){
categories.push($(this).val());
console.log(categories)

});

$.ajax({
url: url,
data: {
categories:categories,
page: page
},
type: 'post',
beforeSend:function(){
$('.load-more').show(); // loader

if(!clicked){
$('#products').html('');

}
}
}).done(function(data){
setTimeout(function(){ 
$('.load-more-skelton').hide();
if(clicked == 1){
$('#product').append(data.view);
clicked = false;
page = 1;
} else {
$('#product').html(data.view);
}

}, 1500);

});
}

SearchController

public function filters(Request $request)
{
$products = Product::where('status' , 'active');

if($request->categories){
$products = $products->whereIn('category_id',$request->categories);
} 
$products = $products->latest()->paginate(8);

$view = view('front.includes.view',compact('products'))->render();

return response()->json(['view' => $view]); 
}

谁能帮我实现加载更多的功能?

Answer 1

这将更快，因为您不会从DB获取所有产品:

$query = Product::query();
$query->where('status' , 'active')->latest();
if ($request->categories) {
$query->whereIn('category_id', $request->categories);
}
$products = $query->paginate(8);