FacetWP - conditionally display facet labels

Question

The following code generates a label for a facet (see sidebar).

I would like to add a conditional statement that prevents the label generation is the facet if empty.

$(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 ($('.facet-label[data-for="' + facet_name + '"]').length < 1) {
        $(this).before('<h3 class="facet-label" data-for="' + facet_name + '">' + facet_label + '</h3>');
    }
  });
});

Edit: Source of code

Answer 1

Your code seems identical to FacetWP's. The only variable I can think of is code placement. You might not be placing the code where it belongs (functions.php or a plugin). A quick fix would be adding their code to your theme's functions.php:

   function fwp_add_facet_labels() {
    ?>
   <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 ($('.facet-label[data-for="' + facet_name + '"]').length < 1) {
            $(this).before('<h3 class="facet-label" data-for="' + facet_name + '">' + facet_label + '</h3>');
        }
       });
     });
   })(jQuery);
   </script>
   <?php
   }
   add_action( 'wp_head', 'fwp_add_facet_labels', 100 );

Or alternatively follow their instructions: Here

Answer 2

You can this line for it to hide when empty.

&& $(this).children().length > 0)

So here is the all the code to add to your function.php file to show the h3 facet name and to hide the facets when empty.

function fwp_add_facet_labels() {
    ?>
<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 ($('.facet-label[data-for="' + facet_name + '"]').length < 1 && $(this).children()
                .length > 0) {
                $(this).before('<h3 class="facet-label" data-for="' + facet_name + '">' +
                    facet_label + '</h3>');
            }
        });
    });
})(jQuery);
</script>
<?php
   }
   add_action( 'wp_head', 'fwp_add_facet_labels', 100 );