1

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...

  • why aren't you asking this the extension provider? – Philipp Sander Feb 4 at 14:18
  • @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. – jafar pinjar Feb 4 at 14:20
  • Is this a Land of Coder module? – harri Feb 4 at 15:36
  • @harri,yes land of coder module it is – jafar pinjar Feb 4 at 15:38
  • 1
    Yeah or about 410 after the promise.done section. – harri Feb 4 at 15:52
2

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();
    };
  • Great solution!!! – jafar pinjar Feb 4 at 16:06
  • Thanks! A lot of these issues can happen with ajax not initalising properly be careful of swatches also if you are using them. – harri Feb 4 at 16:09
  • So you feel, its not a good solution? – jafar pinjar Feb 4 at 18:17
  • 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. – harri Feb 4 at 18:28
  • this have one problem, once the product filtered after selecting the left nav items, again it re-init, so all products loads again – jafar pinjar Feb 12 at 13:57

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.