Storefront Popover

Wanneer Live Search wordt geïnstalleerd 🔗, verschijnt a popover in de storefront wanneer de kopers in het Onderzoekvakje typen. Wanneer elk teken wordt getypt, wordt popover bijgewerkt met voorgestelde producten en miniatuurafbeeldingen van de bovenste zoekresultaten.

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

Door gebrek, Live Search steunt herleidt de onderzoekstermijn.

Popover paginaformaat

De paginagrootte van popover bepaalt hoeveel regels automatisch ingevulde producten kunnen worden geretourneerd. Tijdens de Levende installatie van het Onderzoek, verandert de page_size waarde in de huidige waarde van het Onderzoek van de Catalogus- Autocomplete Limit het plaatsen.

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

Stijlen Popover voorbeeld

U kunt de vormgeving van de Popover -widget aanpassen aan de stijl en merkenrichtlijnen van uw bedrijf.

In storefront popover worden altijd het product name en price weergegeven en kan de selectie van velden niet worden geconfigureerd. Nochtans, popover elementen kunnen worden gestileerd gebruikend CSSklassen. Met de volgende declaraties wijzigt u bijvoorbeeld de achtergrondkleur van de container en de voettekst van popover .

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

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

Zichtbaarheid container

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

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

Voor meer informatie over het stileren van storefront elementen, verwijs naar Draperende stijlbladen (CSS)in de Voorste Gids van de Ontwikkelaar.

Klasse-kiezers

U kunt de volgende klassenkiezers gebruiken om de container- en productelementen in de popover op te maken.

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 storefront popover met een aangepast themagebruiken dat de vereiste dossiers van Luma erft. Het top.search -blok in header-wrapper van de Magento_Search -module 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>

De popover uitschakelen

Om popover onbruikbaar te maken en de standaard Snelle functionaliteit van het Onderzoekte herstellen, ga het volgende bevel in:

bin/magento module:disable Magento_LiveSearchStorefrontPopover

Implementaties zonder kop

Voor die met hoofdloze implementaties, kunt u Live Search popover installeren gebruikend een npm pakket.