Load more button (both CSS and shortcode template approaches)

test-css-approach.php

<?php
/*
CSS-template approach
*/
?>

<button class="fwp-load-more" onclick="fwp_load_more()">Load more</button>

<script>
(function($) {
  $(function() {

    FWP.is_load_more = false;

    wp.hooks.addFilter('facetwp/template_html', function(result, params) {
      if (FWP.loaded && FWP.is_load_more) {
        FWP.is_load_more = false;
        var inject = $(params.response.template).find('.facetwp-template').html();
        $('.facetwp-template').append(inject);
        return true;
      }
      return false;
    });
  });
})(jQuery);

function fwp_load_more() {
  FWP.is_load_more = true;
  var page = FWP.settings.pager.page;
  var total_pages = FWP.settings.pager.total_pages;
  if (page < total_pages) {
    FWP.paged = (page + 1);
    FWP.refresh();
  }
  if (page + 1 == total_pages) {
      $('.fwp-load-more').hide();
  }
}
</script>

test-shortcode-approach.php

<?php
/*
Shortcode-template approach
*/
?>

<button class="fwp-load-more" onclick="fwp_load_more()">Load more</button>

<script>
(function($) {
  $(function() {

    FWP.is_load_more = false;

    wp.hooks.addFilter('facetwp/template_html', function(result, params) {
      if (FWP.loaded && FWP.is_load_more) {
        FWP.is_load_more = false;
        var inject = params.response.template;
        $('.facetwp-template').append(inject);
        return true;
      }
      return false;
    });
  });
})(jQuery);

function fwp_load_more() {
  FWP.is_load_more = true;
  var page = FWP.settings.pager.page;
  var total_pages = FWP.settings.pager.total_pages;
  if (page < total_pages) {
    FWP.paged = (page + 1);
    FWP.refresh();
  }
  if (page + 1 == total_pages) {
      $('.fwp-load-more').hide();
  }
}
</script>

Thanks for posting this!

Got a question: this is working for me but as a "Next" button (whereas it pages to the next screen of results). Any ideas how I might modify this to append the next page of results to the current page?

From looking at your code, I think that is what it is supposed to do. I'm thinking the addFilter part of this isn't setup properly for me. Where/what is 'facetwp/template_html'?

Hello Matt,

Load more button works fine but facet filters not working with this code.

What is the problem?

Thanks.