Mostrar imagen y precio en las búsquedas instantáneas de PrestaShop 1.6, 1.7, 8 y 9

El buscador de PrestaShop sugiere productos mientras escribes. Según la versión, solo muestra el nombre o el nombre y una miniatura. Añadir la imagen y el precio ayuda al cliente a reconocer el producto antes de entrar en él. Aquí tienes el código para cada versión.

PrestaShop 1.7, 8 y 9

Las sugerencias las pinta el módulo ps_searchbar con el fichero modules/ps_searchbar/ps_searchbar.js. Los datos que recibe ya incluyen la imagen de portada y el precio final formateado (con impuestos, descuentos y moneda del cliente): solo hay que mostrarlos.

No edites el fichero del módulo, porque se sobrescribe al actualizarlo. Cópialo a tu tema, que tiene prioridad:

modules/ps_searchbar/ps_searchbar.js  →  themes/TU_TEMA/modules/ps_searchbar/ps_searchbar.js

Crea las carpetas modules/ps_searchbar dentro de tu tema si no existen. Después edita la copia.

Versiones recientes del módulo (ya muestran la imagen)

Si en tu copia la función _renderItem tiene una variable $img, el módulo ya muestra la miniatura. Busca:

return $("<li>")
    .append($("<a>")
        .append($img)
        .append($("<span>").html(product.name).addClass("product"))
    ).appendTo(ul)
;

Y añade el precio:

return $("<li>")
    .append($("<a>")
        .append($img)
        .append($("<span>").html(product.name).addClass("product"))
        .append($("<span>").text(' - ').addClass("separator"))
        .append($("<span>").text(product.price).addClass("price"))
    ).appendTo(ul)
;

Versiones antiguas del módulo (solo categoría y nombre)

Si tu copia tiene este código:

return $("<li>")
    .append($("<a>")
        .append($("<span>").html(product.category_name).addClass("category"))
        .append($("<span>").html(' > ').addClass("separator"))
        .append($("<span>").html(product.name).addClass("product"))
    ).appendTo(ul)
;

Sustitúyelo por:

var $img = product.cover
    ? $('<img class="autocomplete-thumbnail">').attr({src: product.cover.small.url, alt: ''})
    : '';

return $("<li>")
    .append($("<a>")
        .append($img)
        .append($("<span>").html(product.category_name).addClass("category"))
        .append($("<span>").text(' > ').addClass("separator"))
        .append($("<span>").html(product.name).addClass("product"))
        .append($("<span>").text(' - ').addClass("separator"))
        .append($("<span>").text(product.price).addClass("price"))
    ).appendTo(ul)
;

La imagen se crea con .attr() para que un nombre de producto con comillas no rompa la etiqueta, y si el producto no tiene imagen no se muestra nada.

Para que surta efecto, vacía la caché en Parámetros avanzados > Rendimiento > Borrar caché. Si tienes activada la opción Caché inteligente para JavaScript en esa misma página, bórrala igualmente para que regenere el fichero combinado.

Puedes ajustar el aspecto desde el CSS de tu tema, por ejemplo:

.searchbar-autocomplete .autocomplete-thumbnail { width: 40px; height: auto; margin-right: 8px; vertical-align: middle; }
.searchbar-autocomplete .price { font-weight: bold; }

PrestaShop 1.6

En la 1.6 hay que hacer dos cambios: que la búsqueda devuelva la imagen y el precio, y que el JavaScript del buscador los muestre.

1. Añadir imagen y precio a los resultados

En vez de editar classes/Search.php, crea el fichero override/classes/Search.php con este contenido. Así el cambio no se pierde al actualizar PrestaShop:

<?php

class Search extends SearchCore
{
    public static function find($id_lang, $expr, $page_number = 1, $page_size = 1, $order_by = 'position',
        $order_way = 'desc', $ajax = false, $use_cookie = true, Context $context = null)
    {
        $results = parent::find($id_lang, $expr, $page_number, $page_size, $order_by, $order_way, $ajax, $use_cookie, $context);

        if ($ajax && is_array($results)) {
            $context = $context ? $context : Context::getContext();

            foreach ($results as &$product) {
                $id_product = (int) $product['id_product'];
                $cover = Product::getCover($id_product);

                $product['image'] = $cover
                    ? $context->link->getImageLink($product['prewrite'], $id_product.'-'.(int) $cover['id_image'], 'small_default')
                    : '';
                $product['price'] = Tools::displayPrice(Product::getPriceStatic($id_product, true));
            }
        }

        return $results;
    }
}

El precio se calcula con Product::getPriceStatic(), que aplica impuestos y descuentos, y Tools::displayPrice() le da el formato y el símbolo de la moneda de la tienda. Si tu tema usa otro tamaño de imagen, cambia small_default por su nombre (los ves en Preferencias > Imágenes).

Después borra el fichero cache/class_index.php para que PrestaShop detecte el override, y comprueba que en Parámetros avanzados > Rendimiento la opción Desactivar todas las sustituciones está en No.

2. Mostrarlos en el buscador

Edita themes/TU_TEMA/js/modules/blocksearch/blocksearch.js y busca:

formatItem: function(data, i, max, value, term) {
    return value;
},

Sustitúyelo por:

formatItem: function(data, i, max, value, term) {
    var img = data.image ? '<img src="' + data.image + '" alt="" height="39"> ' : '';
    return img + value + ' <b>' + data.price + '</b>';
},

Vacía la caché de Smarty en Parámetros avanzados > Rendimiento > Borrar caché y, si no ves el cambio, la caché del navegador.

Comprobar que funciona

Escribe en el buscador de la tienda el nombre de un producto con imagen y otro sin ella. Debe aparecer la miniatura (o nada, en el que no tiene) y el mismo precio que en su ficha. Si ves el precio sin impuestos o en otra moneda, revisa que estás usando product.price (1.7 y posteriores) o el override del paso 1 (1.6), y no el campo price de la tabla de productos.