Winkelfront Popover | Handleiding voor Adobe Commerce-ontwikkelaars

Wanneer Live Search is geïnstalleerd, verschijnt er een pop-over in de etalage terwijl shoppers typen in het zoekvak. Met elk getypt teken wordt de popover bijgewerkt met voorgestelde producten en miniatuurafbeeldingen van de topzoekresultaten.

Live Search retourneert resultaten voor een zoekopdracht van twee tekens of meer. Voor een gedeeltelijke overeenkomst is het maximum aantal tekens per woord 20. Het aantal tekens in een zoekopdracht “zoeken terwijl u typt” kan niet worden geconfigureerd.

De pop-over Live Search storefront is alleen beschikbaar voor winkels die de Luma thema, of een aangepast thema dat is gebaseerd op Luma. De Luma thema is opgenomen in de voorbeeldgegevens van Commerce. De popover ondersteunt niet de Blank thema. Zie Werken met een aangepast thema voor meer informatie.

Doorzoekbare kenmerken

De volgende attributen zijn altijd doorzoekbaar:

Bekijk de set productkenmerken die doorzoekbaar zijn (searchable=true) om zeer gerichte resultaten te produceren. Sommige attributen die standaard zijn ingeschakeld voor zoeken, zoals: description, kan het tegenovergestelde effect hebben en de nauwkeurigheid van zoekresultaten verminderen. Als een persoon bijvoorbeeld zoekt op “shorts” en er staan shirts in de catalogus met een omschrijving die “korte mouwen” bevat, worden de shirts ook geretourneerd. Om de relevantie van de resultaten te verbeteren, moet u kenmerken doorzoekbaar maken die inhoud bevatten met een duidelijke en beknopte betekenis. Vermijd het gebruik van attributen die minder nauwkeurige, lange tekst bevatten.

Winkelfront popover

De paginagrootte van de storefront-popover bepaalt hoeveel regels met automatisch ingevulde producten kunnen worden geretourneerd. Voorheen was de paginagrootte van de popover hard gecodeerd tot zes regels. De page_size waarde is nu een configureerbare instelling die wordt doorgegeven aan de constructor. Tijdens de Live Search-installatie wordt de page_size waarde verandert in de huidige waarde van de Catalogus Zoeken – Autocomplete Limit instelling. Verkopers kunnen de paginagrootte van de popover wijzigen door de waarde in de configuratie bij te werken. Standaard is de waarde Catalogus zoeken – Limiet automatisch aanvullen ingesteld op acht regels (of rijen).

De popover geeft altijd het product weer name en price, en de selectie van velden is niet configureerbaar. Elementen van de popover kunnen echter worden gestileerd met behulp van CSS-klassen. De volgende declaraties wijzigen bijvoorbeeld de achtergrondkleur van de popover-container en voettekst.

1
2
3
4
5
6
7



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

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

Zichtbaarheid van containers

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

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

Voor meer informatie over het stylen van storefront-elementen, refereer je naar Cascading style sheets (CSS) in de Frontend Developers Guide.

Klassenkiezers

De volgende klassenkiezers kunnen worden gebruikt om de container-, suggestie- en productelementen in de popover op te maken.

.livesearch.popover-container
.livesearch.view-all-footer
.livesearch.suggestions-container
.livesearch.suggestions-header
.livesearch.suggestion
.livesearch.products-container
.livesearch.product-result
.livesearch.product-name
.livesearch.product-price

Containerklasse-kiezers

.livesearch.popover-container

.livesearch.view-all-footer

Suggestie klassenkiezers

.livesearch.suggesties-container

.livesearch.suggesties-header

.livesearch.suggestie

Productklassekiezers

.livesearch.products-container

.livesearch.product-resultaat

.livesearch.productnaam

.livesearch.product-prijs

Werken met een aangepast thema

De storefront-popover kan worden gebruikt met een aangepast thema dat de vereiste bestanden overneemt van Luma. De top.search blok in de header-wrapper van de Magento_Search module mag niet worden gewijzigd.

1
2
3
4
5
6
7



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

Voer de volgende opdracht in om de popover uit te schakelen en de standaard Quick Search-functionaliteit te herstellen:

1 bin/magento module:disable Magento_LiveSearchStorefrontPopover

Naar het overzicht

Winkelfront Popover | Handleiding voor Adobe Commerce-ontwikkelaars

Doorzoekbare kenmerken

Popover-paginaformaat