When you use FacetWP you can do some cool things like change the ‘count’ output of a page. Using the function facetwp_display()
you can add facetwp_display( 'counts' )
to your page title, and then a boring old archive title goes from “List of Characters (2022)” to “List of Characters (1-24 of 2022)”
But… What if you could do more?
What Could Be More?
If you have a lot of data, sometimes a page can load and FacetWP spins while it collects everything in it’s wee javascripty brain. When that happens, you have a cognitive moment of “What?” And in order not to lose a user, you want to indicate, somehow, that an action is happening. A spinning icon is, I think, a great way to do that.
So with that in mind, I want to do this:
And I did.
The Code
This needs javascript. I used some logic from the FacetWP documentation and some memories about how you can replace text with javascript and came up with this:
(function($) { $(document).on('facetwp-refresh', function() { $('.facetwp-count').html('<i class="fa fa-spinner fa-pulse fa-fw"></i><span class="sr-only">Loading...</span>'); }); $(document).on('facetwp-loaded', function() { $('.facetwp-count').html(''); }); })(jQuery);
Then I slap it into my PHP code like so:
$count_posts = facetwp_display( 'counts' ); the_archive_title( '<h1 class="facetwp-page-title page-title">' . $title, ' (' . $count_posts . '<span class="facetwp-count"></span>)</h1>' );
The content for $count_posts
shows nothing while it’s loading, so the check for facetwp-loaded
will handle it perfectly.