FacetWP: Add HTML before and after a facet with jQuery

Cray :

I want to use a collapse element for my facets and therefore add some HTML before and after the output. To do achieve that I'm using the following code.

The code was initially to add a label before the facets and hide it if there is no option for it. I've extended the code to add some HTML before and after the facet. In the same way like the label. It works kind of ok but the first <div> closes before the facet starts. So the collapse couldn't work.

Here's the code:

<script>
    (function($) {
        $(document).on('facetwp-loaded', function() {
            $('.facetwp-facet').each(function() {
                var facet_name = $(this).attr('data-name');
                var facet_label = FWP.settings.labels[facet_name];
                if ( 'undefined' !== typeof FWP.settings.num_choices[facet_name] && FWP.settings.num_choices[facet_name] > 0 && $('.facet-label[data-for="' + facet_name + '"]').length < 1 ) {

                    // collapse button before
                    $(this).before('<a class="btn btn-primary" data-toggle="collapse" href="#collapse_facet_' + facet_name + '" role="button" aria-expanded="false" aria-controls="collapse_facet_' + facet_name + '">' + facet_label + '</a>');

                    // open collapse element
                    $(this).before('<div class="collapse" id="collapse_facet_' + facet_name + '">');

                    // label
                    $(this).before('<p class="h4 facet-label" data-for="' + facet_name + '">' + facet_label + '</p>');

                    // close collapse element
                    $(this).after('</div>');


                } else if ( 'undefined' !== typeof FWP.settings.num_choices[facet_name] && !FWP.settings.num_choices[facet_name] > 0 ) {
                    $('.facet-label[data-for="' + facet_name + '"]').remove();
                }
            });
        });
    })(jQuery);
</script>

Is there anything wrong? Maybe JS isn't the best solution.

I also found an output hook to change the facet HMTL: https://facetwp.com/documentation/developers/output/facetwp_facet_html/

But I've no idea how to use it or where I need to add my HTML. Or if it's the right hook.

Cray :

I found my mistake. The problem is that you can only insert whole elements in to the DOM (thanks to @Rory McCrossan: https://stackoverflow.com/a/37206113/1788961).

So I had to change my code to this:

(function($) {
    $(document).on('facetwp-loaded', function() {
        $('.facetwp-facet').each(function() {
            var facet_name = $(this).attr('data-name');
            var facet_label = FWP.settings.labels[facet_name];
            if ( 'undefined' !== typeof FWP.settings.num_choices[facet_name] && FWP.settings.num_choices[facet_name] > 0 && $('.facet-label[data-for="' + facet_name + '"]').length < 1 ) {

                // wrapper around the whole facet and button
                $(this).wrap('<div class="facet-wrapper facet-wrapper-' + facet_name + '" data-for="' + facet_name + '></div>');


                // collapse button before
                $(this).before('<a class="facet-collapse-link" data-for="' + facet_name + '" data-toggle="collapse" href="#collapse_facet_' + facet_name + '" role="button" aria-expanded="false" aria-controls="collapse_facet_' + facet_name + '"><p class="h5 facet-label" data-for="' + facet_name + '">' + facet_label + '</p></a>');


                // collapse element
                $(this).wrap('<div class="collapse d-lg-block facet-collapse" data-for="' + facet_name + '" id="collapse_facet_' + facet_name + '"></div>');

            } else if ( 'undefined' !== typeof FWP.settings.num_choices[facet_name] && !FWP.settings.num_choices[facet_name] > 0 ) {
                $('.facet-label[data-for="' + facet_name + '"]').remove();
                $('.facet-collapse-wrapper[data-for="' + facet_name + '"]').remove();
                $('.facet-collapse-link[data-for="' + facet_name + '"]').remove();
                $('.facet-collapse[data-for="' + facet_name + '"]').remove();
            }
        });
    });
})(jQuery);

Now it's working fine.