Product Carousel Pro — Carruseles de Productos Ilimitados (dfproductcarousel)

Product Carousel Pro crea carruseles de productos ilimitados en cualquier parte de su tienda PrestaShop: más vendidos, novedades, ofertas, productos de una categoría o una selección manual ordenada a mano, mostrados en seis hooks estándar o en sus propios hooks personalizados creados al vuelo. La particularidad del módulo: las fichas de producto se renderizan con la plantilla de miniatura de su tema activo, vía ProductAssembler y ProductPresenter. Precios, etiquetas, vista rápida y añadir al carrito funcionan exactamente igual que en sus páginas de categoría.

Instalación

1. En su back-office de PrestaShop, abra Módulos > Gestor de módulos.
2. Haga clic en Subir un módulo y suelte el archivo dfproductcarousel.zip.
3. Aparece una pestaña Product Carousel Pro bajo el menú Módulos: ahí sucede todo (el botón Configurar del módulo también redirige allí).

El módulo crea tres tablas (carruseles, títulos multilingües, asociación de tiendas) y registra seis hooks de visualización más actionFrontControllerSetMedia para sus assets. Los hooks personalizados que cree después se registran automáticamente al guardar el carrusel correspondiente.

Crear un carrusel

Desde la lista, haga clic en Añadir un carrusel. El formulario está organizado en cinco bloques: Contenido, Ubicación, Maquetación, Estilo y Comportamiento.

• Nombre interno: visible solo en el back-office, para orientarse en la lista.
• Título y subtítulo: multilingües, mostrados encima del carrusel. Deje el título vacío para no mostrar cabecera.

La lista de carruseles ofrece después activación en un clic, duplicación (la copia se crea desactivada) y acciones masivas de eliminación.

Fuentes de productos

Cada carrusel elige su fuente entre seis:

• Más vendidos: los productos más vendidos de la tienda.
• Novedades: los productos marcados como nuevos (el plazo es su ajuste de PrestaShop «Número de días durante los cuales el producto se considera nuevo»).
• Ofertas: los productos con un descuento vigente.
• Productos de una categoría: elija la categoría en el árbol de selección, los productos siguen el orden de la categoría.
• Categoría de inicio: los productos de la categoría raíz de la tienda, el equivalente de los «productos destacados» nativos.
• Selección manual: usted elige los productos uno a uno.

El campo Número máximo de productos limita cuántos productos se cargan, sea cual sea la fuente.

La selección manual

Escriba al menos dos caracteres en el campo de búsqueda: el autocompletado encuentra sus productos por nombre o referencia. Cada producto clicado se añade a la lista inferior, con su asa de arrastre: reordene arrastrando y soltando, y el front-office muestra los productos exactamente en ese orden. Los productos desactivados u ocultos en el catálogo se filtran automáticamente al mostrarse, sin romper el carrusel.

Elegir la ubicación

Hooks estándar

Seis hooks se proponen en el desplegable:

• displayHome: página de inicio;
• displayContentWrapperTop y displayContentWrapperBottom: encima y debajo del contenido principal, en la mayoría de las páginas;
• displayFooterBefore: justo antes del pie de página;
• displayFooterProduct: parte baja de la ficha de producto, el lugar clásico del cross-selling;
• displayShoppingCartFooter: bajo el resumen del carrito.

Varios carruseles pueden compartir el mismo hook: se apilan según su campo Posición.

Hooks personalizados

Seleccione Hook personalizado en el desplegable y escriba un nombre en el campo que aparece, por ejemplo MiCarrusel. Al guardar, el módulo limpia el nombre (solo letras y cifras), le antepone display si hace falta (displayMiCarrusel), lo registra en PrestaShop y se pone a la escucha. Coloque después la llamada en la plantilla que quiera:

{hook h='displayMiCarrusel'}

El hook creado se incorpora al desplegable para los siguientes carruseles. Puede crear tantos hooks como necesite.

Sintaxis widget

Para mostrar un carrusel concreto independientemente de su hook, use la sintaxis widget con el identificador visible en la primera columna de la lista:

{widget name='dfproductcarousel' carousel=3}

Práctico en una página CMS o una plantilla a medida. El carrusel debe estar activo para mostrarse.

Maquetación

• Productos por fila: tres valores independientes, de 1 a 8, para escritorio (992 px o más), tablet (768 a 991 px) y móvil (menos de 768 px). La configuración clásica es 4 / 3 / 1.
• Modo de desplazamiento: «Un producto a la vez» avanza una ficha por clic, «Fila completa» avanza una página entera.
• Espaciado: la distancia en píxeles entre fichas (20 px por defecto).
• Ancho completo: el carrusel sale de su contenedor para ocupar todo el ancho de la pantalla, muy vistoso en la página de inicio combinado con el skin Sección oscura.

Estilo

Los cinco skins

• Clásico: las fichas de producto del tema estrictamente intactas. La opción por defecto y la más segura.
• Minimal: elimina sombras y bordes para un acabado plano.
• Tarjeta: sombra, esquinas redondeadas y ligera elevación al pasar el ratón.
• Contorno: un borde fino alrededor de cada ficha, que toma el color de acento al pasar el ratón.
• Sección oscura: coloca todo el carrusel sobre un fondo oscuro, con título y paginación adaptados.

Ajustes complementarios

• Alineación del título: izquierda, centro o derecha, el subrayado de acento la sigue.
• Color de acento: usado en las flechas al pasar el ratón, la paginación activa y el subrayado del título. Déjelo vacío para heredar el color principal de su tema.
• Flechas: visibles u ocultas, en tres estilos (círculo, cuadrado, minimal sin fondo).
• Paginación: puntos o barras, generada automáticamente según el número de páginas.

Comportamiento

• Autoplay: desplazamiento automático con retardo configurable (5 000 ms por defecto, 1 000 ms mínimo). La reproducción se pausa cuando la pestaña del navegador está oculta.
• Pausa al pasar el ratón: suspende el autoplay mientras el cursor está sobre el carrusel.
• Bucle infinito: el carrusel vuelve al principio sin salto, gracias al clonado transparente de los extremos. Sin esta opción, las flechas se desactivan en los extremos.

Sea cual sea el ajuste, el carrusel se maneja con el dedo (swipe táctil y de ratón, con protección contra clics accidentales al final del gesto), con el teclado (flechas izquierda y derecha cuando el carrusel tiene el foco), y respeta el sentido de lectura RTL así como la preferencia del sistema prefers-reduced-motion.

Renderizado nativo del tema: cómo funciona

• Los productos se ensamblan y presentan con ProductAssembler y ProductPresenter, los mecanismos que el propio PrestaShop usa para sus listados.
• Cada ficha se renderiza después con la plantilla catalog/_partials/miniatures/product.tpl de su tema activo: precios, descuentos, etiquetas, vista rápida y añadir al carrito son los del tema, sin adaptación alguna.
• El módulo nunca escribe en los archivos del tema: carga su propia hoja de estilos para la mecánica del carrusel, después del CSS del tema.
• Un producto con error se omite silenciosamente en lugar de romper todo el carrusel.

Multitienda

Cada carrusel se asocia a las tiendas del contexto en el momento de guardarse. Para crear un carrusel para una tienda concreta, sitúese en su contexto con el selector multitienda antes de crearlo. Un carrusel guardado en el contexto «Todas las tiendas» se muestra en todas partes.

Solución de problemas

• El carrusel no aparece: compruebe en orden que el carrusel está activo, que su fuente devuelve al menos un producto (una categoría vacía o una selección manual de productos desactivados producen un carrusel mudo), que el hook elegido existe en la página visitada, y vacíe la caché de PrestaShop (Parámetros avanzados > Rendimiento).
• El hook personalizado no muestra nada: el nombre en {hook h='...'} debe coincidir exactamente con el nombre registrado, prefijo display incluido, visible en la columna Hook de la lista. Tras añadir la llamada a una plantilla, vacíe la caché de Smarty.
• Las flechas no aparecen: se ocultan automáticamente cuando todos los productos caben en una sola fila. Añada productos o reduzca el número de columnas.
• El skin Tarjeta o Contorno se ve mal con mi tema: algunos temas ya aplican sombras y bordes a sus miniaturas. Vuelva al skin Clásico, que no toca nada, o Minimal, que neutraliza los efectos del tema.
• Dos carruseles en orden incorrecto en un mismo hook: ajuste su campo Posición, la visualización sigue el orden ascendente.
• La búsqueda de productos no sugiere nada: la búsqueda arranca con dos caracteres y consulta nombres y referencias del idioma en edición.

Desinstalación

La desinstalación elimina las tres tablas, la pestaña de back-office y los hooks registrados. Su tema y sus plantillas quedan intactos; solo las llamadas {hook h='...'} que usted añadió manualmente a sus plantillas deben retirarse a mano (un hook sin módulo a la escucha simplemente no muestra nada y no produce ningún error).