Extras - Commenting & Reviews

Paginating comment, reviews, and replies

Through this function, you can choose to load a set number of comments & reviews when: a) the page is loaded; and b) the user clicks a load more button. This way you can paginate content to prevent an endless scroll on pages with many comments / reviews. See the tutorial below👇

Load under pagination for comments & reviews

As the number of comments and reviews start to increase on your pages, not paginating content can result in an awkward endless scroll. Through this function, you can choose to load a set number of comments & reviews when: a) the page is loaded; and b) the user clicks a load more button.  To add similar functionality to replies within comments and reviews, be sure to go to the next section.

To get started, you just need to go to the spark editor for the comment or review section you would like to add pagination to. On the 'Extra Features' section, select the 'Load More Pagination' feature.

Next, scroll down to the implementation section and switch on the toggle switch. On the dropdown, you can then select the number of comments or reviews you would like to show for each pagination. For example, if you select 5, then 5 comments or reviews on page load - then, when the user presses the load more button, 5 more comments or reviews will be loaded.

Next, you just need to copy and paste the class 'supersparks-load-more-{sparkcode} to a button that users will click to load more comments or reviews. Make sure this button is outside of the main grid for listing comments 'supersparks-comment-grid-{sparkcode}' like in the below example.

Comments / Reviews Pagination Video tutorial

In case you get stuck be sure to take a look at our video tutorial below 👇

Pagination for replies

Through this function, you can show a set amount of replies for each comment on page load. Similar to Youtube's comment section, users can click a show more button see all replies for a specific comment like the below example 👇

Replies Pagination Video Tutorial

// Optional: Add this CSS to your project's custom code section