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.

Per impostazione predefinita, Live Search supporta reindirizzamenti termini di ricerca.

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.