Hi ActOpus,
Nice article, will it work for Nop 4.x versions ?
--------Methods-------------
public async Task<IActionResult> CatalogProductsLazyLoading(int categoryId, int pageindex, int pagesize)
{
if (categoryId == 0)
throw new ArgumentNullException(nameof(categoryId));
var model1 = new CatalogProductsModel();
var model = new OrderCatalogProductModel(model1);
var categoryIds = new List<int> { categoryId };
var currentStore = await _storeContext.GetCurrentStoreAsync();
//filterable options
var filterableOptions = await _specificationAttributeService
.GetFiltrableSpecificationAttributeOptionsByCategoryIdAsync(categoryId);
var products = await _productService.SearchProductsAsync(
pageIndex: pageindex - 1,
pageSize: pagesize,
categoryIds: categoryIds,
storeId: currentStore.Id,
visibleIndividuallyOnly: true,
excludeFeaturedProducts: !_catalogSettings.IgnoreFeaturedProducts && !_catalogSettings.IncludeFeaturedProductsInNormalLists);
var isFiltering = filterableOptions.Any();
await PrepareCatalogProductsAsync(model, products, isFiltering);
return Json(new
{
success = true,
html = await RenderPartialViewToStringAsync ("~/Plugins/PluginName/Theme/Views/Catalog/CatalogProductsLazyLoading.cshtml", model)
});
}
/// <summary>
/// Prepares catalog products for lazy loading
/// </summary>
/// <param name="model">Catalog products model</param>
/// <param name="products">The products</param>
/// <param name="isFiltering">A value indicating that filtering has been applied</param>
/// <returns>A task that represents the asynchronous operation</returns>
protected virtual async Task PrepareCatalogProductsAsync(CatalogProductsModel model,IPagedList<Product> products, bool isFiltering = false)
{
if (products.Count == 0 && isFiltering)
model.NoResultMessage = await _localizationService.GetResourceAsync("Catalog.Products.NoResult");
else
{
model.Products = (await _productModelFactory.PrepareProductOverviewModelsAsync(products)).ToList();
model.LoadPagedList(products);
}
}
--------------------------------------------------------
-------Using Click Event--------
<div>
<button id="productlist" type="submit" name="Product" value="Product" class="btn btn-outline-dark">Product list</button>
@*onclick="location.href='@Url.Action("Products", "OrderCatalog")'"*@
</div>
<script asp-location="Footer">
$(document).ready(function () {
$("#productlist").click(function (e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "@(Url.Action("ProductsOnScroll", "OrderCatalog"))",
data: {
id: $(this).val()
},
success: function (result) {
console.log(result);
$(".item-grid-row").append(result.html);
},
error: function (result) {
alert('error');
}
});
});
});
</script>
--------------------------------------------------------
-------Using Scrolling-----
@{
Html.AddScriptParts(ResourceLocation.Footer, "~/js/public.catalogproducts.js");
}
<script asp-location="Footer">
$(document).ready(function () {
var categoryid = @(Model.CategoryId);
var pageindex = 2;
var pagesize = @(int.Parse(Model.PageSizeOptions.Select(x => x.Value).FirstOrDefault()));
var NoMoreData = false;
var inProgress = false;
$(window).scroll(function () {
if ($(window).scrollTop() > Number($(".item-box").height()) / 2 && !NoMoreData && !inProgress) {
inProgress = true;
$.post("@Url.Action("CatalogProductsLazyLoading", "OrderCatalog")", { "categoryId": categoryid, "pageindex": pageindex, "pagesize": pagesize },
function (data) {
pageindex = pageindex + 1;
NoMoreData = data.NoMoreData;
$(".item-grid-row").append(data.html);
inProgress = false;
}
);
}
});
});
</script>
<style>
.pager {
display: none
}
</style>
------CatalogProductsLazyLoading View For Lazy load Products-------
@model orderCatalogProductModel
@if (Model.Products.Count > 0)
{
@foreach (var product in Model.Products)
{
<div class="col-lg-3 col-md-4 col-sm-6 ">
<div class="item-box">
@await Html.PartialAsync("_ProductBox", product)
</div>
</div>
}
}