Category Wall — Página de categoría visual

Category Wall reemplaza la lista de subcategorías nativa de PrestaShop por un muro de mosaicos con imagen, con contadores de productos y tres diseños a elegir. Esta guía cubre la instalación, la configuración y el uso avanzado del módulo.

Instalación

El módulo se instala como cualquier módulo de PrestaShop, sin dependencias externas ni Composer.

1. Desde el back-office, abre Módulos > Gestor de módulos y haz clic en Subir un módulo (botón arriba a la derecha).
2. Selecciona el archivo dfcategorywall.zip y ejecuta la instalación.
3. Una vez instalado, haz clic en Configurar para acceder a los ajustes.

Cómo funciona la visualización

En cada página de categoría, el módulo muestra automáticamente el muro de subcategorías por encima del listado de productos. Se apoya en el hook displayContentWrapperTop, presente en el tema Classic y en la mayoría de los temas derivados.

Si no existe ninguna subcategoría activa para la categoría consultada, el muro no se muestra: el módulo permanece completamente invisible en las categorías «hoja».

Opciones de configuración

Todas las opciones se ajustan desde la pantalla de configuración del módulo.

Diseño (layout)

Hay tres presentaciones disponibles:

• Cuadrícula — una cuadrícula regular de mosaicos del mismo tamaño, ideal para un resultado limpio y estructurado.
• Mosaico — una disposición dinámica en la que la primera subcategoría ocupa un mosaico ampliado, para atraer la mirada hacia una sección estrella.
• Carrusel — un desplazamiento horizontal fluido, táctil en móvil y con flechas de navegación en escritorio.

Columnas

Ajusta el número de columnas mostradas en escritorio, de 2 a 6. Este valor se aplica a los diseños cuadrícula y carrusel. La visualización pasa automáticamente a 3 y luego a 2 columnas en tableta y móvil.

Contadores de productos

Activa Mostrar los contadores de productos para que aparezca, en cada mosaico, el número de productos de la subcategoría en forma de insignia.

• Contar los productos de forma recursiva — suma los productos de todo el árbol hijo (subcategorías anidadas incluidas), y no solo los productos vinculados directamente.
• Ocultar las subcategorías vacías — retira del muro las subcategorías sin ningún producto visible, para presentar solo secciones realmente surtidas.

Descripción y título

• Mostrar la descripción de las subcategorías — muestra un breve extracto bajo el nombre de cada mosaico (recortado a 120 caracteres).
• Mostrar el título de la sección y Título de la sección — un encabezado personalizable y multiidioma mostrado sobre el muro (por ejemplo «Explorar subcategorías»). Deja el campo vacío para ocultar el título.

Ocultar la lista nativa

La opción Ocultar la lista de subcategorías nativa añade una regla CSS discreta que oculta el bloque de subcategorías por defecto del tema, para evitar cualquier duplicado con el muro. Esta opción no tiene efecto si tu tema no muestra ese bloque.

Mosaicos sin imagen

Cuando una subcategoría no tiene imagen de portada, el módulo genera automáticamente un mosaico de reserva: un degradado de color estable, derivado del identificador de la categoría, con la inicial de su nombre. Así, la cuadrícula siempre se mantiene homogénea, sin celdas vacías.

Uso como widget

Más allá de la página de categoría, el muro puede insertarse en cualquier lugar de una plantilla mediante la interfaz de widget de PrestaShop.

{widget name='dfcategorywall'}

Para apuntar a una categoría concreta, pasa su identificador:

{widget name='dfcategorywall' id_category=12}

Resolución de problemas

El muro no se muestra

• Comprueba que la categoría consultada tiene realmente subcategorías activas.
• Asegúrate de que tu tema dispara el hook displayContentWrapperTop. Si no, usa la inserción por widget descrita arriba.

Las subcategorías aparecen duplicadas

Activa la opción Ocultar la lista de subcategorías nativa para eliminar el bloque original del tema.

Las flechas del carrusel no aparecen

Las flechas solo se muestran cuando hay suficientes mosaicos para desbordar el ancho visible. En móvil, la navegación se hace solo con el dedo (desplazamiento táctil).