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?