Storefront Popover

Lorsque Live Search est installé, un popover apparaît sur le storefront lorsque les clients saisissent dans la zone Recherche. Avec chaque caractère saisi, le popover est mis à jour avec les produits suggérés et les images miniatures des principaux résultats de recherche.

Live Search renvoie des résultats pour une requête de deux caractères ou plus. Pour une correspondance partielle, le nombre maximal de caractères par mot est de 20. Le nombre de caractères d’une requête "Rechercher lorsque vous tapez" n’est pas configurable.

Par défaut, Live Search prend en charge les redirections de termes de recherche.

Popover taille de page

La taille de page de popover détermine le nombre de lignes de produits auto-complétés pouvant être renvoyées. Au cours de l’installation de la recherche en direct, la valeur page_size est remplacée par la valeur actuelle du paramètre Recherche catalogue - Autocomplete Limit .

Par défaut, la valeur Recherche catalogue - Limite de saisie automatique est définie sur huit lignes (ou lignes). Pour modifier la taille de page de popover, procédez comme suit :

Exemple de style Popover

Vous pouvez personnaliser l’aspect du widget Popover pour qu’il corresponde aux directives de style et de marque de votre entreprise.

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

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

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

Visibilité des conteneurs

Le composant parent de .livesearch.popover-container est .search-autocomplete. La classe .active indique la visibilité du conteneur. La classe .active est ajoutée de manière conditionnelle lorsque 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) du Guide du développeur Frontend.

Sélecteurs de classe

Vous pouvez utiliser les sélecteurs de classe suivants pour mettre en forme le conteneur et les éléments de produit dans le popover.

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

.livesearch product-link

Utilisation d’un thème modifié working-with-modified-theme

Vous pouvez utiliser le storefront popover avec un thème personnalisé qui hérite des fichiers requis de Luma. Le bloc top.search du module 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 l’ popover

Pour désactiver popover et restaurer la fonctionnalité Recherche rapide standard, saisissez la commande suivante :

bin/magento module:disable Magento_LiveSearchStorefrontPopover

Implémentations sans affichage

Pour ceux qui disposent d’implémentations sans interface utilisateur graphique, vous pouvez installer le Live Search popover à l’aide d’un package npm.