Storefront Popover

Lorsque Live Search est installé, un popover s’affiche dans le storefront lorsque les acheteurs saisissent dans la zone Rechercher. 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 dans une requête « recherche en cours de frappe » n’est pas configurable.

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

Popover de la page

La taille de la page du popover détermine le nombre de lignes de produits remplis automatiquement qui peuvent être renvoyées. Lors 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 semi-automatique est définie sur huit lignes (ou lignes). Pour modifier la taille de page du popover, procédez comme suit :

Exemple de Popover de style

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

Le storefront popover affiche toujours le name et le price du produit, et la sélection des champs n’est pas configurable. Cependant, les éléments popover peuvent être mis en forme à 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é du conteneur

Le composant parent du .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 la popover est ouverte.

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

Pour plus d’informations sur le style des éléments de storefront, reportez-vous à la section CSS (Cascading style sheets) dans le Guide de développement de Frontend.

Sélecteurs de classe

Vous pouvez utiliser les sélecteurs de classe suivants pour appliquer un style aux éléments de conteneur et de produit dans le popover.

Sélecteurs de classe de conteneur

.livesearch.popover-container

.livesearch.view-all-footer

Sélecteurs de classe de produit

.livesearch.products-container

.livesearch.product-result

.livesearch.product-name

.livesearch.product-price

lien du produit .livesearch

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

Vous pouvez utiliser le storefront popover avec un theme personnalisé qui hérite des fichiers requis de Luma. Le bloc top.search dans le header-wrapper du module 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 le popover et restaurer la fonctionnalité standard Quick Search, saisissez la commande suivante :

bin/magento module:disable Magento_LiveSearchStorefrontPopover

Implémentations découplées

Pour ceux disposant d’une implémentation découplée, vous pouvez installer le Live Search popover à l’aide d’un package npm.