Show image and price in PrestaShop 1.6, 1.7, 8 and 9 instant search

The PrestaShop search box suggests products as you type. Depending on the version, it shows only the name or the name and a thumbnail. Adding the image and the price helps customers recognise the product before opening it. Here is the code for each version.

PrestaShop 1.7, 8 and 9

The suggestions are drawn by the ps_searchbar module with the file modules/ps_searchbar/ps_searchbar.js. The data it receives already includes the cover image and the final formatted price (with taxes, discounts and the customer's currency): you only need to display them.

Do not edit the module's file, because it is overwritten when the module is updated. Copy it to your theme, which takes priority:

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

Create the modules/ps_searchbar folders inside your theme if they do not exist. Then edit the copy.

Recent versions of the module (already show the image)

If the _renderItem function in your copy has an $img variable, the module already shows the thumbnail. Look for:

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

And add the price:

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)
;

Old versions of the module (category and name only)

If your copy has this code:

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)
;

Replace it with:

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)
;

The image is created with .attr() so that a product name with quotes does not break the tag, and if the product has no image nothing is shown.

For the change to take effect, clear the cache in Advanced Parameters > Performance > Clear cache. If you have the Smart cache for JavaScript option enabled on that same page, clear it anyway so that the combined file is regenerated.

You can adjust the look from your theme's CSS, for example:

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

PrestaShop 1.6

In 1.6 you need to make two changes: make the search return the image and the price, and make the search box JavaScript show them.

1. Add image and price to the results

Instead of editing classes/Search.php, create the file override/classes/Search.php with this content. That way the change is not lost when you update 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;
    }
}

The price is calculated with Product::getPriceStatic(), which applies taxes and discounts, and Tools::displayPrice() formats it with the shop's currency symbol. If your theme uses a different image size, change small_default to its name (you can see them in Preferences > Images).

Then delete the file cache/class_index.php so that PrestaShop detects the override, and check that in Advanced Parameters > Performance the Disable all overrides option is set to No.

2. Show them in the search box

Edit themes/TU_TEMA/js/modules/blocksearch/blocksearch.js and look for:

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

Replace it with:

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>';
},

Clear the Smarty cache in Advanced Parameters > Performance > Clear cache and, if you do not see the change, your browser cache.

Check that it works

Type into the shop's search box the name of a product with an image and another without one. You should see the thumbnail (or nothing, for the one without an image) and the same price as on its product page. If you see the price without taxes or in another currency, check that you are using product.price (1.7 and later) or the override from step 1 (1.6), and not the price field of the products table.