We sacrifice by not doing any other technology, so that you get the best of Magento.

We sacrifice by not doing any other technology, so that you get the best of Magento.

In one of the Magento 2 project, we have added a load more button on the listing page.

So whenever the user clicks on the load more button, the next page of products will be shown.

You can use below on the custom listing page.

<script src ="https://infiniteajaxscroll.com/vendor/jquery-ias/dist/jquery-ias.min.js"></script>
<link src = "https://raw.githubusercontent.com/ravbetsky/infinite-ajax-scroll/master/dist/css/jquery.ias.css"/>
<script type="text/javascript">
var ias = jQuery.ias({
container: ".main",
item: ".products-grid",
pagination: ".toolbar .pages",
next: ".next"
});
ias.extension(new IASSpinnerExtension()); // shows a spinner (a.k.a. loader)
ias.extension(new IASTriggerExtension({offset: 1})); // shows a trigger after page 3
ias.extension(new IASNoneLeftExtension({
text: 'There are no more pages left to load.' // override text when no pages left
}));
</script>

You will also need to change class for this as shown below.

container: ".main",
item: ".products-grid",
pagination: ".toolbar .pages",
next: ".next"

That’s it.

Fill the below form if you need any Magento relate help/advise/consulting.

With Only Agency that provides a 24/7 emergency support.

    Recent Articles
    Get a Free Quote

      Full Name

      Email Address

      Mobile Number

      Message

      Let’s initiate a discussion!!

      With Only Agency that provides a 24/7 emergency support.

        Full Name

        Email Address

        Mobile Number

        Message