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

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

1 Answer 1

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();
    };
11
  • Great solution!!! Feb 4, 2019 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, 2019 at 16:09
  • So you feel, its not a good solution? Feb 4, 2019 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, 2019 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 Feb 12, 2019 at 13:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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