Todo lo que querrías saber antes de instalar.
Una mirada detallada a cómo funciona Módulo Carrusel de Categorías PrestaShop 8/9: Categorías en la Página de Inicio, por qué lo construimos así y la lógica detrás de las características anteriores.
Un escaparate de categorías configurable, no un bloque fijo
El bloque de categorías nativo de PrestaShop muestra una lista de enlaces o miniaturas en el formato que impone el tema. Aquí, cada escaparate se configura en un formulario por pestañas: disposición, número de filas, columnas en ordenador, tableta y móvil, espaciado, ancho del contenedor, fondo de la sección. Elige las categorías a mano y las ordena arrastrando y soltando, o deja que el módulo muestre las subcategorías de una sección, con un límite. Al instalar se crea un escaparate de demostración en la página de inicio para ver el resultado de inmediato.
Imagen, nombre y texto personalizados para cada categoría
Una categoría suele llamarse «Ropa de mujer» en el catálogo cuando en la portada se quiere mostrar «Nueva colección». Por eso cada categoría añadida a un escaparate acepta un nombre personalizado, una descripción corta, una imagen propia y una imagen móvil con un encuadre más ajustado, una insignia, un texto de botón y un enlace a un listado filtrado o a una landing page. Sin personalización, el módulo usa la imagen y el nombre de la categoría. Para la imagen, elige automáticamente el formato de PrestaShop más nítido disponible, ya que el formato category_default de PrestaShop 8 solo mide 141 x 180 px.
Carrusel, cuadrícula o mosaico, en 1 a 3 filas
El carrusel desplaza 1, 2 o 3 filas a la vez, con flechas, puntos, bucle y reproducción automática opcional. En móvil deja ver una parte de la tarjeta siguiente para indicar que la fila se puede deslizar. La cuadrícula coloca las categorías en columnas regulares, con un límite de filas opcional. El mosaico ofrece tres estilos: alturas de imagen naturales, alturas alternas o primera categoría destacada en 2 x 2. Cuando una fila tiene menos categorías que columnas, se alinea con el título en lugar de quedarse pegada a la izquierda.
5 preajustes para empezar, 81 opciones para terminar
El preajuste «Círculos» ofrece en un clic imágenes redondas estilo stories de Instagram, 6 por fila en ordenador. «Superpuesto» coloca el texto sobre la imagen con un degradado, «Banners» muestra 2 mosaicos grandes con los nombres en mayúsculas y «Tarjetas» presenta cada categoría en una tarjeta blanca con descripción y enlace. El preajuste rellena las opciones de diseño al guardar y después todo sigue siendo editable: colores, tamaños, redondeos, bordes, sombras, 6 efectos al pasar el ratón, posición del texto, estilo del botón y de la insignia. Un campo de CSS personalizado, limitado al identificador del escaparate, cubre los últimos detalles.
En la página de inicio, en las páginas de categoría o en cualquier lugar
Cada escaparate elige su hook en una lista o en un campo libre: un nombre de hook desconocido se crea y se registra automáticamente, y el módulo se retira de los hooks que ya no se usan. La fuente «categoría que se está viendo» muestra en cada página de categoría sus propias subcategorías, con un solo escaparate para todo el catálogo. El hook displayDfCategoryShowcase y la etiqueta widget permiten colocar un escaparate concreto en cualquier plantilla. Las fechas de inicio y fin y la restricción por grupo de clientes sirven para campañas de temporada y selecciones B2B.
Rápido y accesible
El carrusel usa el desplazamiento nativo del navegador (CSS scroll-snap), controlado por unos 3 KB de JavaScript comprimido, sin jQuery. Las imágenes subidas se generan en 480 y 960 px y se sirven con srcset y sizes calculados según sus columnas. La primera imagen se carga de inmediato y las siguientes en diferido, con atributos width y height. El resultado se guarda en la caché de Smarty y se vacía solo cuando cambia una categoría o un producto. En accesibilidad: la sección se etiqueta con su título, los botones y los puntos se anuncian a los lectores de pantalla, la navegación con teclado tiene un foco visible, la reproducción automática se detiene al enfocar y se respeta prefers-reduced-motion.
No hay valoraciones aún.