[Gelöst] Suche nach Produkten im FO anpassen

[Andi111]

Hallo zusammen,

gibt es eine Möglichkeit in der Standardsuche im FO einzustellen dass nicht nur der Name der Produkte, sondern auch das vorausgewählte Bild der Produkte angezeigt wird?

Außerdem würde ich gerne einstellen dass in der Suche nur der Name des Produkts und nicht der Name der Oberkategorie angezeigt wird.

Kann mir hier bitte jemand weiterhelfen?

Grüße

Edited May 3, 2021 by Andi111 (see edit history)

[rictools]

Nicht ohne ein Modul oder individuelle Datei-Änderungen. Der Kategoriename sollte sich in der tpl relativ leicht lokalisieren und entfernen lassen.

[Andi111]

Hallo @rictools,

danke für den Hinweis.

Im Modul für die Suchleiste ist nur die Datei "ps_searchbar.tpl".

In dieser Datei steht:

<div id="search_widget" class="search-widget" data-search-controller-url="{$search_controller_url}">
    <form method="get" action="{$search_controller_url}">
        <input type="hidden" name="controller" value="search">
        <input type="text" name="s" value="{$search_string}" placeholder="{l s='Search our catalog' d='Shop.Theme.Catalog'}" aria-label="{l s='Search' d='Shop.Theme.Catalog'}">
        <button type="submit">
            <i class="material-icons search">&#xE8B6;</i>
      <span class="hidden-xl-down">{l s='Search' d='Shop.Theme.Catalog'}</span>
        </button>
    </form>
</div>

Aktuell wird, wenn man in das Suchfeld etwas eingibt, zuerst die Kategorie des Produktes und dann der Name von dem Produkt angezeigt.

Kannst du mir eventuell sagen was ich hier machen muss, damit die Kategorie der Produkte nicht mehr angezeigt wird?

[JBW]

Der Code für die Anzeige der Ergebnisse findet sich in der entsprechenden Javascript, den Append für die Kategorie kannst du dort einfach auskommentieren

ps_searchbar.js

    $.widget('prestashop.psBlockSearchAutocomplete', $.ui.autocomplete, {
        _renderItem: function (ul, product) {
            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)
            ;
        }
    });

 

[Andi111]

Hallo @JBW,

danke für deine Antwort.

Also muss ich die Datei "ps_searchbar.js" mit dem Code den du geschrieben hast erstellen und anschließend in den Ordner "ps_searchbar" hochladen?

[Andi111]

Ich war in dem Ordner /themes/classic/modules/ps_searchbar und hier ist nur die eine Datei "ps_searchbar.tpl".

Jetzt habe ich im FTP ein bisschen rum gesucht und nichts gefunden.

Dann habe ich im Ordner /module/ps_searchbar geschaut, hier ist die von dir beschriebene Datei.

Ich verstehe nur nicht warum in den beiden Ordnern unterschiedliche Sachen drin sind?

Nun habe ich die beiden Zeilen raus gelöscht, den Cache gelöscht aber es funktioniert nicht.

In meiner "ps_searchbar.js" Datei steht nun das:

    $.widget('prestashop.psBlockSearchAutocomplete', $.ui.autocomplete, {
        _renderItem: function (ul, product) {
            return $("<li>")
                .append($("<a>")
                    .append($("<span>").html(product.category_name).addClass("category"))
                ).appendTo(ul)
            ;
        }
    });
 

Edit:

Mein Fehler, natürlich so:

    $.widget('prestashop.psBlockSearchAutocomplete', $.ui.autocomplete, {
        _renderItem: function (ul, product) {
            return $("<li>")
                .append($("<a>")
                    .append($("<span>").html(product.name).addClass("product"))
                ).appendTo(ul)
            ;
        }
    });

 

Es funktioniert aber leider trotzdem nicht.

Edited May 3, 2021 by Andi111 (see edit history)

[Andi111]

Jetzt habe ich es nicht gelöscht, sondern auskommentiert wie du es sagtest, funktioniert aber leider nicht:

    $.widget('prestashop.psBlockSearchAutocomplete', $.ui.autocomplete, {
        _renderItem: function (ul, product) {
            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)
            ;
        }
    });

Kannst du mir bitte sagen was ich falsch mache?

Edited May 3, 2021 by Andi111 (see edit history)

[rictools]

Ja, es gibt halt gewisse Grundvoraussetzungen die bei der Nutzung eines umfangreichen Shopsystems wichtig sind. Generell gibt es viele Dateien sowohl unterhalb des Hauptverzeichnis als auch unterhalb des Verzeichnis des aktiven Themes (meist Dateien bei denen es mehr um das Design geht) wobei letztere gegenüber ersteren vorrangig behandelt werden (vergleichbar den Overrides).

Was meinst du mit "funktioniert nicht", keine Änderung zu vorher (dann: nicht alle Caches gelöscht?) oder Fehler / weiße Seite? Mit welchem Editor hast du die Seite bearbeitet?

[Andi111]

Hallo @rictools,

danke für die Infos!

Es hat sich nichts verändert. Es wird noch immer Kategorie > Produkt bei der Suche angezeigt wenn man etwas ins Suchfeld eingibt.

Ist schon irgendwie komisch, wenn ich zwei komplette Stränge raus lösche und es dann noch immer funktioniert.

Als Programm zum editieren benutze ich "Brackets".

Wenn ich CSS Dateien editiere funktioniert es aber auch.

Edit:

Hoppala, mein Fehler. Ich hatte meinen Browser Cache nicht gelöscht. Jetzt wo ich das getan habe funktioniert es. Diesen Cache habe ich vorher aber noch nie gelöscht, nur den Cache von PrestaShop und es hat immer funktioniert.

Ich danke euch vielmals.

Kann man euch auf irgendeiner Weise einen Kaffee spendieren? Wie oft ihr beiden @rictoolsund @JBWmir schon geholfen habt!

Edited May 3, 2021 by Andi111 (see edit history)

[Andi111]

Hallo nochmal,

@JBW

@rictools

Mir ist gerade eben aufgefallen dass das ganze in der mobilen Ansicht (am Smartphone) nicht funktioniert.

Dort wird noch immer die Kategorie mit angezeigt. Ich habe jetzt mal in der selben Datei geschaut, aber nichts zu "mobil" gefunden.

Könnt ihr mir hier eventuell nochmal helfen?

 

Edit:

Sorry, hat sich erledigt. Lag daran dass ich dort die Cookies noch nicht gelöscht hatte.

Aber kann mir von euch jemand vielleicht noch sagen wie ich die Schriftgröße und die große des Feldes bei den Suchvorschlägen ändern kann?

Edited May 7, 2021 by Andi111 (see edit history)

[rictools]

Per CSS: .ui-menu-item a {font-size: 20px;}

Meinst du die Feldbreite? Die ist hardgecodet, da müßtest du zunächst rauskriegen in welcher Datei sich der Part findet.

[Andi111]

@rictools, danke dir!

Du hast ja gerade die Schriftgröße beschrieben oder?

Mit "#ui-id-2" konnte ich die Feldgröße in der custom.css Datei ändern.

Edited May 13, 2021 by Andi111 (see edit history)