Infinite Scroll - Oxygenados La comunidad
Oxygenados La comunidad hispana
Recoda White Full Logo
Patrocinador
Menu
post oxygen builder

Infinite Scroll

Listado de Guías

En esta ocasión vamos a instalar un infinite scroll en una página o entrada que lleve un repeater de Oxygen.
Para ello nos vamos a valer de una librería Infinite Scroll , añadiendo solamente un botón y un Code Block en el que meteremos un poco de código JS, CSS y HTML.
Empezamos como siempre siguiendo los pasos que mostramos.

  1. Justo debajo de donde termina el bloque del repeater añadimos un Div y dentro de este un Code Block y un botón.
    A este botón hay que darle la clase "view-more-button", sin las comillas, pero puede personalizarse a gusto.
    (ver imagen abajo donde mostramos una disposición del Panel de Estructura para mejor comprensión).
Selector-Detector-oxygenados
  1. En la sección de JavaScript del Code Block añadimos el siguiente código:
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',
		status: '.loading-status',
		scrollThreshold: false, // disable load on scroll 
	});
});

Click para Copiar
Copiado
  1. En la sección de CSS metemos:

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

Click para Copiar
Copiado
  1. Y por último en la sección PHP/HTML:
    Nota:
    Los textos:
    • "Estás al final del contenido" y "Hay algún Error"
    Los puedes sustituir por algo de tu gusto.

    Hay mas opciones de configuración como por ejemplo la animación de carga, la cual se puede ver en Aqui y no está de mas pasarse a leer la licencia.

<script src="https://unpkg.com/infinite-scroll@4/dist/infinite-scroll.pkgd.min.js"></script>
<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">Estás al final del contenido</p>
  <p class="infinite-scroll-error c-text-s c-text-light">Hay algún Error</p>
</div>
Click para Copiar
Copiado
0 0 votos
Puntuación
Suscribir
Notificar de
guest
0 Comentarios
Viejos
Nuevos Más votados
Comentarios en línea
Ver todos los comentarios

OTRAS GUIAS

CookieConsent v3

La nueva versión de CoockieConsent de Orest Bida, en este caso la V3, que ofrece mayores funcionalidades y mayor capacidad de personalización.

Leer más
Lighthouse: 5 consejos sencillos

Google Lighthouse es una herramienta gratuita que ayuda a analizar la calidad de las páginas web. Audita la accesibilidad, el rendimiento y el SEO, además de recomendar cambios para su mejora.

Leer más
Mostrar categorías principales de WooCommerce

Actualmente, el elemento Lista de categorías de Oxygen no puede mostrar solo las categorías principales de WooCommerce. Sin embargo, hay una solución simple que utiliza el elemento Code Block de Oxygen

Leer más