mark_mueller
New Creator

"Load more" function instead of pagination for multi-page content-projection / datasource

Jump to solution

Dear Community,

I remember from the developer course how to make a standard paging with clicking on 1, 2 etc. to reach different sections of the list overview for a datasource content projection.

The requirement now is to have a "Load more" button at the bottom of the page where the next section of the list overview is loaded and added into the existing content.

Is this supported out-of-the-box or what would be the best way to implement this?

Best regards,
Mark

Labels (2)
Tags (2)
0 Kudos
1 Solution

Accepted Solutions
bIT_sosswald
Returning Responder

Re: "Load more" function instead of pagination for multi-page content-projection / datasou

Jump to solution

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:

  1. 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.)
  2. 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.
  3. 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

 

View solution in original post

2 Replies
bIT_sosswald
Returning Responder

Re: "Load more" function instead of pagination for multi-page content-projection / datasou

Jump to solution

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:

  1. 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.)
  2. 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.
  3. 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

 

mark_mueller
New Creator

Re: "Load more" function instead of pagination for multi-page content-projection / datasou

Jump to solution

Hi Sandro,

thank you very much. This helps me a lot.

Best regards,
Mark

0 Kudos