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.

• nikunj: with this Magento 2 Infinite Scroll extension will solve it you can use it

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.

• andy jones: Have you done this as a pull request on the extension? Might help improve it without people having to overwrite it / or mod it :)
• harri: TBH i just did this in last few mins will think about adding it to github soon
• harri: Ok think ive created a pull request for this now.
• Magento 2: Where i need to add this
• Magento 2: I added but no luck

Answer 2

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

• Magento 2: I tried that also No luck
• Max: @Kothari whats the error message you get?
• Magento 2: No error if i cick add to cart it redirect the page
• Dava Gordon: 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
• Magento 2: even simple products also it redirect

Answer 3

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

• Magento 2: If I goto second scroll and click add to cart it reload the page
• Vivek Kumar: Well atleast it's in working condition and doesn't redirect to product description page.
• Supravat M: @VivekKumar, your mentioned link is not working.

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

• Magento 2: Uncaught ReferenceError: getUrl is not defined what i need to add getUrl
• Nikhil Vaghela: For "getUrl" you need to set your Ajax url, where you want to call your Ajax request. and update code
• Nikhil Vaghela: main thing is you need to update your response data.

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>