Magento 2 Load More Product Script

Question

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.

Answer 1

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:

Strategery/Infinitescroll/view/frontend/web/js/infinitescroll.js

$("form[data-role='tocart-form']").catalogAddToCart();

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});
                $("form[data-role='tocart-form']").catalogAddToCart();
            });

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

Answer 2

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

Answer 3

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

Answer 4

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

     jQuery.ajax({
                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': {}}));
                            htmlObject.trigger('contentUpdated');


            });

Answer 5

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>