Magento2 - How to change product view Grid or List without reload page?

Question

I have search many hours to accomplish this but not get success to achieve last I tried Stack overflow link

and also add my custom jQuery in list.phtml file

<script>
    require(['jquery'], function ($) {
        jQuery(document).ready(function () {
            $(".mode-grid").click(function () {
                    alert('call Grid');
                    $('.mode-grid').addClass('active');
                    $('.mode-list').removeClass('active');

                }
            );
            $(".mode-list").click(function () {
                alert('call List');
                $('.mode-list').addClass('mode-list active');
                $('.mode-grid').removeClass('mode-grid active');
            });
        });
    });
</script>

but not get success, please help me to solve this ,I am new in Magento so also inform me where I make mistakes.

Thank you.

Answer 1

The way you are trying is fine and could work, you could also do it with an ajax request but is a more complicated approach.

For your approach, the css classes you might have to change will differ from theme to theme, for example in the one I'm working now its:

div.products.wrapper.grid.products-grid

that should change to:

div.products.wrapper.list.products-list

But also the markup on each kind of view is different, so you might have to play with that too as with a css class add/remove you are not affecting the other elements.

So in your js code, you are only changing the list/grid icons classes, you should also target .products.wrapper and toggle list/grid classes in it:

<script>
    require(['jquery'], function ($) {
        jQuery(document).ready(function () {
            $(".mode-grid").click(function (e) {
                    e.stopPropagation();
                    alert('call Grid');
                    $('.mode-grid').addClass('active');
                    $('.mode-list').removeClass('active');
                    $('.products.wrapper').toggleClass('grid list').toggleClass('products-grid products-list');
                }
            );
            $(".mode-list").click(function (e) {
                e.stopPropagation();
                alert('call List');
                $('.mode-list').addClass('mode-list active');
                $('.mode-grid').removeClass('mode-grid active');
                $('.products.wrapper').toggleClass('grid list').toggleClass('products-grid products-list');
            });
        });
    });
</script>