Gists

<?php
add_action( 'facetwp_scripts', function() {
    ?>
        <script>
        (function($) {
            document.addEventListener('facetwp-loaded', function() {
                $('.facetwp-facet').each(function() {
                    var facet = $(this);
                    var facet_name = facet.attr('data-name');
                    var facet_type = facet.attr('data-type');
                    var facet_label = FWP.settings.labels[facet_name];
                    if (facet_type !== 'pager' && facet_type !== 'sort'  && facet_type !== 'reset') {
                        if (facet.closest('.facet-wrap').len() < 1 && facet.closest('.facetwp-flyout').len() < 1) {
                            facet.prepend('<h3 class="facet-label">' + facet_label + '</h3>');
                        }
                    }
                });
            });
        })(fUtil);
        </script>
<?php
}, 100 );

<?php
add_action('facetwp_scripts', function () {
// Change "3" in both style and script to change the number shown initially

?>
    <style>
        .facetwp-depth.visible > div:nth-child(n+3 of .facetwp-checkbox) {
            display: none;
        }
        .facetwp-depth.visible.showmore > div:nth-child(n+3 of .facetwp-checkbox) {
            display: block;
        }
    </style>
    <script type="text/javascript">
        (function($) {
            document.addEventListener('facetwp-loaded', function() {
                document.querySelectorAll('.facetwp-depth').forEach((node) => {
                    if ( node.childNodes.length > 3 ) { // only works if no grandchildren
                        // add show more / less
                        let show = document.createElement('a');
                        show.textContent = 'Show more';
                        show.classList.add('show-more');
                        node.append(show);
                        show.addEventListener('click', function(e) {
                            let showmore = e.target;
                            let depth = e.target.parentNode;
                            if ( depth.classList.contains('showmore') ) {
                                depth.classList.remove('showmore');
                                showmore.textContent = "Show more";
                            } else {
                                depth.classList.add('showmore');
                                showmore.textContent = "Show less";
                            }
                        });
                    }
                });
            });
        })(fUtil);
    </script>
<?php
}, 100);

<?php
add_action( 'facetwp_scripts', function() {
  ?>
  <script>
    document.addEventListener('facetwp-loaded', function() {
      FWP.hooks.addFilter('facetwp/selections/hierarchy_select', function(output, params) {

        var selected_values = [];
        params.el.find('.facetwp-hierarchy_select option:checked').each(function() {
          var value = $(this).attr('value');
          if (value.length) {
            selected_values.push({value: value, label: $(this).text()});
          }
        });

        if (selected_values.length === 3) {
          console.log(selected_values[2]['label']); // get the label of the 3rd level choice and do something with it
        }
        return output;
      });

    });
    })(fUtil);
  </script>
  <?php
}, 100 );

<?php
add_action('facetwp_scripts', function () { ?>
  <script>
    (function($) {
      $().on('facetwp-loaded', function() {
        var has_posts = ( 0 <  FWP.settings.pager.total_rows);
        var method = has_posts ? 'removeClass' : 'addClass';
        $('h1.listing-title')[method]('facetwp-hidden');
      });
    })(fUtil);
  </script>
<?php }, 100);

<?php

// See: https://facetwp.com/help-center/developers/javascript-reference/facetwp-refresh/#reset-all-other-facets-on-change-of-any-facet
// Or, to reset on change of a specific facet:
// https://facetwp.com/help-center/developers/javascript-reference/facetwp-refresh/#reset-all-other-facets-on-change-of-a-specific-facet

add_action( 'facetwp_scripts', function() { ?>
  <script>
    document.addEventListener('facetwp-refresh', function() {
      if ( null !== FWP.active_facet ) {
        let current_facet = fUtil(FWP.active_facet.nodes[0]).attr('data-name' );
        let others = FWP.facets;
        Object.keys(others).forEach(function (key) {
          if ( current_facet != key ) {
            FWP.facets[key] = [];
          }
        });
      }
    });
  </script>
<?php }, 100 );

<?php
/** allows magnifying glass search icon 
 ** to trigger a submit even when auto_refresh
 ** is disabled
 **/
add_action('facetwp_scripts', function () {
    ?>
    <script>
        (function($) {
            $().on('click', '.facetwp-type-search .facetwp-icon', function() {
                if (! FWP.is_refresh) {
                    FWP.refresh();
                }
            });
        })(fUtil);
    </script>
<?php
});

<?php
// If you are using the Submit Button add-on and want the redirect not to happen when your facet is empty, 
// use the following script and de-activate the add-on. This is basically the same as facetwp-submit.js, but with an 
// extra check in L13-14 to check if a specific facet is empty when the Submit button is clicked. If it is, the redirect does not happen.
// This can be useful to prevent 'empty' redirects for facet types that refresh themselves, like an Autocomplete facet that submits on Enter or clicking a selection.

add_action( 'facetwp_scripts', function() {
  ?>
  <script>
    (function($) {
      $().on('click', '.fwp-submit', function() {
        FWP.parseFacets();
        
        // Do nothing if this facet is empty
        if ( ! FWP.facets['my_facet_name'].length ) { // Replace 'my_facet_name' with the name of your facet
          return;
        }

        var href = $(this).attr('data-href');
        var query_string = FWP.buildQueryString();

        if (query_string.length) {
          var prefix = (-1 < href.indexOf('?')) ? '&' : '?';
          href += prefix + query_string;
        }

        window.location.href = href;
      });
    })(fUtil);
  </script>
  <?php
}, 100 );

<?php
// Syncs the selected values of two facets with different types when using one of the facets.
// The facets need to use the same Data Source.
// Change 'categories_radio' and 'categories_dropdown' to the names of your facets.
// Caveat: both facets will ghost each other's choices. This may not be optimal/desired.
// This can be fixed with the second snippet. Until a Dropdown facet has ghosts, this is not (yet) possible for Dropdowns.
add_action( 'facetwp_scripts', function() {
  ?>
  <script>
    document.addEventListener('facetwp-refresh', function() {
      if (null !== FWP.active_facet) {
        if ( 'categories_radio' == fUtil(FWP.active_facet.nodes[0]).attr('data-name' ) ) {
          FWP.facets['categories_dropdown'] = FWP.facets['categories_radio'];
        } else if ( 'categories_dropdown' == fUtil(FWP.active_facet.nodes[0]).attr('data-name' ) ) {
          FWP.facets['categories_radio'] = FWP.facets['categories_dropdown'];
        }
      }
    });
  </script>
  <?php
}, 100 );

// Optional: remove unclickable ghosts from the Radio facet
add_filter( 'facetwp_facet_html', function( $output, $params ) {
    if ( 'categories_radio' == $params['facet']['name'] ) { 
        $output = str_replace ( 'disabled' , '' , $output );
    }
    return $output;
}, 10, 2 );

<?php
/** Add your message in an element with the class 'facetwp-load-more-complete' where you want the
 ** no more results message to display.
 ** for ex.   <div class="facetwp-load-more-complete facetwp-hidden">That's all</div>
 ** See: https://facetwp.com/help-center/facets/facet-types/pager/#display-a-no-more-results-message-below-the-load-more-button
 **/

add_action('facetwp_scripts', function () { ?>
    <script>
        (function($) {
            $().on('facetwp-loaded', function() {
                var is_visible = (FWP.settings.pager.page < FWP.settings.pager.total_pages);
                var method = is_visible ? 'addClass' : 'removeClass';
                $('.facetwp-load-more-complete')[method]('facetwp-hidden');
            });
        })(fUtil);
    </script>
<?php }, 100);

<?php
// With JS:
add_action( 'facetwp_scripts', function() {
?>
    <script>
      document.addEventListener('facetwp-loaded', function() {
        fUtil('.facetwp-type-sort select').addClass('form-select');
      });
    </script>
<?php
}, 100 );

// Or, with PHP:
add_filter( 'facetwp_facet_html', function( $output, $params ) {
  if ( 'sort' == $params['facet']['type'] ) { //
    $output = str_replace( 'select', 'select class="form-select"', $output );
  }
  return $output;
}, 10, 2 );