0

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

  • What exactly is your question? – DᴀʀᴛʜVᴀᴅᴇʀ Oct 30 '17 at 22:20
  • edit your question to add the code which create the checkboxes – mmm Oct 30 '17 at 22:26
  • @darthvader - how to prevent a label being generated if the facet is empty – richerimage Oct 30 '17 at 22:28
  • @mmm it's generated by the facetwp plugin – richerimage Oct 30 '17 at 22:29
  • If you're asking for plugin support it may be deemed off-topic here and you're better asking on the plugin's support forum. – DᴀʀᴛʜVᴀᴅᴇʀ Oct 30 '17 at 22:39
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

| improve this answer | |
1

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 );
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.