Guía para el scroll infinito en Webflow

Aviso: El scroll infinito puede generar problemas de accesibilidad y usabilidad, así que úsalo bajo tu propio criterio. Si quieres saber más sobre lo que Webflow está haciendo en materia de accesibilidad, echa un vistazo a nuestra entrada del blog aquí.

¡Hola! Somos Jack y Wiggy de Best Buds. Somos mejores amigos en la vida real y usamos Webflow para crear un rincón en internet dedicado a los mejores regalos para mejores amigos. A pesar de nuestra falta total de conocimientos técnicos, Webflow nos permitió construir un sitio increíblemente sólido y rico en contenido que resulta divertido y único.

Cuando lanzamos Best Buds, el scroll infinito era nuestro gran reto. Somos un sitio con mucho contenido en el CMS y nos enfocamos en elementos visuales rápidos. Necesitábamos una forma fluida para que los visitantes navegaran todo lo que quisieran.

Sabíamos que cada vez que un visitante tenía que hacer clic en un botón para pasar a la siguiente página, corríamos el riesgo de perderlo, especialmente los usuarios móviles, acostumbrados al scroll infinito de redes sociales como Instagram.

Tras investigar el excelente framework Infinite Scroll de Metafizzy, logramos que nuestro sitio tuviera scroll en Webflow con solo 17 líneas de código. Este tutorial no podría ser más sencillo: para la mayoría de los sitios en Webflow, es un proceso de copiar y pegar en un solo paso.

Cómo empezar con el scroll infinito

Sin bromas: puedes hacerlo todo en solo dos pasos, ¡y uno de ellos es opcional!

Un par de notas:

1. Como el scroll infinito requiere código personalizado, necesitarás un plan de cuenta de pago para implementarlo en tu sitio.
2. Debido a que depende de código personalizado, solo podrás ver el scroll infinito en tu sitio publicado, no en el Designer.
3. Para que esto funcione, deberás activar la paginación en tu lista de colección.
   

Paso 1: Añadir JavaScript personalizado

Ve a Project Settings > Custom Code, pega el siguiente JavaScript en tu Head Code y guarda los cambios:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script>
<script type="text/javascript">
   $.noConflict();
   jQuery(document).ready(function($) {
       $('.collection-list').infiniteScroll({ // selector para la lista de colección del CMS      
           path: '.w-pagination-next', // selector para la navegación paginada      
           append: '.collection-item', // selector para todos los elementos que recuperarás      
           animate: true,
           loadingText: "",
           maxPage: undefined,
       });
   });

</script>

Ahora, al publicar tu sitio, habrás desbloqueado el poder del scroll infinito. Los nuevos elementos de la colección del CMS se cargarán dinámicamente dondequiera que tengas un elemento de lista de colección paginada. A medida que los visitantes se desplacen y el contenido se cargue, la URL se actualizará mágicamente, permitiéndoles hacer referencia y compartir contenido de una página específica.

A menos que hayas usado nombres de clase personalizados para tus listas de colección y elementos, claro...

Si lo hiciste, aquí te explicamos cómo arreglar tu scroll decididamente finito.

Paso 2 (opcional): Reemplazar las referencias a los nombres de clase

Si cambiaste los nombres de clase generados automáticamente collection-list y collection-item en tu sitio, reemplaza las referencias a esos nombres de clase en el JavaScript anterior (líneas 10 y 12) por tus nombres personalizados.

Ya está. Eso es todo. ¡En serio!

Toques finales: limpiar la estructura de la página y solucionar el problema del pie de página que desaparece

Ahora, vamos a darle brillo. Primero ocultando nuestro elemento de paginación y luego haciendo que nuestro pie de página invisible vuelva a aparecer.

Configuración de la paginación de la lista de colección

En este punto, puedes ocultar el elemento de paginación predeterminado que viene incluido con el resto de tu lista de colección. Busca el elemento de paginación en el Navegador y cambia su propiedad de visualización a none.

Dependiendo de la densidad visual de tu sitio, puedes reducir la cantidad de elementos del CMS que se cargan en cada página y optimizar aún más la velocidad hasta que el visitante vea el contenido principal (o, en lenguaje humano: la velocidad de tu página).

Un consejo: usa Pingdom's Website Speed Test para realizar pruebas de rendimiento de tu sitio de forma rápida y sencilla.

Nosotros decidimos reducir Best Buds de 12 a 9 elementos por página y notamos una pequeña mejora en el rendimiento móvil.