Storefront Popover

Wann Live Search is installiert, a popover erscheint in der Storefront, wenn der Käufer im Feld Suche ankreuzen. Mit jedem eingegebenen Zeichen muss die popover wird mit vorgeschlagenen Produkten und Miniaturbildern der wichtigsten Suchergebnisse aktualisiert.

Live Search gibt Ergebnisse für eine Abfrage von zwei Zeichen oder mehr zurück. Bei einer teilweisen Übereinstimmung beträgt die maximale Anzahl von Zeichen pro Wort 20. Die Anzahl der Zeichen in einer Abfrage vom Typ "Suche beim Eingeben" ist nicht konfigurierbar.

Standardmäßig ist Live Search unterstützt Suchbegriffumleitungen.

Popover Seitengröße

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

Standardmäßig ist der Wert Katalogsuche - Automatische Vervollständigungsgrenze auf acht Zeilen (oder Zeilen) festgelegt. So ändern Sie die Seitengröße der popoverführen Sie folgende Schritte aus:

Formatierung Popover example

Sie können das Erscheinungsbild der Popover -Widget an den Stil und die Branding-Richtlinien Ihres Unternehmens anzupassen.

Die storefront popover zeigt immer das Produkt an name und priceund die Feldauswahl nicht konfigurierbar ist. Allerdings popover -Elemente können mit CSS Klassen. Beispielsweise ändern die folgenden Deklarationen die Hintergrundfarbe der popover Container und Fußzeile.

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

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

Behälteranzeige

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

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

Weitere Informationen zum Formatieren von Storefront-Elementen finden Sie unter Kaskadierende Stylesheets (CSS) im Frontend-Entwicklerhandbuch.

Klassenselektoren

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

Container-Klassen-Selektoren

.livesearch.popover-container

.livesearch.view-all-footer

Produktklassenauswahl

.livesearch.products-container

.livesearch.product-result

.livesearch.product-name

.livesearch.product-price

.livesearch product-link

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

Sie können die storefront popover mit einer benutzerdefinierten Design , der die erforderlichen Dateien von Luma. Die 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

So deaktivieren Sie die popover und den Standard wiederherstellen Schnellsuche verwenden, geben Sie den folgenden Befehl ein:

bin/magento module:disable Magento_LiveSearchStorefrontPopover

Headless-Implementierungen

Für Implementierungen mit Headless können Sie die Live Search popover mithilfe einer npm package.