Style Popover Éléments

Le 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. Le .active indique la visibilité du conteneur. Le .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

.livesearch.view-all-footer

Sélecteurs de classe de produits

.livesearch.products-container

.livesearch.product-result

.livesearch.product-name

.livesearch.product-price

Utilisation d’un thème modifié

Le storefront popover peut être utilisé avec une thème qui hérite des fichiers requis de Luma. Le 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

Ressources Business.Adobe.com