Storefront Popover

När Live Search är installerat visas en popover i butiken när shoppare skriver i rutan Sök. För varje tecken som skrivs uppdateras popover med förslag på produkter och miniatyrbilder av det översta sökresultatet.

Live Search returnerar resultat för en fråga med minst två tecken. För en partiell matchning är det maximala antalet tecken per ord 20. Det går inte att konfigurera antalet tecken i en sökfråga.

Som standard har Live Search stöd för omdirigering av söktermer.

Sidstorlek Popover

Sidstorleken för popover avgör hur många rader med automatiskt slutförda produkter som kan returneras. Under Live Search-installationen ändras värdet page_size till det aktuella värdet för inställningen Katalogsökning- Autocomplete Limit .

Som standard är värdet för Katalogsökning - Gräns för automatisk komplettering satt till åtta rader (eller rader). Så här ändrar du sidstorleken för popover:

Exempel på formatering Popover

Du kan anpassa utseendet och känslan för widgeten Popover så att den matchar företagets riktlinjer för varumärkesprofilering.

storefront popover visar alltid produkten name och price och valet av fält är inte konfigurerbart. popover-element kan emellertid formateras med CSS-klasser. Följande deklarationer ändrar till exempel bakgrundsfärgen för behållaren popover och sidfoten.

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

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

Synlighet för behållare

Den överordnade komponenten för .livesearch.popover-container är .search-autocomplete. Klassen .active anger behållarens synlighet. Klassen .active läggs till villkorligt när popover är öppen.

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

Mer information om formatering av butikselement finns i CSS (Cascading Style Sheets) i Utvecklarhandbok för Fornend.

Klassväljare

Du kan använda följande klassväljare för att formatera behållar- och produktelementen i popover.

Väljare för behållarklass

.livesearch.popover-container

.livesearch.view-all-footer

Produktklassväljare

.livesearch.products-container

.livesearch.product-result

.livesearch.product-name

.livesearch.product-price

.livesearch-produktlänk

Arbeta med ett ändrat tema working-with-modified-theme

Du kan använda storefront popover med ett anpassat tema som ärver de nödvändiga filerna från Luma. top.search-blocket i header-wrapper i modulen Magento_Search får inte ändras.

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

Inaktiverar popover

Om du vill inaktivera popover och återställa snabbsökningsfunktionen anger du följande kommando:

bin/magento module:disable Magento_LiveSearchStorefrontPopover

Headless-implementationer

För dem med headless-implementeringar kan du installera Live Search popover med ett npm-paket.