Views Infinite Scroll
Proporciona un plugin de paginador con desplazamiento infinito para Drupal Views, permitiendo la carga continua de contenido mientras los usuarios se desplazan o hacen clic en un botón "Cargar más".
views_infinite_scroll
Install
composer require 'drupal/views_infinite_scroll:^2.0'
composer require 'drupal/views_infinite_scroll:8.x-1.9'
Overview
Views Infinite Scroll es un potente módulo de Drupal que mejora el módulo Views proporcionando un tipo de paginador alternativo que implementa la funcionalidad de desplazamiento infinito. En lugar de la paginación tradicional con páginas numeradas, este módulo permite que el contenido se cargue dinámicamente, ya sea automáticamente cuando los usuarios se desplazan hacia abajo en la página o manualmente cuando hacen clic en un botón personalizable "Cargar más".
El módulo se integra perfectamente con el sistema AJAX de Drupal, añadiendo nuevo contenido a la vista existente sin recargar la página. Soporta varias configuraciones incluyendo texto de botón personalizado con tokens dinámicos, carga automática de contenido al desplazarse, y la capacidad de cargar inicialmente todas las páginas hasta un número de página solicitado para mejor soporte de enlaces profundos.
Views Infinite Scroll funciona con cualquier tipo de visualización de Views incluyendo páginas, bloques y vistas de Entity View Attachment (EVA). Mantiene los contextos de caché adecuados y soporta filtros expuestos de Views mientras proporciona una experiencia de usuario fluida para navegar por grandes colecciones de contenido.
Features
- Plugin de paginador con desplazamiento infinito que reemplaza la paginación estándar de Views con carga continua de contenido
- Modo de botón 'Cargar más' manual con texto de botón personalizable y soporte para tokens dinámicos
- Carga automática de contenido activada por la posición de desplazamiento con umbral configurable (200px desde el fondo)
- Soporte para tokens dinámicos en el texto del botón: @next_page_count (elementos en la siguiente página), @remaining_items_count (total restante), @total (total de elementos)
- Opción de cargar inicialmente todas las páginas para soporte de enlaces profundos (carga todo el contenido hasta el número de página solicitado)
- Adición de contenido mediante AJAX sin recargas de página
- Integración con el sistema AJAX de Views y manejo adecuado del contexto de caché
- Soporte para vistas del módulo Entity View Attachment (EVA)
- Disparador de evento jQuery 'views_infinite_scroll.new_content' para integraciones personalizadas de JavaScript
- Advertencia de validación automática cuando AJAX no está habilitado para vistas que usan el paginador de desplazamiento infinito
Use Cases
Listado de blog o noticias con desplazamiento infinito
Crea una vista de página que muestre artículos o publicaciones de blog con desplazamiento infinito habilitado. A medida que los visitantes se desplazan hacia abajo, más artículos se cargan automáticamente sin recargas de página, proporcionando una experiencia de lectura fluida similar a los feeds de redes sociales. Configura con 'Cargar contenido automáticamente' habilitado y establece items_per_page para controlar los tamaños de lote.
Catálogo de productos con carga manual
Construye un listado de productos de comercio electrónico donde los usuarios hacen clic en 'Cargar más productos' para ver elementos adicionales. Usa el soporte de tokens en el texto del botón como 'Cargar @next_page_count productos más (@remaining_items_count restantes)' para mostrar exactamente cuántos productos se cargarán y cuántos quedan.
Resultados de búsqueda con enlaces profundos
Habilita 'Cargar inicialmente todas las páginas' para páginas de resultados de búsqueda para que cuando los usuarios compartan un enlace a la página 3 de resultados (ej., ?page=2), todos los resultados anteriores se carguen también, dando a los usuarios contexto completo y permitiéndoles desplazarse hacia arriba para ver resultados anteriores.
Galería de imágenes con carga diferida
Crea una vista de galería multimedia con desplazamiento infinito automático. A medida que los usuarios navegan por las imágenes, nuevos lotes se cargan sin interrupciones. Combina con módulos de carga diferida de imágenes para un rendimiento óptimo con grandes colecciones de imágenes.
Paginación de comentarios o hilos de foro
Reemplaza la paginación tradicional de comentarios con desplazamiento infinito para temas de foro o hilos de comentarios extensos. Los usuarios pueden desplazarse continuamente a través de las discusiones sin perder su lugar o esperar cargas de página.
Integración personalizada de JavaScript
Escucha el evento jQuery 'views_infinite_scroll.new_content' para activar JavaScript personalizado cuando se carga nuevo contenido, como inicializar galerías de imágenes, adjuntar manejadores de eventos a nuevos elementos, o activar seguimiento de analíticas para contenido cargado.
Tips
- Siempre habilita 'Usar AJAX' en la configuración Avanzada de la vista cuando uses el paginador de desplazamiento infinito - es necesario para que el módulo funcione
- Usa el token @remaining_items_count en el texto del botón para mostrar a los usuarios cuánto contenido queda, ayudando a establecer expectativas
- Para vistas con muchas páginas, considera habilitar 'Cargar inicialmente todas las páginas' solo si los enlaces profundos son importantes, ya que puede aumentar el tiempo de carga inicial de la página
- El evento jQuery 'views_infinite_scroll.new_content' pasa elementos clonados, permitiendo inspección sin afectar el DOM
- Prueba el comportamiento del desplazamiento infinito en dispositivos móviles donde el rendimiento de desplazamiento y los tamaños de viewport difieren significativamente
- Al solucionar problemas, revisa la pestaña Red del navegador para verificar que se están haciendo solicitudes AJAX para obtener páginas adicionales
- El umbral de desplazamiento de 200px proporciona un buen equilibrio entre precarga y rendimiento; el contenido se carga justo antes de que los usuarios lleguen al fondo
Technical Details
Hooks 4
hook_preprocess_views_infinite_scroll_pager
Preprocesa las variables para la plantilla del paginador de desplazamiento infinito de Views. Calcula el enlace de la siguiente página, establece contextos de caché y configura atributos del paginador incluyendo el atributo de datos de carga automática.
hook_preprocess_views_view
Añade atributos de datos y clases CSS al elemento contenedor de filas de la vista cuando el paginador de desplazamiento infinito está activo. Este contenedor es esencial para que JavaScript identifique dónde añadir nuevo contenido.
hook_preprocess_eva_display_entity_view
Aplica la misma lógica de preprocesamiento que hook_preprocess_views_view para vistas renderizadas a través del módulo contribuido Entity View Attachment (EVA).
hook_form_view_edit_form_alter
Valida que AJAX esté habilitado al editar una vista que usa el paginador de desplazamiento infinito. Muestra un mensaje de advertencia si AJAX está deshabilitado ya que el desplazamiento infinito lo requiere.
Troubleshooting 6
Asegúrate de que AJAX esté habilitado para la visualización de la vista. Navega a la configuración de la vista y habilita 'Usar AJAX' en la configuración Avanzada. El módulo muestra una advertencia si AJAX está deshabilitado cuando se usa el paginador de desplazamiento infinito.
El umbral de desplazamiento está establecido en 200 píxeles desde el fondo del elemento paginador. Si la altura del contenido varía significativamente, considera usar el modo manual 'Cargar más' en su lugar, o implementa JavaScript personalizado para ajustar el umbral.
Instala y usa el módulo EVA (Entity View Attachment) para incrustar vistas en entidades. El módulo tiene soporte específico para vistas EVA a través de hook_preprocess_eva_display_entity_view().
Asegúrate de que el texto del botón contenga tokens en el formato correcto: @next_page_count, @remaining_items_count, o @total. Los tokens distinguen entre mayúsculas y minúsculas y deben incluir el prefijo @.
El nuevo contenido se añade dentro del contenedor .views-infinite-scroll-content-wrapper. Asegúrate de que los selectores CSS apunten a elementos dentro de este contenedor. La clase 'clearfix' se añade automáticamente para manejar diseños basados en float.
Verifica que todas las dependencias de biblioteca se estén cargando correctamente. El módulo requiere las bibliotecas jQuery, Drupal.once, Drupal.debounce y views.ajax del core de Drupal. Comprueba si hay conflictos de JavaScript con otros módulos.