Mostrar a imagem e o preço nas pesquisas instantâneas do PrestaShop 1.6, 1.7, 8 e 9

A pesquisa do PrestaShop sugere produtos enquanto escreve. Consoante a versão, mostra apenas o nome ou o nome e uma miniatura. Acrescentar a imagem e o preço ajuda o cliente a reconhecer o produto antes de entrar nele. Aqui tem o código para cada versão.

PrestaShop 1.7, 8 e 9

As sugestões são apresentadas pelo módulo ps_searchbar com o ficheiro modules/ps_searchbar/ps_searchbar.js. Os dados que recebe já incluem a imagem de capa e o preço final formatado (com impostos, descontos e moeda do cliente): basta mostrá-los.

Não edite o ficheiro do módulo, porque é substituído ao atualizá-lo. Copie-o para o seu tema, que tem prioridade:

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

Crie as pastas modules/ps_searchbar dentro do seu tema se não existirem. Depois edite a cópia.

Versões recentes do módulo (já mostram a imagem)

Se, na sua cópia, a função _renderItem tiver uma variável $img, o módulo já mostra a miniatura. Procure:

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

E acrescente o preço:

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

Versões antigas do módulo (só categoria e nome)

Se a sua cópia tiver 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)
;

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

A imagem é criada com .attr() para que um nome de produto com aspas não estrague a etiqueta e, se o produto não tiver imagem, não é mostrado nada.

Para que produza efeito, esvazie a cache em Advanced Parameters > Performance > Clear cache. Se tiver ativada a opção Smart cache for JavaScript nessa mesma página, limpe-a na mesma para que volte a gerar o ficheiro combinado.

Pode ajustar o aspeto a partir do CSS do seu tema, por exemplo:

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

PrestaShop 1.6

Na 1.6 é preciso fazer duas alterações: que a pesquisa devolva a imagem e o preço, e que o JavaScript da pesquisa os mostre.

1. Acrescentar a imagem e o preço aos resultados

Em vez de editar classes/Search.php, crie o ficheiro override/classes/Search.php com este conteúdo. Assim, a alteração não se perde ao atualizar o 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;
    }
}

O preço é calculado com Product::getPriceStatic(), que aplica impostos e descontos, e Tools::displayPrice() dá-lhe o formato e o símbolo da moeda da loja. Se o seu tema usar outro tamanho de imagem, substitua small_default pelo seu nome (vê-os em Preferences > Images).

Depois apague o ficheiro cache/class_index.php para que o PrestaShop detete o override e verifique se, em Advanced Parameters > Performance, a opção Disable all overrides está em No.

2. Mostrá-los na pesquisa

Edite themes/TU_TEMA/js/modules/blocksearch/blocksearch.js e procure:

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

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

Esvazie a cache do Smarty em Advanced Parameters > Performance > Clear cache e, se não vir a alteração, a cache do navegador.

Verificar que funciona

Escreva na pesquisa da loja o nome de um produto com imagem e de outro sem ela. Deve aparecer a miniatura (ou nada, no que não tem) e o mesmo preço que na sua ficha. Se vir o preço sem impostos ou noutra moeda, verifique se está a usar product.price (1.7 e posteriores) ou o override do passo 1 (1.6), e não o campo price da tabela de produtos.