Storefront Popover

Wanneer Live Search is geïnstalleerd, popover wordt weergegeven in de winkel wanneer kopers tekst typen in het vak Zoeken doos. Als elk teken is getypt, wordt het popover wordt bijgewerkt met voorgestelde producten en duimnagelbeelden van de hoogste onderzoeksresultaten.

Live Search retourneert resultaten voor een query van twee tekens of meer. Voor een gedeeltelijke overeenkomst, is het maximumaantal karakters per woord 20. Het aantal karakters in een "onderzoek aangezien u"vraag typt is niet configureerbaar.

Standaard, Live Search supports heroriëntering van zoektermen.

Popover paginaformaat

De paginagrootte van de popover bepaalt hoeveel lijnen van autocompleted producten kunnen worden teruggekeerd. Tijdens de installatie van Live zoeken worden de page_size wijzigt de huidige waarde van de Catalogus zoeken - Autocomplete Limit instellen.

Standaard is de waarde voor Zoeken in catalogus - automatisch aanvullen van limiet ingesteld op acht regels (of rijen). Het paginaformaat wijzigen van het dialoogvenster popoverGa als volgt te werk:

Stijlen Popover voorbeeld

U kunt het uiterlijk van de Popover widget aanpassen aan de stijl en merkrichtlijnen van uw bedrijf.

De storefront popover geeft altijd het product weer name en priceen de selectie van velden kan niet worden geconfigureerd. Maar popover elementen kunnen worden opgemaakt met CSS klassen. Met de volgende declaraties wijzigt u bijvoorbeeld de achtergrondkleur van de popover container en voettekst.

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

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

Zichtbaarheid container

De bovenliggende component van de component .livesearch.popover-container is .search-autocomplete. De .active -klasse geeft de zichtbaarheid van de container aan. De .active wordt voorwaardelijk toegevoegd wanneer popover is geopend.

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

Raadpleeg voor meer informatie over opmaakelementen voor winkelobjecten de Cascading Style Sheets (CSS) in de Frontend Developer Guide.

Klasse-kiezers

U kunt de volgende klassenkiezers gebruiken om de container- en productelementen in het deelvenster popover.

Containerklassekiezers

.livessearch.popover-container

.livessearch.view-all-footer

Kiezers voor productklassen

.livessearch.products-container

.livessearch.product-result

.livessearch.product-name

.livessearch.product-price

.livessearch product-link

Werken met een gewijzigd thema working-with-modified-theme

U kunt de storefront popover met een aangepaste thema dat de vereiste bestanden overneemt van Luminantie. De top.search in de header-wrapper van de Magento_Search mag niet worden gewijzigd.

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

Het onbruikbaar maken van popover

Om het popover en herstel de standaard Snel zoeken voert u de volgende opdracht in:

bin/magento module:disable Magento_LiveSearchStorefrontPopover

Implementaties zonder kop

Voor gebruikers met een headless-implementatie kunt u de Live Search popover met een npm-pakket.