Aleš Sýkora wrote

How to use Infinite Scroll in Repeater element of Oxygen Builder

If you want to use the “Load more” button when using repeater, you can do that with .JS library called “Infinite Scroll“.

  1. Load Infinite Scroll script from CDN (I am using Advanced Scripts again). For a speed purposes – use conditions to make it load only on pages where you need to use it. Current URL is:
https://unpkg.com/[email protected]/dist/infinite-scroll.pkgd.min.js
Advanced Scripts loading Infinite Scroll from CDN
  1. Create Repeater (if you use it at static front-page, you may need this pagination hack for wordpress).
My structure for infinite loading posts from repeater on homepage

For a repeater Query – I am using Custom, Post type = my post type, Count = posts per page 18. Use your own of course :).

3. Create “View more” button – I just added a Link wrapper with some text inside and with this class: .view-more-button (you need to specify this class later in inifniteScroll settings).

4. Add a InfiniteScroll settings to Oxygen: Then you can add this code directly to the code block in page, but I am using it as a shortcode from advanced scripts, because I want to use it on more pages. It is up to you. Put it directly into code block or use shortcode way.

document.addEventListener("DOMContentLoaded", function() {
	if(window.angular) return;

	var infScroll = new InfiniteScroll( '.oxy-dynamic-list', {
		path: '.next.page-numbers',
		append: '.oxy-dynamic-list > .ct-div-block',
		hideNav: '.oxy-repeater-pages-wrap',
		button: '.view-more-button',
		scrollThreshold: false, // disable load on scroll 
	});
});
I am using my own selectors for specific repeater classes. But the code above works fine for all Repeaters.

Refresh your page, and it is done :). If you want to display status or set different settings, check out the documentation of infinite scroll library.

Add loading animation

Add this HTML to the code block before Show more button:

<div class="loading-status">
<div class="loader-wheel infinite-scroll-request">
  <i><i><i><i><i><i><i><i><i><i><i><i>
  </i></i></i></i></i></i></i></i></i></i></i></i>
</div>
  <p class="infinite-scroll-last c-text-s c-text-light">End of content</p>
  <p class="infinite-scroll-error c-text-s c-text-light">No more pages to load</p>
</div>
  • .infinite-scroll-request element will be displayed on request
  • .infinite-scroll-last element will be displayed on last
  • .infinite-scroll-error element will be displayed on error

Add also this CSS styles of the loader

.loading-status {
	display: none; 
	text-align: center;

}

.loader-wheel {
  font-size: 64px;
  position: relative;
  height: 1em;
  width: 0.55em;
  padding-left: 0.45em;
  animation: loader-wheel-rotate 0.5s steps(12) infinite;
  overflow: hidden;
}

.loader-wheel i {
  display: block;
  position: absolute;
  height: 0.3em;
  width: 0.1em;
  border-radius: 0.05em;
  background: #333;
  opacity: 0.8;
  transform: rotate(-30deg);
  transform-origin: center 0.5em;
}

@keyframes loader-wheel-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

Add this to the JS setup of your infinite scroll var infScroll.

status: '.loading-status'

2 comments on “How to use Infinite Scroll in Repeater element of Oxygen Builder”

  1. Very Nice tutorial. Clean and easy to follow.
    Wonder want needs to done, if I have to add some effect like rotating icon, while the post are getting loaded.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

More from category
Aleš Sýkora wrote
Properly align Checkbox in Astra theme
4. 7. 2019 in
Hello, today I found that Astra theme incorrectly displays Toolset form checkbox. This is fast repair:
Read More
Aleš Sýkora wrote
Remove Archive Title prefix in WordPress
28. 5. 2021 in
Put this code in code snippets plugin.
Read More
Aleš Sýkora wrote
Bootstrap 4 button line break
11. 11. 2019 in
Break the line of long text in Bootstrap 4 button on mobile device.
Read More
magnifiercross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram