I am using this script for Load More in Magento 2 But it's not working

 <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"/>
     var ias = jQuery.ias({
    container:  ".test",
    item:       ".products-grid",
    pagination: ".pages-items li",
    next:       ".item a"
ias.extension(new IASSpinnerExtension());            // shows a spinner (a.k.a. loader)
ias.extension(new IASTriggerExtension({offset: 3})); // 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

if I go to second scroll, the add to cart button is not working properly.

Please give me some script for Load More Products.


5 Answers 5


As Dava Gordon has suggested i have been using the https://github.com/Strategery-Inc/Magento2-InfiniteScroll which does work however has the problem you are witnessing with ajax add to cart breaking after load.

This seems to be an issue with the x-magento-init scripts that run on page load and therefore do not run on ajax requests. To fix this issue however i recommend adding a single line of code to:



This goes at about line 91 so the on rendered event updates the magento add to cart forms to allow for ajax add to cart.

Section of code should therefore be updated to look like below:

window.ias.on('rendered', function(items){
                SgyIAS._log({eventName: 'render', items: items});

I have also created a pull request on the github page for this issue and fix so can also be seen on there now.

  • Have you done this as a pull request on the extension? Might help improve it without people having to overwrite it / or mod it :)
    – andy jones
    Commented Sep 25, 2017 at 14:45
  • 1
    TBH i just did this in last few mins will think about adding it to github soon
    – harri
    Commented Sep 25, 2017 at 14:46
  • Ok think ive created a pull request for this now.
    – harri
    Commented Sep 25, 2017 at 15:28
  • Where i need to add this
    – Magento 2
    Commented Sep 25, 2017 at 16:11
  • I added but no luck
    – Magento 2
    Commented Sep 25, 2017 at 16:17

This module is not worth supporting can i recommend you use https://github.com/Strategery-Inc/Magento2-InfiniteScroll which does work

  • I tried that also No luck
    – Magento 2
    Commented Sep 25, 2017 at 8:53
  • @Kothari whats the error message you get?
    – Max
    Commented Sep 25, 2017 at 9:11
  • No error if i cick add to cart it redirect the page
    – Magento 2
    Commented Sep 25, 2017 at 9:35
  • Is it a configurable product your trying to add to basket? or is it a simple if its a configurable then this is the way it is supposed to work as you must update the options, if you can send us any errors in your console it would help a lot Commented Sep 25, 2017 at 9:57
  • even simple products also it redirect
    – Magento 2
    Commented Sep 25, 2017 at 10:21

Check this free extension and see if it works for you. (It worked fine for me)

  • If I goto second scroll and click add to cart it reload the page
    – Magento 2
    Commented Sep 27, 2017 at 6:12
  • Well atleast it's in working condition and doesn't redirect to product description page. Commented Sep 27, 2017 at 7:40
  • @VivekKumar, your mentioned link is not working. Commented Jun 19, 2020 at 7:28

"data" get response of next page, you need to update next page add to cart button with "[data-role=tocart-form]"

                url: getUrl,
                type: 'get',
                dataType: 'json',
                }).done(function (data) {

                var htmlObject=jQuery(".products.wrapper:last").after(data.productdata);

                htmlObject.find('[data-role=tocart-form], .form.map.checkout')
                            .attr('data-mage-init', JSON.stringify({'catalogAddToCart': {}}));

  • Uncaught ReferenceError: getUrl is not defined what i need to add getUrl
    – Magento 2
    Commented Sep 25, 2017 at 9:56
  • For "getUrl" you need to set your Ajax url, where you want to call your Ajax request. and update code Commented Sep 26, 2017 at 4:16
  • main thing is you need to update your response data. Commented Sep 26, 2017 at 4:22

Something else to bare in mind if you have JS set to merge in production you will get errors with ias not defined so make sure you do the following in a child theme etc/view.xml

<exclude> <item type="file">Strategery_Infinitescroll::js/infinitescroll.js</item> <item type="file">Strategery_Infinitescroll::js/jquery-ias.js</item> </exclude>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.