Aleš Sýkora / November 28, 2023 / 27 comments
How to use Infinite Scroll in Repeater element of Oxygen Builder
min read / Custom Code, Oxygen Builder, Plugins, WordPress / Share on: Twitter, LinkedIn, Facebook
Post summary: If you want to use the “Load more” button when using repeater, you can do that with .JS library called “Infinite Scroll”. 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…
If you want to use the “Load more” button when using repeater, you can do that with .JS library called “Infinite Scroll“.
- 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/infinite-scroll@4/dist/infinite-scroll.pkgd.min.js
- Create Repeater (if you use it at static front-page, you may need this pagination hack for wordpress).
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
});
});
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 onrequest
.infinite-scroll-last
element will be displayed onlast
.infinite-scroll-error
element will be displayed onerror
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'
Fuel my passion for writing with a beer🍺
Your support not only makes me drunk but also greatly motivates me to continue creating content that helps. Cheers to more discoveries and shared success. 🍻
Rob Tyrrell
Hi,
Thanks for this code, it works great, but only on pages it seems.
I’m trying to use it on a Custom Post Type but the view more button just repeats the posts that are already displayed.
You can see it here.
This is a page (this works):
https://al.choosepurpledev5.co.uk/test/
This is a CPT (doesn’t work):
https://al.choosepurpledev5.co.uk/destination/test/
I would be very grateful if you had any ideas!
Thanks,
Rob
Ram
Very helpful tutorial.
I am using oxygen tabs element inside the dynamic repeater, after clicking load more the tabs are displaying one after other not like a normal tabs. if i reload the page then tabs are displaying normal.
Please check and let me know if there is any fix for this, to display tabs normally without re-loading the page
Thank you:)
keshav Bhutra
Very Nice and easy-to-work tutorial.
A small issue I am getting, your help is appreciable I am using this on repeater on archive template now some of my categories is less than 9 items in it and I can see the load more button is still shows how to hide that button if there is no page to load I check with their “checkLastPage” but get not help. Thanks in advance
Irinel
The JS you provided caused a conflict with another javascript plugin.
But I managed to do it with jquery, so I’ll leave the code here in case anyone needs it.
jQuery(document).ready(function($) {
$(‘.oxy-dynamic-list’).infiniteScroll({
path: ‘.next.page-numbers’,
append: ‘.oxy-dynamic-list > .ct-div-block’,
history: false,
hideNav: ‘.oxy-repeater-pages-wrap’,
button: ‘.view-more-button’,
scrollThreshold: false,
});
});
Nenad
Hey, I think it would be really awesome if you could add one small thing under the step number 2 – and that is:
– how to handle a situation when you don’t have yet the number of posts per page specified in the query – say you specified 18 but you don’t have them made. The link wrapper/button that says “Load more” won’t work and will give back a blank page. Best option would be for the link wrapper to not show up at all until the number of the existing posts “triggers” pagination.
So, in short, how to make the “load more” link wrapper hidden when you don’t have enough posts and appear when you make them?
Thank you very much for your time.
Nenad Savković
Hey Aleš!
Is there any free alternative to Advanced Scripts that I can use? Could I do the same thing with the Code Snippets plugin – and would there be some specific things to pay attention to in that case?
Thanks for answering a newb’s question!
Saswata Baksi
Hi Aleš,
Awesome, thanks for posting this. I have implemented this and it is so smooth, but can you tell me how can I do the same for Individual blog-post as well?
I am confused about the code part.
Thanks in advance,
GK
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.
Pert Ionel Cristian
I use this method for me and works ust fine… I wrap the load more link and the code block in a div with the class .pc-load-more-wrapper and I add this js code on the code block to add display none if the class .oxy-repeater-pages-wrap is not on the page, I’m not a JS expert but works :
document.addEventListener(“DOMContentLoaded”, function() {
// Check if the element with class “oxy-repeater-pages-wrap” exists
var repeaterPagesWrap = document.querySelector(‘.oxy-repeater-pages-wrap’);
if (!repeaterPagesWrap) {
// If it doesn’t exist, set display none for the div with the class .pc-load-more-wrapper
var containerId = ‘.pc-load-more-wrapper’;
var container = document.querySelector(containerId);
if (container) {
container.style.display = ‘none’;
}
} else {
// If the element with class “oxy-repeater-pages-wrap” exists, set display flex for .pc-load-more-wrapper
var containerId = ‘#div_block-869-27’;
var container = document.querySelector(containerId);
if (container) {
container.style.display = ‘flex’;
}
// If Angular is not present, initialize InfiniteScroll
if (!window.angular) {
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’,
status: ‘.loading-status’,
scrollThreshold: false, // disable load on scroll
});
}
}
});
Rob Tyrrell
Hi,
Actually, no, it doesn’t, I’m tearing my hair out!
Rob
Aleš Sýkora
You are right, it repeats same 12 posts. Does it work when you disable it and just try with normal pagination?
Rob Tyrrell
Hi,
On this page:
https://al.choosepurpledev5.co.uk/destination/test/
When you hit view more it just repeats the same 12 posts that are already showing?
Aleš Sýkora
Hello Rob, I checked your ULR’s, and it works on both. Did you find any issue with the tutorial?
Aleš Sýkora
I am not sure what is wrong, but if this will be my website, I will start with solving the duplicated ID’s at first. Maybe it will solve the problem. Otherwise, I would suggest to use custom tabs instead of Oxygen tabs, because of accessibility. Take a look into the code. There is a tons of duplicated ID’s.
Ram
https://woocommerce-673951-2614313.cloudwaysapps.com/11-plus-maths-topic/numbers/
Aleš Sýkora
Maybe if you share URL, because I am not sure about it.
Aleš Sýkora
Hello Keshav, take a look at the source code. On the page with 3 items, you can find the .page-numbers element. On the page where only 2 items are displayed, this element is missing. That’s why the button doesn’t dissapear, because the path is not availaible. Unfortunatelly, I don’t know what to do with this. You may somehow force the .oxy-repeater-pages-wrap to appear everytime, but I have no idea how. Sorry for this bad news. Also, take a look at the console, you can see the error immediately: “Bad InfiniteScroll path option. Next link not found: .next.page-numbers”.
Maybe, you can try to write a simple function. If .oxy-repeater-pages-wrap doesn’t exist, then destroy the infinitescroll with
$container.infiniteScroll('destroy')
Keshav Bhutra
Hi Ales, Okay so here is my search template, for now, it’s set to 3 perpostpage, if results have more than 3 posts shown its works fine but if the result is not more than 3. The button is visible.
1. https://royalfabrication.ie/?s=steel
2. https://royalfabrication.ie/?s=case
And Javascript code:-
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’,
checkLastPage: true,
scrollThreshold: false, // disable load on scroll
});
});
Aleš Sýkora
Hi keshav, how did you set up the checkLastPage? Can I see your JS code and your website?
Regards,
Aleš
Aleš Sýkora
Thank you Irinel!
Aleš Sýkora
Hello, I don’t have option for that cause i do not need it. However take a look at https://infinite-scroll.com/options.html for “checkLastPage” option.
Aleš Sýkora
Hi, yes it works with 100+ posts. It depends on your server. See the “cache” section in official documentation: https://infinite-scroll.com/options.html
Nenad Savković
Hey again, thanks for the answer!
One more thing – does this load more solution works well with larger number of posts in terms of performance? Let’s say a hundred or more?
Aleš Sýkora
Hey Nenad, you can use the Code Snippets plugin. But you cannot equeue the scripts with it. You can also build your own plugin, for example with Srikat’s Custom funcionality plugin.
Saswata Baksi
Hi Aleš,
No no, I am looking for implementing it for the Single Post template.
So when a reader comes to the end of a blog then the next blog is automatically loaded by using wordpress get the next post/previous post option.
I saw on the infinite scroll official site that I can use the function for the path field. But can’t able to understand what will be the path, to get the next post.
Appreciate your help!
Aleš Sýkora
Hello! So you want to add a repeater with all posts from same category except the current post and add it under the current post? Or what you want to achieve? I will try to help.
Aleš Sýkora
Hello! Loading animations can be implemented. You can use the ones defined here: https://infinite-scroll.com/extras.html#loading-animations. I have updated the Article with how to add the loading animation.