Storefront Popover

Quando Live Search è installato, viene visualizzato un popover nella vetrina quando gli acquirenti digitano nella casella Cerca. Con ogni carattere digitato, popover viene aggiornato con i prodotti suggeriti e le miniature dei risultati di ricerca principali.

Live Search restituisce risultati per una query di due o più caratteri. Per una corrispondenza parziale, il numero massimo di caratteri per parola è 20. Il numero di caratteri in una query di ricerca durante la digitazione non è configurabile.

Popover dimensioni pagina

Le dimensioni della pagina di popover determinano il numero di righe di prodotti completati automaticamente che possono essere restituite. Durante l'installazione di Live Search, il valore page_size viene modificato nel valore corrente dell'impostazione Ricerca nel catalogo - Autocomplete Limit.

Per impostazione predefinita, il valore Ricerca nel catalogo - Limite completamento automatico è impostato su otto righe. Per modificare le dimensioni della pagina di popover, eseguire le operazioni seguenti:

Esempio di stile Popover

Puoi personalizzare l'aspetto del widget Popover in base alle linee guida di branding e di stile della tua azienda.

storefront popover visualizza sempre il prodotto name e price e la selezione dei campi non è configurabile. Tuttavia, è possibile formattare popover elementi utilizzando classi CSS. Ad esempio, le seguenti dichiarazioni modificano il colore di sfondo del contenitore e del piè di pagina popover.

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

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

Visibilità contenitore

Il componente padre di .livesearch.popover-container è .search-autocomplete. La classe .active indica la visibilità del contenitore. La classe .active viene aggiunta in modo condizionale quando popover è aperto.

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

Per ulteriori informazioni sullo stile degli elementi della vetrina, consultare Cascading Style Sheet (CSS) nella Guida per gli sviluppatori di front-end.

Selettori di classi

È possibile utilizzare i selettori di classe seguenti per assegnare uno stile agli elementi contenitore e prodotto in popover.

Selettori di classi contenitore

.livesearch.popover-container

Contenitore

.livesearch.view-all-footer

Selettori di classi di prodotto

.livesearch.products-container

.livesearch.product-result

.livesearch.product-name

.livesearch.product-price

.livesearch product-link

Utilizzo di un tema modificato working-with-modified-theme

È possibile utilizzare storefront popover con un tema personalizzato che eredita i file richiesti da Luma. Il blocco top.search in header-wrapper del modulo Magento_Search non deve essere modificato.

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

Disabilitazione di popover

Per disabilitare popover e ripristinare la funzionalità standard Ricerca rapida, immettere il comando seguente:

bin/magento module:disable Magento_LiveSearchStorefrontPopover

Implementazioni headless

Per gli utenti con implementazioni headless, è possibile installare Live Search popover utilizzando un pacchetto npm.