0

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.

1
  • which error you are facing here? Feb 29, 2020 at 9:05

1 Answer 1

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>
4
  • it call jQuery functions but also reload page
    – Arjun Soni
    Mar 2, 2020 at 4:09
  • You need to either remove the link from the markup or add stop propagation to js code, I've updated the answer
    – SantiBM
    Mar 2, 2020 at 7:22
  • e.stopPropagation(); not work, instead of that use exit and return, in list.phtml @Thanks SantiBM
    – Arjun Soni
    Mar 11, 2020 at 5:12
  • a pleasure to help, if you want you can edit the answer and mark it as valid!
    – SantiBM
    Mar 11, 2020 at 20:01

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.