Storefront Popover

Cuando Live Search está instalado, aparece un popover en la tienda cuando los compradores escriben en el cuadro Buscar. Con cada carácter escrito, popover se actualiza con productos sugeridos e imágenes en miniatura de los resultados de búsqueda principales.

Live Search devuelve los resultados de una consulta de dos caracteres o más. Para una coincidencia parcial, el número máximo de caracteres por palabra es 20. El número de caracteres de una consulta "buscar mientras escribe" no se puede configurar.

De manera predeterminada, Live Search admite redirecciones de términos de búsqueda.

Popover tamaño de página

El tamaño de página de popover determina cuántas líneas de productos autocompletados se pueden devolver. Durante la instalación de Live Search, el valor page_size cambia al valor actual de la configuración Búsqueda en el catálogo - Autocomplete Limit.

De forma predeterminada, el valor Búsqueda en el catálogo: Límite de autocompletar está establecido en ocho líneas (o filas). Para cambiar el tamaño de página de popover, haga lo siguiente:

Ejemplo de estilo Popover

Puede personalizar el aspecto del widget Popover para que coincida con el estilo y las directrices de personalización de marca de su compañía.

storefront popover siempre muestra el producto name y price, y la selección de campos no se puede configurar. Sin embargo, los elementos popover se pueden diseñar con clases CSS. Por ejemplo, las siguientes declaraciones cambian el color de fondo del contenedor y pie de página de popover.

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

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

Visibilidad del contenedor

El componente principal de .livesearch.popover-container es .search-autocomplete. La clase .active indica la visibilidad del contenedor. La clase .active se agrega condicionalmente cuando popover está abierto.

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

Para obtener más información sobre cómo aplicar estilo a los elementos de la tienda, consulte Hojas de estilo en cascada (CSS) en la Guía para desarrolladores de Frontend.

Selectores de clase

Puede utilizar los siguientes selectores de clase para aplicar estilo al contenedor y a los elementos de producto en popover.

Selectores de clase de contenedor

.livessearch.popover-container

.livessearch.view-all-footer

Selectores de clase de producto

.livessearch.products-container

.livessearch.product-result

.livessearch.product-name

.livessearch.product-price

.livessearch product-link

Trabajar con una temática modificada working-with-modified-theme

Puede usar storefront popover con un tema personalizado que hereda los archivos necesarios de Luma. No se debe modificar el bloque top.search en header-wrapper del módulo Magento_Search.

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

Deshabilitando popover

Para deshabilitar popover y restaurar la funcionalidad estándar de Búsqueda rápida, escriba el siguiente comando:

bin/magento module:disable Magento_LiveSearchStorefrontPopover

Implementaciones sin encabezado

Para los que tengan implementaciones sin encabezado, puede instalar Live Search popover con un paquete npm.