FacetWP - add a "Load more" button below results

functions.php

<?php

function fwp_load_more() {
?>
<script>
(function($) {
    $(function() {
        if ('object' != typeof FWP) {
            return;
        }

        wp.hooks.addFilter('facetwp/template_html', function(resp, params) {
            if (FWP.is_load_more) {
                FWP.is_load_more = false;
                $('.facetwp-template').append(params.html);
                return true;
            }
            return resp;
        });

        $(document).on('click', '.fwp-load-more', function() {
            $('.fwp-load-more').html('Loading...');
            FWP.is_load_more = true;
            FWP.paged = parseInt(FWP.settings.pager.page) + 1;
            FWP.soft_refresh = true;
            FWP.refresh();
        });

        $(document).on('facetwp-loaded', function() {
            if (FWP.settings.pager.page < FWP.settings.pager.total_pages) {
                if (! FWP.loaded && 1 > $('.fwp-load-more').length) {
                    $('.facetwp-template').after('<button class="fwp-load-more">Load more</button>');
                }
                else {
                    $('.fwp-load-more').html('Load more').show();
                }
            }
            else {
                $('.fwp-load-more').hide();
            }
        });
    });
})(jQuery);
</script>
<?php
}
add_action( 'wp_head', 'fwp_load_more', 99 );

This code work great except when you refresh the browser. If you display 5 results per page and you click 2 times on the 'load more' button, you will see 15 results as expected, but if you refresh the browser, you will now see only 5 results and those results are from 10 to 15. First 10 results are ignored because url hash is set to ?fwp_paged=3

Here's a solution to remove the fwp_paged query string param and preventing the jump down the page

// Remove the WPFacet fwp_paged query string parameter on load
// Useful for when loading WPFacet entries dynamically
function hlp_fah_remove_query_param()
{
	
	if ( isset($_GET['fwp_paged']) ) {
		
		// Get the current URL		
		$current_url = (isset($_SERVER['HTTPS']) ? "https" : "http") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
		
		// Remove the param
		$current_url = remove_query_arg('fwp_paged', $current_url);
		
		// Visit the new URL
		wp_redirect( $current_url );
		exit();
		
	}
	
}
add_action( 'template_redirect', 'hlp_fah_remove_query_param' );

Instead of removing query parameter you can force facetwp template load with this one line:

add_filter( 'facetwp_template_force_load', '__return_true' );

I don't know how relevant this is, today. But I came across this code in a project, and it was breaking FacetWP. In line 12 wp.hooks should be FWP.hooks

Thank you Wordpress 5.0

No more need to write code to implement a load more button. The facetwp plugin added this functionality. You can just check this option in the plugin settings.