Storefront Popover

Wenn Live Search installiert wird, wird eine popover in der Storefront angezeigt, wenn Käufer in das Feld Suche eingeben. Mit jedem eingegebenen Zeichen wird die popover mit vorgeschlagenen Produkten und Miniaturbildern der wichtigsten Suchergebnisse aktualisiert.

Live Search gibt Ergebnisse für eine Abfrage mit mindestens zwei Zeichen zurück. Bei einer Teilübereinstimmung beträgt die maximale Anzahl von Zeichen pro Wort 20. Die Anzahl der Zeichen in einer Abfrage vom Typ „Suche während der Eingabe“ ist nicht konfigurierbar.

Live Search unterstützt standardmäßig Suchbegriff-Umleitungen.

Popover Seitengröße

Die Seitengröße der popover bestimmt, wie viele Zeilen von automatisch vervollständigten Produkten zurückgegeben werden können. Während der Live Search-Installation ändert sich der page_size-Wert in den aktuellen Wert der Einstellung Katalogsuche - Autocomplete Limit.

Standardmäßig ist der Grenzwert für Katalogsuche - automatische Vervollständigung auf acht Zeilen (oder Zeilen) festgelegt. Gehen Sie wie folgt vor, um die Seitengröße der popover zu ändern:

Beispiel Popover Formatierung

Sie können das Erscheinungsbild des Popover Widgets an die Stil- und Branding-Richtlinien Ihres Unternehmens anpassen.

Die storefront popover zeigt immer die name und price an, und die Auswahl der Felder ist nicht konfigurierbar. popover können jedoch mithilfe von CSS-Klassen werden. Beispielsweise ändern die folgenden Deklarationen die Hintergrundfarbe des popover-Containers und der Fußzeile.

.livesearch.popover-container {
    background-color: lavender;
}

.livesearch.view-all-footer {
    background-color: magenta;
}

Container-Sichtbarkeit

Die übergeordnete Komponente des .livesearch.popover-container ist .search-autocomplete. Die .active-Klasse gibt die Sichtbarkeit des Containers an. Die .active-Klasse wird bedingt hinzugefügt, wenn die popover geöffnet ist.

.search-autocomplete.active   /* visible */
.search-autocomplete          /* not visible */

Weitere Informationen zum Formatieren von Storefront-Elementen finden Sie unter Cascading Style Sheets (CSS) im Frontend-Entwicklerhandbuch.

Klassenselektoren

Sie können die folgenden Klassenselektoren verwenden, um den Container und die Produktelemente im popover zu formatieren.

Container-Klassenselektoren

.LiveSearch.Popover-Container

.livesearch.view-all-footer

Produktklassenselektoren

.LiveSearch.products-container

.LiveSearch.product-result

.livesearch.product-name

.livesearch.product-price

.LiveSearch-Produkt-Link

Arbeiten mit einem geänderten Design working-with-modified-theme

Sie können die storefront popover mit einem benutzerdefinierten Design“ verwenden das die erforderlichen Dateien von (). Der top.search Block im header-wrapper des Magento_Search darf nicht geändert werden.

<referenceContainer name="header-wrapper">
   <block class="Magento\Framework\View\Element\Template" name="top.search" as="topSearch" template="Magento_Search::form.mini.phtml">
      <arguments>
         <argument name="configProvider" xsi:type="object">Magento\Search\ViewModel\ConfigProvider</argument>
      </arguments>
   </block>
</referenceContainer>

Deaktivieren der popover

Um die popover zu deaktivieren und die standardmäßige Schnellsuche“ wiederherzustellen geben Sie den folgenden Befehl ein:

bin/magento module:disable Magento_LiveSearchStorefrontPopover

Headless-Implementierung

Für Benutzer mit Headless-Implementierungen können Sie das Live Search popover mit einem npmPaket.