Scroll Infinito PrestaShop — Guía de instalación y configuración
Instalar y configurar el scroll infinito: modos de carga, paginación que preserva el SEO, restauración de la posición exacta y temas personalizados.
Instalación
Scroll Infinito PrestaShop se instala como cualquier otro módulo de PrestaShop, sin dependencias ni bibliotecas de terceros.
- En el back-office, abre Módulos > Gestor de módulos y haz clic en Subir un módulo.
- Selecciona el archivo
dfinfinitescroll-1.0.0.zipproporcionado y ejecuta la instalación. - Una vez instalado, haz clic en Configurar para acceder a los ajustes.
El módulo no añade ninguna tabla en la base de datos ni aplica ningún override. La desinstalación no deja rastro.
Los tres modos de carga
El comportamiento de carga se elige en el ajuste Modo de carga.
Híbrido (recomendado)
Las primeras páginas se cargan automáticamente al hacer scroll, y luego toma el relevo un botón «Cargar más productos» una vez alcanzado el umbral. Es el mejor equilibrio: la experiencia sigue siendo fluida en la parte superior de la lista, pero el visitante mantiene el control y el pie de página vuelve a ser accesible.
Infinito puro
Todas las páginas siguientes se cargan automáticamente al acercarse el final de la lista, sin botón. Reservado a catálogos donde el acceso al pie de página no es crítico.
Solo botón
Sin carga automática: el visitante hace clic en «Cargar más» en cada página. Útil para limitar el número de peticiones o mantener una paginación muy explícita.
Ajustes disponibles
- Modo de carga — híbrido, infinito puro o solo botón.
- Páginas cargadas automáticamente (híbrido) — número de páginas cargadas antes de que aparezca el botón. Por defecto: 3.
- Sincronizar la URL y el canonical — actualiza la barra de direcciones, la etiqueta canonical y los enlaces rel prev/next al hacer scroll.
- Restaurar la posición exacta — reinyecta las páginas ya vistas y recoloca la vista en el producto visitado al volver de una ficha.
- Activar en todas las páginas de listado — categorías, fabricantes, proveedores, búsqueda, más vendidos, novedades, ofertas. Desactivado, el módulo se aplica solo a las categorías.
- Etiqueta del botón — texto multilingüe del botón «Cargar más».
- Selector de la lista de productos (avanzado) y Selector de la paginación (avanzado) — consulta la sección de temas personalizados.
La paginación sigue siendo compatible con el SEO
A diferencia de los módulos que sustituyen la paginación por una llamada AJAX invisible, Scroll Infinito PrestaShop se apoya en las URL paginadas nativas de tu tema. En concreto:
- Sin JavaScript (bots incluidos), la tienda muestra exactamente tu paginación de servidor habitual, totalmente rastreable.
- Con JavaScript, la etiqueta canonical y los enlaces rel prev/next se actualizan para reflejar la página realmente mostrada en pantalla, en ambos sentidos del scroll.
Deja activada la opción «Sincronizar la URL y el canonical»: es la que garantiza que la URL compartida por un visitante que ha llegado a la página 4 apunte realmente a esa página.
La restauración de la posición exacta
Es el corazón del módulo. Cuando un visitante hace clic en un producto tras hacer scroll, el módulo guarda en el almacenamiento de sesión: las páginas cargadas, la URL exacta de cada una, la posición de scroll y el ID del producto pulsado. También almacena en caché el contenido de las páginas, con un límite de tamaño.
Al volver (botón atrás del navegador o navegación interna desde la ficha), el módulo:
- reinyecta al instante las páginas desde la caché, o las vuelve a descargar en paralelo si la caché era demasiado grande;
- recoloca la vista con precisión en el producto visitado, mediante su ID, con respaldo en la posición de scroll.
El estado de restauración expira tras 30 minutos y nunca se aplica en una visita directa a una URL de tipo página 3: en ese caso, la página se comporta con normalidad.
Temas personalizados: selectores avanzados
Por defecto, el módulo apunta a los selectores del tema classic: #js-product-list .products para la lista de productos y .pagination para el bloque de paginación. Si tu tema usa una estructura distinta, rellena los dos campos avanzados:
- Selector de la lista de productos — el contenedor directo de las tarjetas de producto.
- Selector de la paginación — el bloque que contiene el enlace «siguiente» (rel next o clase next).
No hace falta modificar ningún código. El módulo vuelve a asociar los comportamientos de los productos inyectados mediante eventos de aplicación, lo que permite a tu tema o a otros módulos recablear sus widgets en las nuevas tarjetas.
Compatibilidad con la navegación por facetas
El módulo es compatible con el módulo de navegación por facetas. Escucha el evento de actualización de la lista de productos que se dispara en cada cambio de filtro, se reinicializa limpiamente y reanuda a partir de las URL paginadas filtradas. No se requiere ningún ajuste adicional.
Resolución de problemas
El scroll infinito no se activa
Comprueba que los selectores avanzados coinciden con tu tema y que hay una paginación nativa (con un enlace «siguiente») en la página de listado.
El regreso no se recoloca en el producto correcto
Asegúrate de que las tarjetas de producto de tu tema exponen el atributo de ID de producto. En un tema muy personalizado que no lo exponga, el módulo recurre a la posición de scroll.
En caso de fallo de red
El módulo recurre automáticamente a los enlaces de paginación nativos: la navegación siempre sigue siendo posible.