Overview

The facetwp-refresh event gets triggered before FacetWP begins the refresh process. It runs before any AJAX is requested, and before the URL hash gets updated, also on the initial page load. This event is useful for modifying any FWP variables before getting sent to the server.

Usage examples

Override a facet value

On refresh, force or override a facet choice:

How to use custom PHP code?
PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info
add_action( 'facetwp_scripts', function() {
  ?>
    <script>
      document.addEventListener('facetwp-refresh', function() {
        FWP.facets['vehicle_type'] = ['car']; // Force a specific value
      });
    </script>
  <?php
}, 100 );

Note that the format of the set facet value (in line 5)depends on the facet type. To quickly see what (type of) value(s) a facet type needs, make a selection in the facet on the page, then open the browser Console, and type: FWP.facets. This will show an object of all facets on the page, with their active values. The FWP.facets object can also be used programmatically.

For example, to set a selection for a Proximity facet, it needs four separate values: the latitude, longitude, radius, and (URI-encoded) location string: 

How to use custom PHP code?
PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info
add_action( 'facetwp_scripts', function() {
  ?>
  <script>
    document.addEventListener('facetwp-refresh', function() {
      FWP.facets['my_proximity_facet'] = ['42.0883603','-87.98062650000001','150','Arlington%20Heights%2C%20IL%2C%20USA']; // Set lat, lng, radius, location. Replace 'my_proximity_facet' with the name of your Proximity facet
    });
  </script>
  <?php
}, 100 );

Note that the fourth value in this facet type (the address) needs to be URI-encoded because it contains spaces and commas. To URI-encode readable location strings to usable facet values, you can use encodeURIComponent(), like this:

How to use custom JavaScript code?
JavaScript code can be placed in your (child) theme's main JavaScript file. Alternatively, you can add it manually between <script> tags in the <head> section of your (child) theme's header.php file. You can also load it with a hook in your (child) theme's functions.php file, or in the Custom Hooks add-on. To load the code only on pages with facets, use the facetwp_scripts hook. To load it on all pages, use wp_head or wp_footer. Or you can use a code snippets plugin. More info
$address = 'Arlington Heights, IL, USA';
$location = encodeURIComponent( $address );

Conditionally reset a facet

On refresh, reset facet A when any choice in facet B is currently selected:

How to use custom PHP code?
PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info
// Change 'facet_a' and 'facet_b' to the names of your facets.
add_action( 'facetwp_scripts', function() {
  ?>
    <script>
      document.addEventListener('facetwp-refresh', function() {
        if (FWP.facets['facet_b'].length > 0) {
          FWP.facets['facet_a'] = []; // Reset this facet
        }
      });
    </script>
  <?php
}, 100 );

On refresh, reset facet A when facet B is the “active” facet (currently being selected or unselected):

How to use custom PHP code?
PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info
// Change 'facet_a' and 'facet_b' to the names of your facets.
add_action( 'facetwp_scripts', function() {
  ?>
    <script>
      document.addEventListener('facetwp-refresh', function() {
        if (null !== FWP.active_facet && 'facet_b' == fUtil(FWP.active_facet.nodes[0]).attr('data-name')) {
          FWP.facets['facet_a'] = []; // Reset this facet
        }
      });
    </script>
  <?php
}, 100 );

Note that the FWP.active_facet variable is only available during refresh, so within the facetwp-refresh hook.

Reset all other facets on change of a specific facet

On refresh, reset all other facets when a specific facet is the “active” facet (currently being selected or unselected):

How to use custom PHP code?
PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info
// Change 'my_facet_name' to the name of the facet that resets other facets.
add_action( 'facetwp_scripts', function() { ?>
  <script>
    document.addEventListener('facetwp-refresh', function() {
      let facet_name = 'my_facet_name';
      if ( null !== FWP.active_facet && facet_name == fUtil(FWP.active_facet.nodes[0]).attr('data-name' ) ) {
        let others = FWP.facets;
        Object.keys(others).forEach(function (key) {
          if ( facet_name != key ) {
            FWP.facets[key] = [];
          }
        });
      }
    });
  </script>
<?php }, 100 );

The above code can be useful to prevent Pager facets from including other facet selections on pages where auto-refresh is disabled.

Reset all other facets on change of any facet

On refresh, reset all other facets when any facet is the “active” facet (currently being selected or unselected):

How to use custom PHP code?
PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info
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 );

More examples

See also

Last updated: November 15, 2024