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

More examples

See also