Afficher l'image et le prix dans la recherche instantanée de PrestaShop 1.6, 1.7, 8 et 9

Le moteur de recherche de PrestaShop suggère des produits pendant la saisie. Selon la version, il n'affiche que le nom, ou le nom et une miniature. Ajouter l'image et le prix aide le client à reconnaître le produit avant d'y entrer. Voici le code pour chaque version.

PrestaShop 1.7, 8 et 9

Les suggestions sont affichées par le module ps_searchbar avec le fichier modules/ps_searchbar/ps_searchbar.js. Les données qu'il reçoit incluent déjà l'image de couverture et le prix final formaté (avec taxes, réductions et devise du client) : il suffit de les afficher.

Ne modifiez pas le fichier du module, car il est écrasé lors de sa mise à jour. Copiez-le dans votre thème, qui est prioritaire :

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

Créez les dossiers modules/ps_searchbar dans votre thème s'ils n'existent pas. Modifiez ensuite la copie.

Versions récentes du module (elles affichent déjà l'image)

Si dans votre copie la fonction _renderItem contient une variable $img, le module affiche déjà la miniature. Cherchez :

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

Et ajoutez le prix :

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

Anciennes versions du module (seulement la catégorie et le nom)

Si votre copie contient ce 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)
;

Remplacez-le par :

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

L'image est créée avec .attr() pour qu'un nom de produit contenant des guillemets ne casse pas la balise, et si le produit n'a pas d'image, rien ne s'affiche.

Pour que la modification prenne effet, videz le cache dans Paramètres avancés > Performances > Vider le cache. Si l'option Cache intelligent pour JavaScript est activée sur cette même page, videz-le quand même pour qu'il régénère le fichier combiné.

Vous pouvez ajuster l'apparence depuis le CSS de votre thème, par exemple :

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

PrestaShop 1.6

Dans la 1.6, il faut faire deux modifications : que la recherche renvoie l'image et le prix, et que le JavaScript du moteur de recherche les affiche.

1. Ajouter l'image et le prix aux résultats

Au lieu de modifier classes/Search.php, créez le fichier override/classes/Search.php avec ce contenu. Ainsi, la modification n'est pas perdue lors de la mise à jour de 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;
    }
}

Le prix est calculé avec Product::getPriceStatic(), qui applique les taxes et les réductions, et Tools::displayPrice() lui donne le format et le symbole de la devise de la boutique. Si votre thème utilise une autre taille d'image, remplacez small_default par son nom (vous les voyez dans Préférences > Images).

Supprimez ensuite le fichier cache/class_index.php pour que PrestaShop détecte l'override, et vérifiez que dans Paramètres avancés > Performances l'option Désactiver tous les overrides est sur Non.

2. Les afficher dans le moteur de recherche

Modifiez themes/TU_TEMA/js/modules/blocksearch/blocksearch.js et cherchez :

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

Remplacez-le par :

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

Videz le cache de Smarty dans Paramètres avancés > Performances > Vider le cache et, si vous ne voyez pas la modification, le cache du navigateur.

Vérifier que cela fonctionne

Saisissez dans le moteur de recherche de la boutique le nom d'un produit avec image et d'un autre sans image. La miniature doit apparaître (ou rien, pour celui qui n'en a pas) ainsi que le même prix que sur sa fiche. Si vous voyez le prix hors taxes ou dans une autre devise, vérifiez que vous utilisez product.price (1.7 et suivantes) ou l'override de l'étape 1 (1.6), et non le champ price de la table des produits.