5

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.

4
+50

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.

  • 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 Sep 25 '17 at 14:45
  • 1
    TBH i just did this in last few mins will think about adding it to github soon – harri Sep 25 '17 at 14:46
  • Ok think ive created a pull request for this now. – harri Sep 25 '17 at 15:28
  • Where i need to add this – Magento 2 Sep 25 '17 at 16:11
  • I added but no luck – Magento 2 Sep 25 '17 at 16:17
2

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 Sep 25 '17 at 8:53
  • @Kothari whats the error message you get? – Max Sep 25 '17 at 9:11
  • No error if i cick add to cart it redirect the page – Magento 2 Sep 25 '17 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 – Dava Gordon Sep 25 '17 at 9:57
  • even simple products also it redirect – Magento 2 Sep 25 '17 at 10:21
1

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 Sep 27 '17 at 6:12
  • Well atleast it's in working condition and doesn't redirect to product description page. – Vivek Kumar Sep 27 '17 at 7:40
0

"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');


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

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, privacy policy and cookie policy

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