[Scripts] Infinite Scroll on Posts page in Oxygen

This tutorial provides the steps to set up a “Click to load more” type of infinite scroll for the posts on Posts page (Blog) in Oxygen using the Scripts module of Oxy Toolbox.

For scroll mode follow this instead.

Step 1

Set up a Posts page by following this tutorial.

Note: This tutorial can also be applied to other types of archive pages.

Step 2

Go to Oxygen > Oxy Toolbox. Check Scripts.

Step 3

Add a Code Block below the Easy Posts component.

PHP & HTML:

<div class="page-load-status">
  <div class="loader-ellips infinite-scroll-request">
    <span class="loader-ellips__dot"></span>
    <span class="loader-ellips__dot"></span>
    <span class="loader-ellips__dot"></span>
    <span class="loader-ellips__dot"></span>
  </div>
  <p class="infinite-scroll-last">End of content</p>
  <p class="infinite-scroll-error">No more pages to load</p>
</div>

<p><button class="view-more-button">View more</button></p>

<?php
	wp_enqueue_script( 'oxy_toolbox_scripts_infinite-scroll' );
?>

CSS:

.page-load-status {
	display: none; /* hidden by default */
	/* padding-top: 20px;
	border-top: 1px solid #DDD; */
	text-align: center;
	color: #777;
}

.loader-ellips {
	font-size: 20px; /* change size here */
	position: relative;
	width: 4em;
	height: 1em;
	margin: 10px auto;
}

.loader-ellips__dot {
	display: block;
	width: 1em;
	height: 1em;
	border-radius: 0.5em;
	background: #555; /* change color here */
	position: absolute;
	animation-duration: 0.5s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
}

.loader-ellips__dot:nth-child(1),
.loader-ellips__dot:nth-child(2) {
	left: 0;
}
.loader-ellips__dot:nth-child(3) { left: 1.5em; }
.loader-ellips__dot:nth-child(4) { left: 3em; }

@keyframes reveal {
	from { transform: scale(0.001); }
	to { transform: scale(1); }
}

@keyframes slide {
	to { transform: translateX(1.5em) }
}

.loader-ellips__dot:nth-child(1) {
	animation-name: reveal;
}

.loader-ellips__dot:nth-child(2),
.loader-ellips__dot:nth-child(3) {
	animation-name: slide;
}

.loader-ellips__dot:nth-child(4) {
	animation-name: reveal;
	animation-direction: reverse;
}

.view-more-button {
	background-color: #ddd;
	width: 100%;
	padding: 20px;
	border: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}

.view-more-button:hover {
	background-color: #333;
	color: #fff;
}

JavaScript:

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

	var infScroll = new InfiniteScroll( '.oxy-posts', {
		path: '.next.page-numbers',
		append: '.oxy-post',
		hideNav: '.oxy-easy-posts-pages',
		button: '.view-more-button',
		// using button, disable loading on scroll 
		scrollThreshold: false,
		status: '.page-load-status',
	});
});

If you are using a Repeater instead of Easy Posts, use this JS instead:

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',
		// using button, disable loading on scroll 
		scrollThreshold: false,
		status: '.page-load-status',
	});
});

That’s it.

Infinite scroll should now be working on the front end.