Storefront Popover

Quando Live Search está instalado, um popover aparece na vitrine quando os compradores digitam na caixa Pesquisa. Com cada caractere digitado, o popover é atualizado com os produtos sugeridos e as imagens em miniatura dos principais resultados da pesquisa.

Live Search retorna resultados para uma consulta de dois caracteres ou mais. Para uma correspondência parcial, o número máximo de caracteres por palavra é 20. O número de caracteres em uma consulta "pesquisar ao digitar" não é configurável.

Por padrão, Live Search oferece suporte a redirecionamentos de termos de pesquisa.

Popover tamanho da página

O tamanho da página de popover determina quantas linhas de produtos preenchidos automaticamente podem ser retornadas. Durante a instalação do Live Search, o valor page_size é alterado para o valor atual da configuração Pesquisa no Catálogo - Autocomplete Limit.

Por padrão, o valor Pesquisa no catálogo - Limite de preenchimento automático é definido como oito linhas (ou linhas). Para alterar o tamanho da página de popover, faça o seguinte:

Exemplo de estilo Popover

Você pode personalizar a aparência do widget Popover para que ele corresponda ao estilo e às diretrizes de marca da sua empresa.

O storefront popover sempre exibe o produto name e price, e a seleção de campos não é configurável. Entretanto, os elementos popover podem ser estilizados usando as classes CSS. Por exemplo, as declarações a seguir alteram a cor de fundo do contêiner e rodapé popover.

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

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

Visibilidade do contêiner

O componente pai de .livesearch.popover-container é .search-autocomplete. A classe .active indica a visibilidade do container. A classe .active é adicionada condicionalmente quando popover está aberto.

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

Para obter mais informações sobre o estilo de elementos de vitrine, consulte Folhas de estilos em cascata (CSS) no Guia do Desenvolvedor de Front-end.

Seletores de classe

Você pode usar os seguintes seletores de classe para estilizar os elementos de contêiner e produto no popover.

Seletores de classe de contêiner

.livesearch.popover-container

.livesearch.view-all-footer

Seletores de classe de produto

.livesearch.products-container

.livesearch.product-result

.livesearch.product-name

.livesearch.product-price

link do produto .livesearch

Trabalhar com um tema modificado working-with-modified-theme

Você pode usar o storefront popover com um tema personalizado que herda os arquivos necessários do Luma. O bloco top.search no header-wrapper do módulo Magento_Search não deve ser modificado.

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

Desabilitando o popover

Para desabilitar o popover e restaurar a funcionalidade padrão de Pesquisa Rápida, digite o seguinte comando:

bin/magento module:disable Magento_LiveSearchStorefrontPopover

Implementações headless

Para aqueles com implementações headless, você pode instalar o Live Search popover usando um pacote npm.