Example: Change from pagination to continuous loading

Goal

Change the results loading from standard pagination to a “load more“behaviour.

Steps

1. Extend the Results component - Example: Extending the results set

2. In the template, override remove all instance of <tool-row />. Add the <load-more /> component after the <result-listing />. The end result should look like this:

   <script id="vue-hawksearch-results" type="x-template"> <div class="hawk-results"> <search-results-label /> <banner zone="Top"></banner> <selections /> <template v-if="searchError"> <span>{{ $t('response_error_generic') }}</span> </template> <template v-else-if="searchOutput && searchOutput.Results && searchOutput.Results.length == 0"> <span>{{ $t('No Results') }}</span> </template> <template v-else-if="!waitingForInitialSearch"> <tabs></tabs> <result-listing /> <load-more /> </template> <banner zone="Bottom"></banner> </div> </script>

3. Add a template override for the LoadMore component if necessary

   <script id="vue-hawksearch-load-more" type="x-template"> <div class="text-center"> <button v-if="!noMoreResults" v-on:click="loadMoreResults">Load More</button> </div> </script>

4. Include the file in the project.

5. Save, build and reload the site.