Gists

<?php
/** partial support, facet pager does not work, generateblock pager does work
 ** but does not does not use ajax to update page
 ** add "facetwp-template" class to query https://d.pr/i/1R8Nds
 ** and the snippet below
 **/

add_filter('generateblocks_query_wp_query_args', function ($args, $attributes, $block, $current) {
  if ("facetwp-template" == $attributes['className']) {
    $args['facetwp'] = true;
  }
  return $args;
}, 10, 4);

<?php
add_action('facetwp_scripts', function () {
  ?>
  <script>
    document.addEventListener('facetwp-loaded', function() {
      if (FWP.loaded) {
        MK.component.ResponsiveImageSetter.init(jQuery('.facetwp-template img[data-mk-image-src-set]'));
      }
    });
  </script>
  <?php
}, 100);

<?php
// Filters out the "FacetWP has not detected a listing template" on pages without a '.facetwp-template' element.
// This is useful in niche customized scenarios where FacetWP JS assets are loaded on all pages, e.g. if included in a code compilation pipeline.
add_action('wp_footer', function() {
  ?>
  <script>
    const originalConsoleError = console.error;
    console.error = function() {
      if (arguments[0] &&
        typeof arguments[0] === 'string' &&
        arguments[0].includes('FacetWP has not detected')) {
        return;
      }
      originalConsoleError.apply(console, arguments);
    };
  </script>
  <?php
});

<?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
/** fixes <picture> tag processing https://d.pr/i/UYLz8P
 ** for facet's ajax refreshes which don't automatically
 ** get processed by imagify
 ** NOT for use with facetwp listing templates
 **/
add_action( 'facetwp_inject_template', function( $output ) {
    $process = New \Imagify\Picture\Display( new Imagify_Filesystem() );
    $output['template'] = $process->process_content( $output['template'] );
    FWP()->request->output = $output;
});

<?php
// Disable FacetWP's query variables in the URL, except for Pager facets.
// To entirely disable FacetWP's query variables, see:
// https://facetwp.com/help-center/developers/the-facetwp-url/#disable-facetwps-query-string

add_action( 'facetwp_scripts', function() {
  ?>
  <script>
    document.addEventListener('facetwp-refresh', function() {

        FWP.buildQueryString = function() {

          var fwp_vars = Object.assign({});

          // Add pagination to the URL hash
          if (1 < FWP.paged) {
            fwp_vars['paged'] = FWP.paged;
          }

          fwp_vars = FWP.helper.serialize(fwp_vars, FWP_JSON.prefix);
          return fwp_vars;
        }

    });
  </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

// Get the minimum and maximum indexed values for the posts in the current query on the page 
// for a specific number-based facet like a Number Range facet

global $wpdb;

$facet_name = 'my_facet_name'; // replace with name of your facet
$post_ids = FWP()->unfiltered_post_ids;
$sql = "
SELECT MIN(facet_value + 0) AS `min`, MAX(facet_display_value + 0) AS `max` FROM {$wpdb->prefix}facetwp_index
WHERE facet_name = '{$facet_name}' AND facet_display_value != ''  AND post_id IN (' . implode( ',', $post_ids ) . ')';";

$row = $wpdb->get_row( $sql );

$range_min = (float) $row->min;
$range_max = (float) $row->max;