Filters in slideout sidebar not working

danixaifu

#269113

Hi!

I have a list of cpt shown created with Wp Show Posts plugin on this page: https://saveursducanadaeurope.com/importateurs-distributeurs/. When I use Search and Filter Pro on the sidebar the filters work perfectly. To make it work I had to use the custom display result method option and add the shortcode with action=”filter_next_query” next to the list of posts.

In this other test page: https://saveursducanadaeurope.com/test/ instead of putting Search and filter pro in the sidebar I have put it in a slideout. Just for that reason it seems that it stops working. There is also no javascript error. If on the test page I remove the slideout and put the Search and Filter Pro shortcode back into the sidebar then the filtering works again.

This is the javascript code that shows the slideout sidebar:

<script>
(function($) {
    window.FWP = window.FWP || {};
    window.FWP.flyout = {
        open: function() {
            FWP.flyout.swap_facets('open');
        },
        close: function() {
            FWP.flyout.swap_facets('close');
        },

        init: function() {
            var content = '';
            var flyout = `

            <div class="facetwp-flyout">
                <div class="facetwp-flyout-close">x</div>
                <div class="facetwp-flyout-wrap">
                    <div class="facetwp-flyout-content">[searchandfilter id="1077"]</div>
                </div>
            </div>
            <div class="facetwp-flyout-fog"></div>
            `;

            $('.facetwp-flyout').remove();
            $('.facetwp-flyout-fog').remove();
            $('body').append(flyout);
        },
        swap_facets: function(action) {
            var action = ('undefined' !== typeof action) ? action : 'open';
            var is_open = $('.facetwp-flyout.active').length > 0;

            if ((is_open && 'open' == action) || (!is_open && 'close' == action)) {
                return;
            }

            // Add the open or close CSS class
            $('.facetwp-flyout').toggleClass('active');
            $('.facetwp-flyout-fog').toggleClass('active');

        }
    };

    $(function() {
        FWP.flyout.init();
    });

    $(document).on('click', '.facetwp-flyout-open', function() {
        FWP.flyout.open();
    });

    $(document).on('click', '.facetwp-flyout-close, .facetwp-flyout-fog', function() {
        FWP.flyout.close();
    });
})(jQuery);
</script>

Any suggestions on how to make the filter work in the slideout?

Add New Note to this Reply

Trevor Moderator

#269138

I wonder if the content in the flyout is loaded after the page has loaded? I can see some JavaScript that may be doing that.

I have referred this to our plugin developer, Ross, for his input.

Add New Note to this Reply

Ross Moderator

#269279

Hi there

I think inside the init after $('body').append(flyout); you need to add:

$( '.searchandfilter' ).searchAndFilter();

Because the html is not in the dom the page on page load, our scripts don’t initialise it, so it would need initialised after the html had been added to the DOM.

Let us know how you get on.

Thanks

Add New Note to this Reply

Ross Moderator

#269283

Also, if you want to do stuff before / after search results have been fetched, you can use the sf:ajaxstart and sf:ajaxfinish events:

https://searchandfilter.com/documentation/faq/#will-my-lightbox-or-other-javascript-work-with-this-plugin

Add New Note to this Reply

danixaifu

#269325

Thank you Ross,

The solution you gave me works perfectly.

Now I have found another inconvenience. I only activate the slideout with the Search and Filter Pro filters in the mobile version < 768px wide here: https://saveursducanadaeurope.com/importateurs-distributeurs/

For the desktop version I use in the sidebar the same Search and Filter Pro shortcode as in the slideout but I hide it by css in the mobile version.

So in mobile version you only see the filters of the slideout but the results are affected by the filters not active in the sidebar that is only hidden by css but remains working.

Is there any way that in resolutions of < 768px I can disable the shortcode of the sidebar and activate the slideout or some other way to combine both in the same page but without interfering?

Add New Note to this Reply

Ross Moderator

#269451

Hi again

Hmmm.. its tricky, right now we don’t support both (duplicates) on the page at the same time due to this issue (we will in v3, due early in the new year)

So there are two workarounds:

1) Don’t add S&F to the sidebar via a widget, instead, add it with Javascript on page load (like you did with your slideout, only in that case, after a click), so you can conditionally add it to the sidebar if viewport width >= 768px
2) Create a seperate search form + results for mobile only

I hope that helps

Best

Add New Note to this Reply

danixaifu

#269684

I have tried several alternatives but none have satisfied me. I will wait for the v3 of S&F.

Thank you!

Add New Note to this Reply

Trevor Moderator

#269686

OK. I will close this thread for now.

Add New Note to this Reply

[Author]

Posts