Live Search & Autocomplete — Documentation

Installation

Prérequis

Magento 2.4.x (Open Source ou Adobe Commerce), PHP 8.1–8.5. Fonctionne avec tout moteur de recherche pris en charge par Magento (OpenSearch, Elasticsearch ou MySQL). Compatible avec les thèmes Hyvä et Luma. Nécessite le module gratuit codingrow/module-core. Aucun fournisseur d'IA ni clé d'API n'est requis — le module est de la pure recherche catalogue.

Configuration initiale

Installez via Composer, activez le module et lancez la mise à niveau/compilation standard :

composer require codingrow/module-live-search-autocomplete
bin/magento module:enable Codingrow_LiveSearchAutocomplete
bin/magento setup:upgrade && bin/magento setup:di:compile
bin/magento cache:flush

Rendez-vous ensuite dans Boutiques → Configuration → Codingrow → Live Search & Autocomplete, collez votre clé de licence, réglez Activer = Oui et videz le cache.

Configuration

Toutes les options se trouvent sous Boutiques → Configuration → Codingrow → Live Search & Autocomplete.

Désinstallation

Réglez Activer = Non pour le désactiver sans rien supprimer, ou retirez complètement le module :

bin/magento module:disable Codingrow_LiveSearchAutocomplete
composer remove codingrow/module-live-search-autocomplete
bin/magento setup:upgrade && bin/magento cache:flush

Recherche & synonymes

Comment ça marche

Un petit script indépendant du thème s'attache à votre champ de recherche existant (il détecte automatiquement les barres de recherche Hyvä et Luma). Pendant que le client saisit, il temporise la saisie et demande au module les produits correspondants, puis affiche un menu déroulant avec une vignette, un nom, un prix et toute remise pour chaque résultat, plus un lien « voir tous les résultats » vers la page de recherche complète. Chaque résultat renvoie directement vers la fiche produit. Les résultats respectent la visibilité du produit, le stock et le périmètre du magasin.

Performances

Les suggestions sont récupérées depuis le moteur de recherche indexé propre à Magento — le même moteur qui alimente la page de résultats (OpenSearch, Elasticsearch ou MySQL) — via la requête native quick_search_container. Parce que la correspondance est faite par l'index et non par une analyse de la base de données, le temps de réponse reste faible et n'augmente pas avec la taille du catalogue. Sur une boutique en production de 67 000 produits, les suggestions reviennent en environ une seconde et restent stables à mesure que le catalogue grandit.

Recherche sur champs étendus

Le fait que l'autocomplétion recherche uniquement le nom/SKU ou aussi la description et d'autres champs est contrôlé par Magento lui-même, par attribut — pas par un interrupteur du module. Sous Boutiques → Attributs → Produit, chaque attribut possède un indicateur « Utiliser dans la recherche » et une pondération de recherche. Par défaut, name, sku, description et short_description sont recherchables, l'autocomplétion les recherche donc déjà. Pour inclure ou exclure un champ, ou pour en faire peser un davantage, modifiez les réglages de recherche de cet attribut et réindexez — l'autocomplétion suit la même configuration que la page de résultats, et reste rapide quelle que soit la taille du catalogue.

Synonymes de recherche natifs

Le module utilise toujours les Synonymes de recherche natifs de Magento. Ajoutez-les ou modifiez-les depuis l'admin standard sous Marketing → SEO & Search → Synonymes de recherche ; l'autocomplétion les prend en compte immédiatement. Lorsqu'une requête ne renvoie rien, le module l'enrichit avec les synonymes correspondants et réessaie.

Synonymes de l'AI Personal Shopper

Si le module Codingrow AI Personal Shopper est également installé (optionnel, dépendance souple), l'autocomplétion puise en plus dans son registre de synonymes auto-apprenants — les termes régionaux, dialectaux et mal orthographiés que l'assistant a appris de vraies conversations. Cela permet même aux recherches « erronées » de correspondre aux bons produits. Activez-le avec Utiliser les synonymes de l'AI Personal Shopper = Oui. Sans ce module, l'autocomplétion fonctionne parfaitement avec les seuls synonymes natifs.

Utilisation

Comment ça s'affiche

Le menu déroulant est injecté sous votre barre de recherche existante et stylé pour ne pas gêner votre thème. Chaque ligne affiche la vignette du produit (si activée), le nom, et le prix avec toute remise ; la couleur d'accent (prix et lien « voir tous les résultats ») est configurable. La navigation au clavier (touches fléchées et Entrée) et la mise en page mobile sont gérées automatiquement.

Barre de recherche fixe

Transformez la recherche de la boutique en un en-tete compact toujours visible : lorsque le client fait defiler la page, une barre fine se fixe en haut avec le logo de la boutique, le menu, les liens compte et panier et — surtout — le champ de recherche avec le meme autocompletion en temps reel. La recherche reste a portee de regard sur chaque page, comme le font les grandes marketplaces. Independant du theme : fonctionne sur Hyva et Luma et reutilise l'action de recherche native, donc l'envoi et l'autocompletion se comportent exactement comme la recherche normale.

Sur ordinateur la barre tient sur une seule ligne. Sur mobile elle ne depasse jamais deux lignes — le menu hamburger, le logo, le compte et le panier sur la premiere ligne, le champ de recherche sur la seconde — pour tenir sur les petits ecrans sans repousser le contenu. Elle apparait lorsque le client depasse un seuil de defilement configurable et se cache a nouveau en haut de la page.

Activez-la dans Stores → Configuration → Codingrow → Live Search & Autocomplete → Appearance avec Sticky search bar = Yes (avec un seuil de defilement facultatif en pixels). La barre expose aussi un emplacement pour le bouton de recherche IA du module AI Personal Shopper, s'il est installe.

La barre fixe et ce qu'elle ne doit pas masquer

Avec la barre de recherche fixe activée, une barre compacte apparaît en haut de l'écran une fois le seuil de défilement franchi. Étant fixée, elle recouvre ce qui passe dessous : sur la fiche produit, c'est en général le titre, première ligne du bloc d'achat que le thème garde en vue. Et il resterait masqué pendant toute la page, pas seulement au passage.

« Keep pinned content clear of the sticky bar » (active par défaut) règle cela : la barre publie sa hauteur mesurée dans la propriété CSS --crls-sticky-h sur l'élément <html> — 0px tant qu'elle est masquée — et tout ce qui est ancré en haut descend exactement d'autant, puis reprend sa place quand la barre disparaît. Les liens avec ancre atterrissent eux aussi en dessous. La hauteur est mesurée, jamais codée en dur : environ 57px sur ordinateur, environ 107px sous 768px, où le champ de recherche passe sur sa propre ligne.

Les éléments épinglés dans un conteneur qui défile réellement ne sont pas touchés : ils sont ancrés à ce conteneur, pas au viewport. Vos propres gabarits peuvent lire la même propriété : top: calc(1.5rem + var(--crls-sticky-h, 0px)), dont la valeur de repli conserve le décalage d'origine là où le module n'est pas installé.

Licence

Le module utilise une licence par domaine (une clé de module unique, ou une clé d'abonnement Codingrow qui débloque tous les modules Codingrow). La clé est vérifiée localement : elle ne ralentit jamais le storefront et n'expose jamais vos données. L'autocomplétion ne s'affiche pas sans licence valide. Votre licence couvre la version actuelle plus 1 an de mises à jour et support ; vous gardez l'usage des versions couvertes pour toujours et pouvez renouveler le support (−35%) pour passer aux versions plus récentes.

Dépannage