How to add load more button in any listing page in Magento 2?

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>

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"

container: ".main",

item: ".products-grid",

pagination: ".toolbar .pages",

next: ".next"

That’s it.

Fill the below form if you have any Magento programming need.

Add an image programmatically from any url in Magento 2
[crayon-641efa28e5793997699226/] Using above fucntion Images can be imported directly from...
Magento 2 : Override the Category view block file
Override view block using di.xml and add the below code...
How to check list of Layout XML called for a specific page in Magento 2?
You can check a list of called layout XML for...
Magento 2 : Setup PWA from Scratch
Follow the below steps to install and set up PWA...
How to remove leading zero’s from the order, invoice and shipment number in Magento 2?
If you want to remove all leading zero's from order,...

Author Info

Magento 2 Developer

Hire P. Garchar

Let’s have a call

Fill the form & Get Installation Support