How to use Infinite Scroll in Repeater element of Oxygen Builder

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

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

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.

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,

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
});
}
}
});

https://woocommerce-673951-2614313.cloudwaysapps.com/11-plus-maths-topic/numbers/

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?

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!