La paginación nativa de Webflow recarga la página y devuelve a los visitantes al inicio. Este es el truco de Webflow que más usamos para solucionarlo, con una o varias listas de colección.
ACTUALIZADO DE NUEVO (18.02.2022): aunque el método de abajo sigue funcionando perfectamente, también puedes usar el método con Finsweet Attributes. Es muy sencillo: una línea de código en el head de la página o del proyecto y luego solo tienes que añadir unos cuantos atributos a los elementos que quieres paginar. Nos gusta porque es simple y rápido (en cuanto a los tiempos de carga de la paginación). Como pequeño estudio de Webflow, los expertos de Finsweet nos han hecho un regalo. Encontrarás las instrucciones en la documentación de List Load de Finsweet. Añade el primer conjunto de atributos obligatorios, te recomendamos añadir también la opción Speed Boost (hoy en día está en el elemento de paginación como Show Page Count) y después baja hasta la opción de paginación y añade esos atributos. Para una implementación rápida, el método de abajo probablemente es más veloz, pero dejamos que lo decidas tú.
ACTUALIZADO PARA LA PAGINACIÓN DE VARIAS LISTAS DE COLECCIÓN: esto va a ser muy rápido y fácil, así que vamos a darle a tu colección de Webflow una paginación fluida.
Por si no sabes qué es la paginación fluida: básicamente, cuando hoy usas listas de colección en Webflow, el usuario hace clic en siguiente, la página se recarga y acaba arriba del todo, lo cual no es nada agradable cuando tu colección de entradas del blog o lo que sea está a mitad de la página. Con este truco, cuando el usuario pasa a la siguiente 'página' no salta al inicio, sino que se queda justo donde estaba. Genial, ¿verdad? Y bastante sencillo.
Paso 1: añade un poquito de código a tu página
Abre los ajustes de la página (Page Settings), baja hasta Custom Code y pega el fragmento de abajo en la sección Before the <!-- fs-richtext-ignore --></body> tag:
<iframe height="300" style="width: 100%;" scrolling="no" title="Webflow Seamless Pagination - Single Collection List" src="https://codepen.io/milkmoonstudio/embed/PoBXKjg?default-tab=html&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/milkmoonstudio/pen/PoBXKjg">
Webflow Seamless Pagination - Single Collection List</a> by Jakes van Eeden (<a href="https://codepen.io/milkmoonstudio">@milkmoonstudio</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
Si prefieres mantener tu código personalizado un poco más ordenado, pega simplemente nuestra etiqueta script:
<iframe height="300" style="width: 100%;" scrolling="no" title="Seemless Pagination - JSDeliver Script Tag - Async" src="https://codepen.io/milkmoonstudio/embed/NWoKwMa?default-tab=html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/milkmoonstudio/pen/NWoKwMa">
Seemless Pagination - JSDeliver Script Tag - Async</a> by Jakes van Eeden (<a href="https://codepen.io/milkmoonstudio">@milkmoonstudio</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
<!-- fs-richtext-ignore --><script async src="https://cdn.jsdelivr.net/gh/J8kesVanEeden/milk-moon-studio_webflow-projects@main/seemless-pagination.js"></script>
Si las inserciones de arriba no te cargan, el código está en nuestros pens de CodePen: la versión para una sola lista de colección, la versión con etiqueta script y la versión para varias listas de colección.
Ahora, en el Designer, si pegaste el código en línea, haz clic en la Collection List, cambia al panel Collections List Settings de la derecha y pega "seamless-replace" en ID. Si usaste la etiqueta script, sáltate eso y usa los IDs numerados del siguiente párrafo.
Si optaste por la etiqueta script, hay una cosa a tener en cuenta: solo busca IDs numerados. Así que, en lugar de "seamless-replace", dale a la Collection List el ID seamless-replace1 y dale al elemento de paginación que está dentro de su Collection List Wrapper el ID w-pagination-wrapper1. Admite hasta tres listas de colección en una página (seamless-replace2 y w-pagination-wrapper2 para la segunda, seamless-replace3 y w-pagination-wrapper3 para la tercera), y para más de tres hay que ampliar el script.
Publica y ya tienes paginación fluida.
Si tienes alguna pregunta, cuéntanosla en los comentarios y no te olvides de visitar la sección How-To de nuestro blog para ver más tutoriales.
ACTUALIZACIÓN
Nos han llegado preguntas sobre qué hacer cuando hay más de una lista de colección que necesita paginarse. Aquí tienes código para ver cómo proceder si, por ejemplo, tienes 3 listas de colección que paginar y están en secciones distintas de la misma página.
El código:
<iframe height="300" style="width: 100%;" scrolling="no" title="Webflow Seamless Pagination - Multiple Collection Lists" src="https://codepen.io/milkmoonstudio/embed/ZEjVJXB?default-tab=html&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/milkmoonstudio/pen/ZEjVJXB">
Webflow Seamless Pagination - Multiple Collection Lists</a> by Jakes van Eeden (<a href="https://codepen.io/milkmoonstudio">@milkmoonstudio</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
Los IDs
- Ahora pon los IDs en orden de aparición para los contenedores de la lista de colección: seamless-replace1, seamless-replace2, seamless-replace3
- Luego pon los IDs en orden de aparición para el ID de paginación dentro del Collection List Wrapper con w-pagination-wrapper1, w-pagination-wrapper2, w-pagination-wrapper3
Y listo: publica y podrás paginar varias listas de colección en la misma página.
Preguntas sobre la paginación de Webflow
¿Por qué la paginación de Webflow vuelve al inicio de la página?
Porque la paginación nativa de Webflow carga la página siguiente como una recarga completa, así que el navegador empieza de nuevo desde arriba. Si tu lista de colección está a mitad de la página, la experiencia es pésima. El script de paginación fluida de arriba carga la página siguiente en segundo plano y reemplaza solo la lista de colección, de modo que el visitante se queda justo donde estaba.
¿Puedo paginar más de una lista de colección en la misma página?
Sí. Usa el código para varias listas de colección de la sección ACTUALIZACIÓN, dale a cada lista su propio ID (seamless-replace1, seamless-replace2, seamless-replace3) y dale a cada contenedor de paginación su ID correspondiente (w-pagination-wrapper1, w-pagination-wrapper2, w-pagination-wrapper3).
¿Hay otra forma de paginar una lista de colección de Webflow sin recargar la página?
Sí, el atributo List Load de Finsweet. Su modo de paginación muestra el contenido en la misma página y puedes añadir un ancla de scroll para que el visitante aterrice al inicio de la lista. La configuración se explica al principio de esta entrada.
¿Por qué no me funciona la paginación fluida?
Comprueba que los IDs estén escritos exactamente como arriba (si usas la versión con etiqueta script, eso significa los IDs numerados, seamless-replace1 y w-pagination-wrapper1, y solo llega hasta tres listas), que el script esté en la sección Before </body> tag de la página y que hayas publicado el sitio, porque el código personalizado no se ejecuta en el Designer. Si usas interacciones de Webflow en la lista, puede que haya que reinicializarlas tras cada cambio de página. Según nuestra experiencia, el script alojado tiene una línea comentada cerca del final precisamente para eso, así que si pegaste el código en línea, búscala y quítale el comentario. La versión con etiqueta script es un archivo alojado que no puedes editar, así que para activar esa línea tendrías que copiar el código en línea.
Si te gustan los trucos de CMS como este, también hemos escrito sobre cómo añadir spans de texto en el texto dinámico del CMS, cómo romper la cuadrícula del CMS con un patrón flexbox, cómo crear un resumen del blog sin un campo de resumen y cómo construir una cinta de ticker con CMS.
