How to re init ajax add to cart inside the response in magento2

Question

I have installed third-party module Infinite scroll for the lazy load(Lof_Ajaxscroll).

The problem I am facing is Once the page loads new HTML content is generated from ajax. So add to cart is not working at that time. It refreshes the page and adding.

I need to add the product without refreshing.

I checked with extension provider, They are asking to re-init the add to cart inside the response.

My question is How can I re-init the add to cart function inside the ajax response?

Tried below solution but that didn't work in my case.

Need to Initialization js after ajax response magento 2

Can anyone suggest me, please...

• Philipp Sander: why aren't you asking this the extension provider?
• Jafar Pinjar: @PhilippSander, Extension provider suggesting to add re init code in some file(given the file path), but code should be added by our self, already i checked with them.
• harri: Is this a Land of Coder module?
• Jafar Pinjar: @harri,yes land of coder module it is
• harri: Yeah or about 410 after the promise.done section.

Answer 1

Within the file Lof\AjaxScroll\view\frontend\web\js\script.js from the module adding the below code to line 410 should help fix the ajax issue.

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

It would be better to override this file from within your theme by placing the updated file in the below location until this is addressed properly by Land of Coder.

`Lof_AjaxScroll/web/js/script.js` 

Make sure to clear any local caches and that should initialise the add to cart buttons once the ajax has loaded the new products.

this.render function should look like below once done:

 this.render = function(items, callback) {
 var self = this,
 $lastItem = this.getLastItem(),
 count = 0;
 var promise = this.fire('render', [items]);
 promise.done(function() {
 $(items).hide(); // at first, hide it so we can fade it in later
 $lastItem.after(items);
 $(items).fadeIn(400, function() {
 // complete callback get fired for each item,
 // only act on the last item
 if (++count < items.length) {
 return;
 }
 self.fire('rendered', [items]);
 if (callback) {
 callback();
 }
 });
 });
 $("form[data-role='tocart-form']").catalogAddToCart();
 };

• Jafar Pinjar: Great solution!!!
• harri: Thanks! A lot of these issues can happen with ajax not initalising properly be careful of swatches also if you are using them.
• Jafar Pinjar: So you feel, its not a good solution?
• harri: No It fixes your problem fine I think but i'm just saying in that past swatches have also stopped working on ajax infinite products so test that module on swatches too i guess if your using them. I have not tested that module but if the add to cart buttons don't work it makes me concerned about swatches also as i think they are also initialised on page load so may have same problem.
• Jafar Pinjar: this have one problem, once the product filtered after selecting the left nav items, again it re-init, so all products loads again