lazy loading, endless scrolling, autopager, endless pages: sample information over here

Hi ActOpus,

Nice article, will it work for Nop 4.x versions ?

UPDATE

in NOP versions 4.x we have to declare jquery.jscroll.min.js in head section and it will work like a charm.

Html.AppendScriptParts(ResourceLocation.Head, "~/js/jquery.jscroll.min.js");

how to disabled lazy loading in nop commerce website

products load using Lazy Loading on Click_Event  And Scrolling Using Ajax

--------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>
    }
}