Módulo Barra de Navegación Móvil PrestaShop (dfmobilenav)

Presentación

DF Mobile Nav añade a su tienda PrestaShop una barra de pestañas fija en la parte inferior de la pantalla, siguiendo el modelo de las aplicaciones móviles nativas: inicio, búsqueda, carrito, favoritos y cuenta, con insignias de contador actualizadas en tiempo real.

La barra solo aparece por debajo de un punto de ruptura que usted define (768 px por defecto). En ordenador queda totalmente oculta y no añade ningún espacio a la página.

Instalación

1. Desde el back-office, abra Módulos → Gestor de módulos y haga clic en Subir un módulo.
2. Suba el archivo dfmobilenav-1.0.0.zip.
3. Haga clic en Configurar una vez finalizada la instalación.

El módulo registra automáticamente los hooks necesarios (actionFrontControllerSetMedia y displayBeforeBodyClosingTag). No se requiere ninguna modificación de su tema.

Configuración

Selección de pestañas

Hay cinco pestañas disponibles y cada una se activa o desactiva de forma independiente:

• Inicio — enlace a la página de inicio de la tienda.
• Búsqueda — abre un campo de búsqueda a pantalla completa o redirige a la página de búsqueda (véase más abajo).
• Carrito — enlace al carrito, con insignia del número de artículos.
• Favoritos — enlace a la lista de deseos, con insignia del número de productos guardados.
• Cuenta — enlace al área de cliente.

Si no se activa ninguna pestaña, la barra no se renderiza en absoluto.

Comportamiento de la búsqueda

Se ofrecen dos modos:

• Búsqueda a pantalla completa (por defecto) — un campo de entrada se abre sobre la página actual, sin abandonarla. Se cierra con el botón o con la tecla Escape.
• Redirección a la página de búsqueda — la pestaña se comporta como un enlace clásico a la página de búsqueda nativa.

Ocultación al desplazarse

Cuando esta opción está activada, la barra se retira cuando el visitante se desplaza hacia abajo y reaparece en cuanto vuelve a subir. El comportamiento respeta la preferencia de movimiento reducido del sistema.

Punto de ruptura móvil

Anchura máxima, en píxeles, por debajo de la cual se muestra la barra. El valor por defecto es 768 px. Los valores aceptados van de 320 a 1600 px; cualquier valor fuera de ese rango vuelve a 768.

Colores

Se pueden configurar cuatro colores en formato hexadecimal:

• Color de fondo de la barra (blanco por defecto).
• Color de iconos y etiquetas en reposo (gris por defecto).
• Color de la pestaña activa (negro tinta por defecto).
• Color de las insignias de contador (rojo por defecto).

Insignias de contador

Carrito

La insignia muestra el número de artículos presentes en el carrito del visitante. Se actualiza en tiempo real en cada añadido, sin recargar la página, respondiendo al evento updateCart de PrestaShop. Por encima de 99 artículos, la insignia muestra «99+».

Favoritos

La insignia de favoritos se apoya en el módulo nativo de lista de deseos (blockwishlist) y muestra el número de productos guardados por el cliente conectado. Se actualiza tras cualquier interacción con los botones de la lista de deseos.

Si el módulo de lista de deseos está desactivado en su tienda, la pestaña Favoritos se oculta automáticamente, sea cual sea la configuración: no hay nada que hacer por su parte.

El contador de favoritos solo se muestra a los clientes conectados, ya que la lista de deseos nativa está vinculada a la cuenta de cliente.

Pestaña activa

La pestaña correspondiente a la página actual se resalta automáticamente y lleva el atributo de accesibilidad de página actual. La detección abarca el inicio, la búsqueda, el carrito y el proceso de compra, el área de cliente y sus subpáginas (identidad, direcciones, historial, facturas de abono, vales de descuento), así como la lista de deseos.

Compatibilidad móvil

• Área segura iOS — la barra respeta el área segura inferior de los iPhone recientes y nunca se solapa con la barra de inicio.
• Zoom de Safari — el campo de búsqueda está dimensionado para impedir el zoom automático de Safari al enfocar.
• Espacio al pie de página — se añade automáticamente un espacio equivalente a la altura de la barra al final del documento para que no se oculte ningún contenido.

Accesibilidad

Las pestañas son enlaces nativos, accesibles por teclado, con un anillo de foco visible. La pestaña de la página actual se anuncia a las tecnologías de asistencia. Los iconos están marcados como decorativos y la etiqueta de texto porta la información. La animación de ocultación al desplazarse se desactiva si el visitante ha solicitado una reducción de las animaciones en su sistema.

Rendimiento

El módulo no carga ninguna fuente de iconos, ninguna imagen ni ninguna biblioteca JavaScript. Los iconos son SVG de trazo renderizados directamente en la página, el script está escrito en JavaScript nativo y pesa unos pocos kilobytes. La actualización de los contadores se realiza mediante una llamada ligera que devuelve únicamente dos números.

Preguntas frecuentes

¿El módulo modifica los archivos de mi tema?

No. Se integra mediante los hooks estándar de PrestaShop, sin sobrecarga ni override de plantillas. La barra tiene su propio estilo, autónomo e independiente de su hoja de estilos.

¿La barra entra en conflicto con un botón de chat o de volver arriba?

La barra se sitúa en la parte inferior de la pantalla con un nivel de apilamiento moderado. Si otro elemento flotante se superpone, despláceelo hacia arriba unos 60 píxeles mediante el CSS de su tema.

¿Puedo mostrar la barra en tabletas?

Sí: aumente el punto de ruptura, por ejemplo a 1024 px, para cubrir también las tabletas en modo vertical.

¿Es compatible con multitienda?

Sí. Los ajustes se guardan en la configuración de PrestaShop y respetan el contexto de tienda.

¿Es compatible con PrestaShop 9?

Sí. El módulo está diseñado y validado desde PrestaShop 8.0 hasta 9.x.

Registro de versiones

1.0.0 — 12 de julio de 2026

• Barra de pestañas fija en la parte inferior con cinco pestañas activables.
• Insignias de contador en directo en el carrito y los favoritos.
• Búsqueda a pantalla completa o redirección, a elegir.
• Ocultación de la barra al desplazarse hacia abajo.
• Resaltado automático de la pestaña de la página actual.
• Personalización completa de colores y punto de ruptura.
• Compatibilidad con el área segura de iOS.
• Traducciones ES, FR, EN, DE, IT.