Magento 2 layered navigation Ajax jquery problem

Question

I am having this problem from Magento 2.2.5 and when upgraded to Magento 2.3 also. I use custom template

Layered navigation with Ajax isn't working. I use Amasty one

It just refreshes the page and no products is called.

If I disable Ajax everything is fine. I can't give more details because I don't have any errors in console, nor in log files. I am having two days now and I can't find anything.

Any help what to check would be much appreciated

Answer 1

The info you have given is extremely brief so only expect brief answers.

It sounds like your layered navigation template customisations have affected it, can you revert to the core templates one by one and see which one is the breaking change?

Then work your way through the code to determine which change in that template affected it.

Answer 2

Problem solved. I will describe for others with same template and extension. Main problem was that the response was not coming in json format, just plain html, and js code trying to work with it like with json and fails.

This was because both modules amasty and mgs panel rewrite this controller

Magento\Catalog\Controller\Category\View

MGS theme is written like this:

It has a MGS layered module which was working like amasty. first time page loading go throw MGS layout and layer ajax is going throw Amasty. All scripts for quick view add to cart and other worked only once on page load, and it not affecting to the products after filter. I guess old script for MGS had to restart all scripts after filter action.

So when I went to this file:

app/code/MGS/Mpanel/etc/di.xml

and comment out this line:

<preference for="Magento\Catalog\Controller\Category\View" type="MGS\Mpanel\Controller\Category\View" />

But this broke all js scripts like add to cart etc...

So I check further and I got this solution:

In file:

app/code/Amasty/Shopby/view/frontend/web/js/amShopbyAjax.js

just below this line:

if ($.mage.amShopbyApplyFilters) { 
        $.mage.amShopbyApplyFilters.prototype.showButtonCounter(response.productsCount);     
    }

added this:

var formKey = $("input[name*='form_key']").first().val();

              $(".mgs-quickview").bind("click", function() {
                var b = $(this).attr("data-quickview-url");
                b.length && reInitQuickview($, b)
                     });

              $("img.lazy").unveil(25, function(){
                var self = $(this);
                setTimeout(function(){
                             self.removeClass('lazy');
                     }, 0);
               });

And bingo. Everything fixed. Till now it is working.