0

I have a 3rd party extension for layered navigation in Magento 2.2.1. Products listing is repainted (using ajax) after customer changed the navigation filter (categories) There is some visual error in product details after new HTML code loaded with ajax is inserted into the DOM (all products on the page have the same failure):

Before window resize

This failure is disappeared after browser window is resized manually:

After window resize

I have tried to use $(window).trigger('resize') but unsuccessfully:

    updateContent: function (url, updateState) {
        ...
        $.ajax({
            ...
            success: function (resp) {
                if (resp instanceof Object) {
                    /* replace inner HTML for products listing with new one */
                    $(window).trigger('resize'); // does not work :(
                }
            }
        });
    },

Does any method exist to refresh/repaint/render the page programmatically after HTML was changed?

The same effect (wrong order of the blocks then right order) exists on the page loading - wrong order leave about 1 second while page is loading and blocks order is restructured after the page is completely loaded. I believe there is some Magento JS function that does something like I need.

  • Have you check consol or log file when page load first time? – Dhiren Vasoya Nov 27 '17 at 11:15
  • yes, no errors are in browser console. – Alex Gusev Nov 28 '17 at 9:27
2

You will need to wrap your productCollection within any custom HTML id. Once done you will need to append it to the product wrapper like create block and use plugin to rewrite CategoryViewBlock

And do something like:-

class CategoryViewBlock
{
    const PRODUCT_LISTING_WRAPPER = 'custom-ajax-wrapper';


    public function afterToHtml(\Magento\Catalog\Block\Product\ListProduct $subject, $result)
    {
        if ($subject->getNameInLayout() == 'category.products.list' || $subject->getNameInLayout() == 'search_result_list') {
            $result = '<div class="' . self::PRODUCT_LISTING_WRAPPER . '">' . $result . '</div>';
        }
        return $result;
    }
}

Then you can name this wrapper id in any block which is being used in your

magento-init phtml file

like:-

$config = [            
            'productsContainer' => '.' . \VendorName\LayeredNavigation\Plugin\CategoryViewBlock::PRODUCT_LISTING_WRAPPER
        ];
        return json_encode($config);

Now, I assume you must have used a block to configure result in your js using phtml file, so no change will be needed there. So just use this code in your js file:-

$(self.options.productsContainer).replaceWith(resp.products);

So it will become something like:-

updateContent: function (url, updateState) {
        ...
        $.ajax({
            ...
            success: function (resp) {
                if (resp instanceof Object) {
                    /* replace inner HTML for products listing with new one */
               $(window).trigger('resize'); // does not work :(
               $(self.options.productsContainer).replaceWith(resp.products);
                }
            }
        });
    },
  • exactly the same code is in the extension: $(self.options.filtersContainer).replaceWith(resp.leftnav); $(self.options.productsContainer).replaceWith(resp.products); and this code gives a wrong formatting until window resize will be applied. – Alex Gusev Nov 28 '17 at 9:32
  • Are you using some custom theme? Can you try on default Luma theme if it works? As the issue can be on the theme. – dev_67Commerce Nov 28 '17 at 10:36
  • Yes, I use Fluid Responsive Magento Theme. I did not try Luma theme but I suppose (I'm sure ) it works in Luma theme. – Alex Gusev Nov 29 '17 at 11:41
  • And if you disable the theme does the module then work? – dev_67Commerce Nov 29 '17 at 11:43
  • Yes, layered navigation works with Luma theme. – Alex Gusev Nov 29 '17 at 13:00

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.