Virtuemart Support :: Topic: Product List/Grid switcher js conflict (1/1)

Welcome, Guest

Use this Category for your support questions about Virtuemart Template - MaterialMart (SKU# FLEX-00020)

TOPIC: Product List/Grid switcher js conflict

Product List/Grid switcher js conflict 5 years 6 months ago #15697

Cherubini SRL Cherubini

Hello, this morning we installed in our site under development (Material mart template) the Breakdesign Custom Filters but if we enable the 'Results Loading Module = Ajax Request' a conflict does appear and List/Grid Switcher does not work anymore (see attached picture).
I contacted the devloper and they told me to ask you 'what javascript should be called to enable the switcher' so that they can add it.

Thank you.

Attachments:

Ajaxconflict.jpg (77KB)

The administrator has disabled public write access.

Product List/Grid switcher js conflict 5 years 6 months ago #15703

Support

Hi Cherubini,

I just emailed you but i want to post here as well, so it might be reference to others who need the same solution.

We never thought JS events on the category page would ever need any re-initialized. We didn’t wrap the event functions into a closure function so that they can be re-init by a simple call.

But there are not too many events going on with those buttons. So, you can tell the developer of filter component that, they should call these events as a callback for the AJAX handling. I was wondering why they didn’t directly look at your website and grab these lines though, because they are exist on the source codes of your website.. anyway, here is the lines;

// JS lines - START
$(‘.orderlistcontainer’).hover(
    function () {
        $(this).find('.orderlist').stop().slideDown()
    },
    function () {
        $(this).find('.orderlist').stop().slideUp()
    }
);
 
$('.FlexibleSwitchButtons a.switch_thumb3').addClass('switch_active');
$('.FlexibleSwitchButtons a').click(function (e) {
    e.preventDefault();
    $('.FlexibleSwitchButtons a').removeClass('switch_active');
    $(this).addClass('switch_active');
    var target = '.' + $(this).attr('rel');
    $('.flexibleProductsContainer').fadeOut('fast', function () {
        $('.flexibleProductsContainer > div').hide();
        $('.flexibleProductsContainer ' + target).show();
        $('.flexibleProductsContainer').fadeIn('fast');
    });
});
// JS lines - END