Overview

The facetwp-loaded event gets triggered when FacetWP has finished the refresh process. It fires after a user has interacted with any facet. It also runs on the initial page load, after all facets have finished processing. This event is useful for modifying facet (or other page) output after being rendered.

Usage examples

Scroll on AJAX refresh

This example makes the page scroll to the top of the page after each facet interaction:

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-loaded', function() {
        window.scrollTo({ top: 0, behavior: 'smooth' });
      });
    </script>
  <?php
}, 100 );

See our scrolling tutorial for more examples of how and when to automatically scroll the page.

Re-initialize a script on AJAX refresh

Scripts that run on post items in the results listing (like lazy loading, masonry, isotope, or equal height scripts, etc.) will not work after an AJAX refresh, and need to be retriggered.

This example re-initializes Jetpack Lazy Load after an AJAX refresh:

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-loaded', function() {
        fUtil('body').trigger('jetpack-lazy-images-load');
      });
    </script>
  <?php
}, 100 );

However, besides after every AJAX refresh, the facetwp-loaded event also fires directly after the first page load, when your custom script already runs. So mostly, you only need to (re-)trigger a script on AJAX refresh (after using facets), after the initial page load. This can be done by checking for the FWP.loaded variable, which is only true after the page has loaded for the first time:

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-loaded', function() {
      if ( FWP.loaded ) {
        FOOBOX.init();
      }
    });
  </script>
  <?php
}, 100 );

More examples

See also

Last updated: April 4, 2024