Storefront Popover
Wenn Live Search den Wert installed aufweist, wird in der Storefront ein Wert popover angezeigt, wenn der Käufer den Wert in das Feld Search eingibt. Bei jedem eingegebenen Zeichen wird der popover mit den vorgeschlagenen Produkten und Miniaturbildern der Top-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 unterstützt Live Search Umleitungen von Suchbegriffen.
Popover Seitengröße
Die Seitengröße von popover bestimmt, wie viele Zeilen von automatisch ausgefüllten Produkten zurückgegeben werden können. Während der Live-Suchinstallation ändert sich der Wert page_size in den aktuellen Wert der Einstellung Katalogsuche - Autocomplete Limit .
Standardmäßig ist der Wert Katalogsuche - Automatische Vervollständigungsgrenze auf acht Zeilen (oder Zeilen) festgelegt. Gehen Sie wie folgt vor, um die Seitengröße von popover zu ändern:
- Wechseln Sie in der Seitenleiste Admin zu Stores > Einstellungen > Konfiguration.
- Erweitern Sie im linken Bereich Katalog und wählen Sie Katalog aus der Liste der Einstellungen.
- Erweitern Sie den Abschnitt Katalogsuche .
- Setzen Sie das Autocomplete-Limit auf die Anzahl der Zeilen, die Sie in den popover zulassen möchten.
- Klicken Sie nach Abschluss des Vorgangs auf Konfiguration speichern.
Beispiel für die Formatierung Popover
Sie können das Erscheinungsbild des Widgets Popover an den Stil und die Branding-Richtlinien Ihres Unternehmens anpassen.
Das storefront popover zeigt immer das Produkt name und price an, und die Auswahl der Felder kann nicht konfiguriert werden. popover -Elemente können jedoch mit CSS -Klassen formatiert werden. Beispielsweise ändern die folgenden Deklarationen die Hintergrundfarbe des Containers und der Fußzeile popover .
.livesearch.popover-container {
background-color: lavender;
}
.livesearch.view-all-footer {
background-color: magenta;
}
Behälteranzeige
Die übergeordnete Komponente von .livesearch.popover-container ist .search-autocomplete. Die Klasse .active gibt die Sichtbarkeit des Containers an. Die Klasse .active wird bedingt hinzugefügt, wenn der popover geöffnet ist.
.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 zu gestalten.
.livesearch.popover-container.livesearch.view-all-footer.livesearch.products-container.livesearch.product-result.livesearch.product-name.livesearch.product-price
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 den storefront popover mit einem angepassten Design verwenden, das die erforderlichen Dateien von Luma übernimmt. Der Block top.search im header-wrapper des Magento_Search-Moduls 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 des popover
Geben Sie den folgenden Befehl ein, um die popover zu deaktivieren und die standardmäßige Schnellsuche-Funktion wiederherzustellen:
bin/magento module:disable Magento_LiveSearchStorefrontPopover
Headless-Implementierungen
Für Implementierungen ohne Headless können Sie die Live Search popover mit einem npm-Paket installieren.