Hi Mark,
when you think about the pagination feature of a content projection you will remember, that FirstSpirit is generating physical pages for each pagination page. The click on one, two, three, etc. then is nothing else than a link to the next / previous page of the pagination.
A load more functionality therefore can be implemented in several ways:
- Render ALL the content in one single page but only show the first few elements.
Then use JavaScript triggered by the click on the load more button to show the next few elements until all are shown and the load more button will be deactivated.
Benefits: Easy to implement, no additional components needed in your architecture, etc.
Disadvantages: Performance, because you render all content into the HTML which will be loaded when the page is loaded. If you have several hundreds or thousands of entries this is not a good approach. (Also, pictures may be loaded initially, even if they are not shown loaded if you do not have some lazy loading functionality implemented.) - Using CaaS (Content as a Service) or some other component such as a search engine (Solr, Elastic, SmartSearch, etc.)
Use de API provided by the component of your choice to query the data and then render the elements on your page using JavaScript. When clicking the load more button use JavaScript to query the next junk of elements. All those services provide some pagination feature right out of the box where you can query e.g. "the third page with 10 entries per page".
Benefits: Performance
Disadvantages: You need a new component in your architecture. - Build something on your own. You can build the behavior of option 2 also on your own. Write e.g. a JSON file containing all your data and then read / process it to render the elements on your page.
I hope this will help you.
Greetings
Sandro
