Refresh Affirm on FacetWP Page/Template Change
🗓One of the main things I do at my primary job is manage a network of WooCommerce sites and I was recently tasked with rolling out Affirm Payments network-wide. While the setup itself went smoothly (pretty much just dropping in an API key, as you'd expect) I quickly noticed that Affirm's "Category Promo Messaging" feature didn't play nice with FacetWP.
Specifically, this little guy here seemed to disappear whenever you applied a filter - or - moved to a different page:
After digging around a bit on Affirms site it seems that you have to refresh the Affirm UI whenever you make a change on the page to pull that inline messaging in again, this is as easy as running the following function:
affirm.ui.refresh();
If you drop that in your console you'd see that everything appears again as you'd expect.
To get that up and running with FacetWP all you need to do is add an event listenter to the JS event added by FacetWP called, 'facetwp-loaded' like so:
add_action( 'wp_footer', function() { ?>
<script type="text/javascript">
document.addEventListener('facetwp-loaded', function() {
affirm.ui.refresh();
});
</script>
<?php }, 100 );
That'll add a little snippet in your footer that will refresh the Affirm UI each time something on FacetWP changes (Filter Applied, Page Changed, Etc. Etc.).
You can easily add this to your functions.php file - or - using the Code Snippets plugin.
Hopefully that saves someone a little time! 😁
———