Therefore I implemented the Open Source JScroll Jquery extension. This is how I did it:
1. From Nop.Web, copy Views/Shared/_Root.Head.cshtml to your own template directory and add the following line:
Html.AppendScriptParts("~/Scripts/jquery.jscroll.min.js");
You must place this line as the immediate next line of Html.AppendCssFileParts("~/Content/jquery-ui-themes/smoothness/jquery-ui-1.10.3.custom.min.css");
2. Download the jquery.jscroll.min.js file from GitHub or from jscroll.com and place this file in folder Nop.Web/Scripts
3. From Nop.Web, copy Views/Catalog/CategoryTemplate.ProductsInGridOrLines.cshtml to your own template directory
4. Remove the following three lines from this file
<div class="pager">
@Html.Pager(Model.PagingFilteringContext).QueryParam("pagenumber")
</div>
Now replace the entire Product-List section with the following code
@*product list*@
@if (Model.Products.Count > 0)
{
if (Model.PagingFilteringContext.ViewMode == "list")
{
@*list mode*@
<div class="product-list">
@foreach (var product in Model.Products)
{
<div class="item-box">
@Html.Partial("_ProductBox", product)
</div>
}
<div class="pager">
@Html.Pager(Model.PagingFilteringContext).QueryParam("pagenumber")
</div>
</div>
<script>
$('.product-list').jscroll({
loadingHtml: '<small>Loading...</small>',
padding: 200,
debug: true,
autoTrigger: true,
autoTriggerUntil: 10,
nextSelector: 'li.next-page a',
contentSelector: '.product-list',
callback: function() {$('.pager').hide()}
});
</script>
}
else
{
@*grid mode*@
<div class="product-grid">
@foreach (var product in Model.Products)
{
<div class="item-box">
@Html.Partial("_ProductBox", product)
</div>
}
<div class="pager">
@Html.Pager(Model.PagingFilteringContext).QueryParam("pagenumber")
</div>
</div>
<script>
$('.product-grid').jscroll({
loadingHtml: '<small>Loading...</small>',
padding: 250,
debug: true,
autoTrigger: true,
autoTriggerUntil: 10,
nextSelector: 'li.next-page a',
contentSelector: '.product-grid',
callback: function () { $('.pager').hide() }
});
</script>
}
}
Thats it, your good to go.
*Nop.Web is the root of your website!