Bild und Preis in der Sofortsuche von PrestaShop 1.6, 1.7, 8 und 9 anzeigen

Die Suche von PrestaShop schlägt Produkte vor, während Sie tippen. Je nach Version zeigt sie nur den Namen oder den Namen und ein Vorschaubild. Bild und Preis hinzuzufügen hilft dem Kunden, das Produkt zu erkennen, bevor er es öffnet. Hier finden Sie den Code für jede Version.

PrestaShop 1.7, 8 und 9

Die Vorschläge zeichnet das Modul ps_searchbar mit der Datei modules/ps_searchbar/ps_searchbar.js. Die Daten, die es erhält, enthalten bereits das Titelbild und den formatierten Endpreis (mit Steuern, Rabatten und der Währung des Kunden): Sie müssen sie nur anzeigen.

Bearbeiten Sie nicht die Datei des Moduls, denn sie wird beim Update überschrieben. Kopieren Sie sie in Ihr Theme, das Vorrang hat:

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

Legen Sie die Ordner modules/ps_searchbar in Ihrem Theme an, falls sie nicht existieren. Bearbeiten Sie danach die Kopie.

Neuere Versionen des Moduls (zeigen das Bild bereits)

Wenn die Funktion _renderItem in Ihrer Kopie eine Variable $img hat, zeigt das Modul das Vorschaubild bereits an. Suchen Sie:

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

Und fügen Sie den Preis hinzu:

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

Ältere Versionen des Moduls (nur Kategorie und Name)

Wenn Ihre Kopie diesen Code enthält:

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

Ersetzen Sie ihn durch:

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

Das Bild wird mit .attr() erzeugt, damit ein Produktname mit Anführungszeichen das Tag nicht beschädigt, und wenn das Produkt kein Bild hat, wird nichts angezeigt.

Damit die Änderung wirkt, leeren Sie den Cache unter Erweiterte Einstellungen > Leistung > Cache leeren. Wenn auf derselben Seite Smart Cache für JavaScript aktiviert ist, leeren Sie den Cache trotzdem, damit die kombinierte Datei neu erzeugt wird.

Das Aussehen können Sie im CSS Ihres Themes anpassen, zum Beispiel:

.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 sind zwei Änderungen nötig: Die Suche muss Bild und Preis zurückgeben, und das JavaScript der Suche muss sie anzeigen.

1. Bild und Preis zu den Ergebnissen hinzufügen

Statt classes/Search.php zu bearbeiten, legen Sie die Datei override/classes/Search.php mit diesem Inhalt an. So geht die Änderung beim Update von PrestaShop nicht verloren:

<?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;
    }
}

Der Preis wird mit Product::getPriceStatic() berechnet, das Steuern und Rabatte anwendet, und Tools::displayPrice() formatiert ihn mit dem Währungssymbol des Shops. Wenn Ihr Theme eine andere Bildgröße verwendet, ersetzen Sie small_default durch deren Namen (Sie sehen sie unter Voreinstellungen > Bilder).

Löschen Sie danach die Datei cache/class_index.php, damit PrestaShop den Override erkennt, und prüfen Sie, dass unter Erweiterte Einstellungen > Leistung die Option Alle Overrides deaktivieren auf Nein steht.

2. Sie in der Suche anzeigen

Bearbeiten Sie themes/TU_TEMA/js/modules/blocksearch/blocksearch.js und suchen Sie:

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

Ersetzen Sie es durch:

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

Leeren Sie den Smarty-Cache unter Erweiterte Einstellungen > Leistung > Cache leeren und, wenn Sie die Änderung nicht sehen, den Browser-Cache.

Prüfen, ob es funktioniert

Geben Sie in die Suche des Shops den Namen eines Produkts mit Bild und eines ohne Bild ein. Es muss das Vorschaubild erscheinen (oder nichts beim Produkt ohne Bild) und derselbe Preis wie auf der Produktseite. Wenn Sie den Preis ohne Steuern oder in einer anderen Währung sehen, prüfen Sie, dass Sie product.price (1.7 und neuer) oder den Override aus Schritt 1 (1.6) verwenden und nicht das Feld price der Produkttabelle.