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 to Aleš Sýkora Cancel 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
Best practise for jQuery in Toolset
3. 7. 2019 in
Let me explain best practices for using jQuery inside a View, Form or Content Template's JS panel.
Read More
Aleš Sýkora wrote
Custom WordPress login logo
15. 1. 2021 in
Would you like to have your brand logo instead of default WordPress logo at your login page? Use this snippet in your custom funcionality plugin or in code snippets etc. This snippet changes the default logo and add link to the homepage. It also add custom Title for mouse hover over the logo.
Read More
Aleš Sýkora wrote
Calculate between Toolset Types fields easily
10. 10. 2018 in
Calculate between your Toolset custom post fields. Make your own plugin with shortcode today (or download our for free). Start now with our tutorial!
Read More
magnifiercross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram