Mostrar imagen y precio en las búsquedas instantáneas de PrestaShop

Mostrar una imagen y el precio junto al nombre del producto puede ayudar al visitante a reconocer lo que busca. La forma de hacerlo depende del tema, módulo de búsqueda y versión de PrestaShop: no existe un fragmento universal que pueda pegarse en todas las tiendas.

Esta página conserva el contexto de los antiguos ejemplos para PrestaShop 1.6 y 1.7, pero sustituye los parches directos por un procedimiento de adaptación comprobable.

Antes de modificar la búsqueda

Identifica el módulo que genera las sugerencias y comprueba si el tema ya ofrece esa presentación. Prepara un clon protegido, conserva una copia y examina la respuesta de búsqueda desde las herramientas de red del navegador.

Comprueba si esa respuesta ya contiene una imagen y un precio formateado para el contexto del visitante. Si existen, adapta la plantilla o extensión del tema. Si faltan, el desarrollador debe ampliarla con las API de la versión instalada y sus reglas de tienda, idioma y permisos.

Prestashop 1.6

El ejemplo histórico modificaba blocksearch.js y classes/Search.php para añadir una imagen de portada y el campo SQL p.price. Este último no representa necesariamente el precio final: puede ignorar impuestos, reducciones, grupo de cliente, moneda o combinación.

Construir una ruta de imagen concatenando dígitos tampoco cubre todos los contextos, imágenes ausentes o configuraciones de medios. No reapliques ese parche sobre una tienda mantenida. Utiliza los mecanismos de generación de enlaces y precios de la aplicación y prepara la migración si dependes de una rama sin soporte.

Prestashop 1.7

El ejemplo anterior modificaba ps_searchbar.js e insertaba datos del producto como HTML. Esa técnica puede romper atributos con comillas o caracteres especiales y tratar texto como código.

En una implementación mantenida, inserta nombres como texto, valida las URL de las imágenes y utiliza los mecanismos de escape de la plantilla. Comprueba que la imagen de portada exista y ofrece una alternativa cuando falte. No presupongas que todas las versiones devuelven product.cover.small.url con la misma estructura.

Versiones y temas actuales

Revisa las opciones del tema y un módulo de búsqueda compatible antes de desarrollar. Evita editar archivos del núcleo o de un módulo distribuido: las actualizaciones pueden sustituirlos. Conserva la personalización en el mecanismo de extensión que admita esa versión.

El precio mostrado debe coincidir con la ficha para la misma tienda, idioma, moneda, grupo de cliente y selección aplicable. No calcules el precio final con un simple parseFloat() ni añadas siempre el símbolo de euro.

Comprobar el resultado

Prueba productos con y sin imagen, ofertas, variantes, nombres con tildes y comillas, distintas monedas y usuarios con precios distintos. Comprueba búsqueda vacía, sin resultados y conexión lenta.

Revisa teclado, foco, lector de pantalla y móvil. Las sugerencias deben llevar al producto correcto sin introducir contenido HTML no confiable. Purga las cachés pertinentes después del cambio y comprueba que la personalización sobrevive a una actualización ensayada en el clon.