Style Popover Éléments

La variable storefront popover affiche toujours le produit name et priceet la sélection des champs n’est pas configurable. Cependant, popover Les éléments peuvent être stylisés à l’aide de classes CSS. Par exemple, les déclarations suivantes modifient la couleur d’arrière-plan de la variable popover conteneur et pied de page.

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

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

Visibilité des conteneurs

Le composant parent du .livesearch.popover-container is .search-autocomplete. La variable .active indique la visibilité du conteneur. La variable .active est ajoutée de manière conditionnelle lorsque la variable popover est ouvert.

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

Pour plus d’informations sur le style des éléments storefront, reportez-vous à la section Feuilles de style en cascade (CSS) dans le Guide du développeur de Frontend.

Sélecteurs de classe

Les sélecteurs de classe suivants peuvent être utilisés pour mettre en forme le conteneur et les éléments de produit dans la variable popover.

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

Sélecteurs de classe de conteneur

.livesearch.popover-container

Popover container

.livesearch.view-all-footer

Afficher tout le pied de page

Sélecteurs de classe de produits

.livesearch.products-container

Conteneur de produits

.livesearch.product-result

Résultat du produit

.livesearch.product-name

Nom du produit

.livesearch.product-price

Prix du produit

.livesearch product-link

Résultat du produit

Utilisation d’un thème modifié

La variable storefront popover peut être utilisé avec une thème qui hérite des fichiers requis de Luma. La variable top.search dans le header-wrapper de Magento_Search ne doit pas être modifié.

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

Désactivation de la variable popover

Pour désactiver la fonction popover et restaurer la norme Recherche rapide , saisissez la commande suivante :

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