Estilo Popover Elementos

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

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

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

Visibilidad del contenedor

El componente principal del .livesearch.popover-container es .search-autocomplete. El .active indica la visibilidad del contenedor. El .active se añade condicionalmente cuando el popover está abierto.

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

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

Selectores de clase

Los siguientes selectores de clase se pueden utilizar para aplicar estilo al contenedor y a los elementos de producto en la popover.

  • .livesearch.popover-container
  • .livesearch.view-all-footer
  • .livesearch.products-container
  • .livesearch.product-result
  • .livesearch.product-name
  • .livesearch.product-price

Selectores de clase de contenedor

.livessearch.popover-container

Popover contenedor

Ver todo el pie de página

Selectores de clase de producto

.livessearch.products-container

Contenedor de producto

.livessearch.product-result

Resultado del producto

.livessearch.product-name

Nombre del producto

.livessearch.product-price

Precio del producto

Resultado del producto

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

El storefront popover se puede utilizar con un personalizado tema que hereda los archivos necesarios de Luma. El top.search bloque en el header-wrapper de la Magento_Search El módulo no se debe modificar.

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

Desactivación de la popover

Para deshabilitar la variable popover y restaurar el estándar Búsqueda rápida , introduzca el siguiente comando:

bin/magento module:disable Magento_LiveSearchStorefrontPopover
recommendation-more-help
1d60634e-b73a-404a-be7a-4a2a36676055