Mostrar imagen y precio en las búsquedas instantaneas de Prestashop 1.6 y 1.7

El buscador de Prestashop es una herramienta potente para el usuario, permite buscar en tiempo real y de forma sencilla productos dentro de la tienda.

Por defecto solo muestra el título y puede ser realmente útil mostrar una imagen y precio que lo acompañe para ofrecer una mejor experiencia al visitante.

Para ello deberás hacer algunos cambios en el código, a continuación encontrarás los pasos a seguir en cada caso.

Prestashop 1.6

Como primer paso editamos el fichero themes/TEMPLATE/js/modules/blocksearch/blocksearch.js donde TEMPLATE será el diseño/plantila que estamos usando en Prestashop.

Localiza el código

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

Elimina la línea return value; y sustituye por:

return "<img height='39px' src=\"" + baseDir + "img/p/" + data.image.split('').join('/')+"/" + data.image+ "-small_default.jpg\" alt=\"" + value + "\" />" + value+ "<b>(" +parseFloat(data.price).toFixed(2)+"€)</b>";

Con este cambio hacemos que Prestashop muestre la imagen y precio en el cuadro de búsquedas instantenas, no obstante necesitamos hacer un cambio adicional para que se obtengan estos datos desde la base de datos.

Edita el fichero classes/Search.php y localiza:

if ($ajax) {
    $sql = 'SELECT DISTINCT p.id_product, pl.name pname, cl.name cname,
                                       	cl.link_rewrite crewrite, pl.link_rewrite prewrite '.$score.'
                               	FROM '._DB_PREFIX_.'product p
                               	INNER JOIN `'._DB_PREFIX_.'product_lang` pl ON (
                                       	p.`id_product` = pl.`id_product`
                                        AND pl.`id_lang` = '.(int)$id_lang.Shop::addSqlRestrictionOnLang('pl').'
                               	)
                               	'.Shop::addSqlAssociation('product', 'p').'
                               	INNER JOIN `'._DB_PREFIX_.'category_lang` cl ON (
                                       	product_shop.`id_category_default` = cl.`id_category`
                                        AND cl.`id_lang` = '.(int)$id_lang.Shop::addSqlRestrictionOnLang('cl').'
                               	)
                               	WHERE p.`id_product` '.$product_pool.'
                               	ORDER BY position DESC LIMIT 10';
    return $db->executeS($sql, true, false);
}

Tenemos que sustituir todo este trozo de código por el siguiente:

if ($ajax) {
    $sql = 'SELECT DISTINCT p.id_product, pl.name pname, cl.name cname, im.id_image image, p.price,
                                       	cl.link_rewrite crewrite, pl.link_rewrite prewrite '.$score.'
                               	FROM '._DB_PREFIX_.'product p
                               	INNER JOIN `'._DB_PREFIX_.'product_lang` pl ON (
                                       	p.`id_product` = pl.`id_product`
                                        AND pl.`id_lang` = '.(int)$id_lang.Shop::addSqlRestrictionOnLang('pl').'
                               	)
                               	'.Shop::addSqlAssociation('product', 'p').'
                               	INNER JOIN `'._DB_PREFIX_.'category_lang` cl ON (
                                       	product_shop.`id_category_default` = cl.`id_category`
                                        AND cl.`id_lang` = '.(int)$id_lang.Shop::addSqlRestrictionOnLang('cl').'
                               	)
                               	LEFT JOIN `'._DB_PREFIX_.'image` im ON (p.`id_product` = im.`id_product` AND `cover` = 1)
                               	WHERE p.`id_product` '.$product_pool.'
                               	ORDER BY position DESC LIMIT 10';
    return $db->executeS($sql, true, false);
}

Realmente hemos realizado dos cambios, en la segunda línea añadiendo im.id_image image, p.price, y añadiendo una cuarta línea empezando por abajo, la que empieza por LEFT JOIN '._DB_PREFIX_.'image im ON (p....

Y listo, con estos cambios se mostrará el precio e imagen, recuerda que puedes personalizar la apariencia del resultado por medio de CSS y editando el primer fichero.

Importante vaciar la cache de Smarty y eliminar el fichero cache/class_index.php si detectas que el cambio no tiene efecto.

Prestashop 1.7

Edita el fichero modules/ps_searchbar/ps_searchbar.js y localiza el siguiente 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)
;

Sustituye por el siguiente:

return $("<li>")
    .append($("<a>")
        .append($("<span>").html(product.category_name).addClass("category"))
        .append($("<span>").html(' > ').addClass("separator"))
        .append($("<span>").html('<img src='+product.cover.small.url+' alt='+product.name+'/>'))
        .append($("<span>").html(product.name).addClass("product"))
        .append($("<span>").html(' - ').addClass("separator"))
        .append($("<span>").html(product.price).addClass("price"))
    ).appendTo(ul)
;

Hemos añadido la quinta línea para mostrar la imagen del producto y la séptima y octava que añaden un guión para separar y a continuación el precio del producto.

Y listo, con estos cambios se mostrará el precio e imagen, recuerda que puedes personalizar la apariencia del resultado por medio de CSS y editando el primer fichero.

Importante vaciar la cache de Smarty si detectas que el cambio no tiene efecto.