Todo lo que querrías saber antes de instalar.
Una mirada detallada a cómo funciona Módulo Carrusel de Marcas PrestaShop 8/9: Logos en Movimiento, Cuadrícula y Muro de Logos, por qué lo construimos así y la lógica detrás de las características anteriores.
8 formas de mostrar sus marcas
El carrusel desplaza de 1 a 3 filas de logos con flechas, puntos y desplazamiento automático. El desplazamiento continuo hace avanzar los logos sin pausa en 1 a 4 filas, con marcas distintas en cada fila y una fila de cada dos en sentido contrario, el efecto que se ve en las secciones «confían en nosotros». El desplazamiento vertical mueve columnas de logos hacia arriba y hacia abajo. La cuadrícula, el muro de logos con líneas finas, el muro rotativo, las etiquetas y el directorio A-Z cubren el resto de usos, desde una columna lateral hasta una página con todas sus marcas.
Las marcas adecuadas, en el orden adecuado
Un bloque puede mostrar todas las marcas activas, una selección que usted ordena arrastrando, las marcas con productos en una categoría y sus subcategorías, o las de la categoría consultada: en la página Calzado solo aparecen marcas de calzado. Un mínimo de productos, 1 por defecto, descarta las marcas cuya página estaría vacía. El orden puede ser por nombre, número de productos, ventas en el periodo que elija, novedad o al azar. El orden aleatorio se calcula en el navegador, de modo que una caché de página completa sigue funcionando.
Logos limpios, incluso sobre fondo de color
PrestaShop guarda los logos de las marcas en JPG con fondo blanco, lo que deja rectángulos blancos sobre una tarjeta gris o una sección oscura. La pestaña Logos de las marcas permite subir una versión transparente en PNG, WebP o SVG de cada logo, que se usa en todos los bloques. Los SVG con scripts, eventos o enlaces externos se rechazan y la carpeta de subida está protegida. En tarjetas claras, la opción Quitar los fondos blancos hace desaparecer el blanco de los JPG sin subir nada. Cada marca puede además enlazar a la página que usted elija en lugar de su página de PrestaShop.
En cualquier lugar de la tienda
Cada bloque elige su hook entre 14 ubicaciones habituales o un hook display escrito a mano, que se registra automáticamente. Puede limitarse a ciertos tipos de página y a ciertos dispositivos. Para un lugar concreto, la etiqueta widget muestra un bloque determinado en cualquier plantilla, el hook displayDfBrandCarousel se llama desde el tema y el shortcode [dfbrandcarousel id="3"] inserta un bloque en una página CMS. Los diseños usan container queries: colocado en una columna lateral, un bloque pasa a su versión compacta sin ningún ajuste adicional.
Un editor con vista previa en directo
El back office lista sus bloques, que puede activar, duplicar y reordenar arrastrando. El editor agrupa los ajustes en 5 pestañas (Contenido, Diseño, Estilo, Animación, Visualización) y muestra al lado una vista previa que se actualiza con cada cambio, en ancho de ordenador, tableta o móvil. Los modos se presentan como tarjetas ilustradas. Un indicador señala los cambios sin guardar y Ctrl+S guarda sin salir del editor. La pestaña Integración ofrece los códigos widget, hook y shortcode de cada bloque, listos para copiar.
Ligero y accesible
El módulo no usa jQuery, ni Swiper, ni ninguna librería cargada desde un CDN. El carrusel se basa en el desplazamiento nativo del navegador y el desplazamiento continuo en la API Web Animations. El CSS y el JS solo se cargan en las páginas donde puede aparecer un bloque. Las animaciones se detienen cuando el bloque sale de la pantalla, un botón de pausa cumple el criterio WCAG 2.2.2 y los visitantes que desactivaron las animaciones ven logos quietos que pueden desplazar a mano. Las copias usadas para el bucle del desplazamiento se ocultan a los lectores de pantalla y quedan fuera de la navegación con teclado.
No hay valoraciones aún.