Laravel load more product in multiple category with ajax
//load more product in Popular products section
Route::get('/products/load-more',
'Front\FrontendController@loadMoreProducts')
->name('products.load-more');
//controller code,
public function loadMoreProducts(Request $request)
{
$gs = Generalsetting::findOrFail(1);
$start = $request->input('start');
$category = $request->input('category');
$query = Product::where($category, '=', 1)
->where('status', '=', 1)
->when($gs->affilate_product == 0, function ($q) {
return $q->where('product_type', '=', 'normal');
})
->orderBy('id', 'desc')
->skip($start)
->take(3)
->get();
$products = $query->map(function($product) {
return [
'id' => $product->id,
'slug' => $product->slug,
'thumbnail' => $product->thumbnail,
'name' => $product->name,
'showPrice' => $product->showPrice(),
'showPreviousPrice' => $product->showPreviousPrice(),
'ratings' => \App\Models\Rating::ratings($product->id)
];
});
return response()->json([
'products' => $products
]);
}
//blade file code,
<section class="product-tab">
<div class="container">
<div class="row">
<div class="col-lg-12 remove-padding">
<div class="section-top">
<h2 class="section-title">
{{ $langg->lang832 }}
</h2>
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" id="pills-tab1-tab" data-toggle="pill" href="#pills-tab1" role="tab" aria-controls="pills-tab1" aria-selected="false">{{ $langg->lang30 }}</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-tab2-tab" data-toggle="pill" href="#pills-tab2" role="tab" aria-controls="pills-tab2" aria-selected="true">{{ $langg->lang31 }}</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-tab3-tab" data-toggle="pill" href="#pills-tab3" role="tab" aria-controls="pills-tab3" aria-selected="false">{{ $langg->lang32 }}</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-tab4-tab" data-toggle="pill" href="#pills-tab4" role="tab" aria-controls="pills-tab4" aria-selected="false">{{ $langg->lang33 }}</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="tab-content">
<div class="tab-pane fade active show" id="pills-tab1" role="tabpanel" aria-labelledby="pills-tab1-tab">
<div class="row" id="hot-product-list">
@foreach($hot_products as $prod)
@include('includes.product.list-product', ['prod' => $prod])
@endforeach
</div>
<div class="row">
<div class="col-lg-12 text-center">
<button id="hot-load-more" class="btn btn-primary load-more" data-skip="9" data-category="hot">Load More</button>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-tab2" role="tabpanel" aria-labelledby="pills-tab2-tab">
<div class="row" id="latest-product-list">
@foreach($latest_products as $prod)
@include('includes.product.list-product', ['prod' => $prod])
@endforeach
</div>
<div class="row">
<div class="col-lg-12 text-center">
<button id="latest-load-more" class="btn btn-primary load-more" data-skip="9" data-category="latest">Load More</button>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-tab3" role="tabpanel" aria-labelledby="pills-tab3-tab">
<div class="row" id="trending-product-list">
@foreach($trending_products as $prod)
@include('includes.product.list-product',['prod' => $prod])
@endforeach
</div>
<div class="row">
<div class="col-lg-12 text-center">
<button id="trending-load-more" class="btn btn-primary load-more" data-skip="9" data-category="trending">Load More</button>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-tab4" role="tabpanel" aria-labelledby="pills-tab4-tab">
<div class="row" id="sale-product-list">
@foreach($sale_products as $prod)
@include('includes.product.list-product',['prod' => $prod])
@endforeach
</div>
<div class="row">
<div class="col-lg-12 text-center">
<button id="sale-load-more" class="btn btn-primary load-more" data-skip="9" data-category="sale">Load More</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
//jquery ajax code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
function loadMoreProducts(buttonId, containerId, category) {
var skip = $('#' + buttonId).data('skip');
$.ajax({
url: "{{ route('products.load-more') }}",
method: "GET",
data: {
start: skip,
category: category
},
dataType: "json",
beforeSend: function() {
$('#' + buttonId).html('Loading...');
$('#' + buttonId).attr('disabled', true);
},
success: function(data) {
var products = data.products;
if (products.length > 0) {
var html = '';
for (var i = 0; i < products.length; i++) {
var imgSrc = products[i].thumbnail ? window.assetBaseUrl + 'assets/images/thumbnails/' + products[i].thumbnail : window.assetBaseUrl + 'assets/images/noimage.png';
html += `<div class="col-lg-4 col-md-6 decrease-padding">
<div class="single-box">
<div class="left-area">
<a href="/product/` + products[i].slug + `">
<img src="` + imgSrc + `" alt="">
</a>
</div>
<div class="right-area">
<h4 class="price">` + products[i].showPrice + ` <del>` + products[i].showPreviousPrice + `</del></h4>
<div class="stars">
<div class="ratings">
<div class="empty-stars"></div>
<div class="full-stars" style="width:` + products[i].ratings + `%"></div>
</div>
</div>
<p class="text"><a href="/product/` + products[i].slug + `">` + (products[i].name.length > 65 ? products[i].name.substring(0, 65) + '...' : products[i].name) + `</a></p>
<ul class="action-meta">
<li>
<span href="javascript:;" class="wish add-to-wish" data-href="/user-wishlist-add/` + products[i].id + `" data-toggle="tooltip" data-placement="top" title="{{ $langg->lang54 }}"><i class="far fa-heart"></i></span>
</li>
<li>
<span class="cart-btn quick-view" rel-toggle="tooltip" title="{{ $langg->lang55 }}" href="javascript:;" data-href="/product/quick/` + products[i].id + `" data-toggle="modal" data-target="#quickview" data-placement="top">
<i class="fas fa-shopping-basket"></i>
</span>
</li>
<li>
<span href="javascript:;" class="compear add-to-compare" data-href="/product/compare/add/` + products[i].id + `" data-toggle="tooltip" data-placement="top" title="{{ $langg->lang57 }}">
<i class="fas fa-random"></i>
</span>
</li>
</ul>
</div>
</div>
</div>`;
}
$('#' + containerId).append($(html).hide().fadeIn(1000));
$('#' + buttonId).html('Load More');
$('#' + buttonId).attr('disabled', false);
$('#' + buttonId).data('skip', skip + products.length);
} else {
$('#' + buttonId).html('No More Data Available');
$('#' + buttonId).attr('disabled', true);
}
}
});
}
// Attach click event for each "Load More" button
$('#hot-load-more').click(function() {
loadMoreProducts('hot-load-more', 'hot-product-list', 'hot');
});
$('#latest-load-more').click(function() {
loadMoreProducts('latest-load-more', 'latest-product-list', 'latest');
});
$('#trending-load-more').click(function() {
loadMoreProducts('trending-load-more', 'trending-product-list', 'trending');
});
$('#sale-load-more').click(function() {
loadMoreProducts('sale-load-more', 'sale-product-list', 'sale');
});
});
</script>
No comments