Activation des correspondances partielles et de la syntaxe des requêtes Toggles / Blogs / Perficient

La plateforme Coveo offre une expérience de recherche puissante et personnalisable. Cependant, rendre les fonctionnalités avancées telles que la correspondance partielle et la syntaxe de requête conviviales peut améliorer considérablement les interactions des utilisateurs avec votre interface de recherche. Ce blog se concentre sur la façon de mettre en œuvre ces bascules et de les intégrer de manière transparente au pipeline de requêtes Coveo.

Pourquoi une correspondance partielle et une syntaxe de requête ?

• Correspondance partielle: Ce paramètre de requête Coveo garantit que les résultats incluent des documents qui correspondent à un sous-ensemble des termes de requête de l’utilisateur. C’est particulièrement utile pour les recherches à longue traîne ou les cas où les correspondances exactes sont peu probables.
• Syntaxe de requête : Cette fonctionnalité active les opérateurs de recherche avancés (par exemple AND, OR) dans la requête de l’utilisateur, donnant ainsi aux utilisateurs expérimentés un meilleur contrôle sur leurs résultats de recherche.

L’ajout de cases à cocher pour ces fonctionnalités permet aux utilisateurs de les activer ou de les désactiver de manière dynamique, en adaptant l’expérience de recherche à leurs préférences.

Aperçu de la mise en œuvre

Étape 1 : ajouter des bascules à l’interface utilisateur

Nous avons introduit deux cases à cocher simples pour activer la correspondance partielle et la syntaxe de requête en temps réel. Voici la structure HTML :

<div class="container">
<label class="checkbox-label">
<input type="checkbox" id="partialMatchCheckbox" onclick="togglePartialMatch()" />
Partial Match
</label>
<label class="checkbox-label">
<input type="checkbox" id="querySyntaxCheckbox" onclick="toggleQuerySyntax()" />
Query Syntax
</label>
</div>

.container {
display: flex;
gap: 10px;
}

.checkbox-label {
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: bold;
display: flex;
align-items: center;
gap: 5px;
}

.checkbox-label input[type="checkbox"] {
width: 16px;
height: 16px;
cursor: pointer;
}

Étape 2 : implémenter la logique de bascule

Utilisez JavaScript pour mettre à jour dynamiquement le contexte de la requête et déclencher des modifications. Les bascules ont été rendues fonctionnelles en tirant parti de l’API Coveo Search et de l’événement buildingQuery, permettant des mises à jour en temps réel du contexte de requête en fonction de l’état des cases à cocher.

// Root element for Coveo search interface
const root = document.querySelector("#search");

/** 
* Toggles the Partial Match context parameter based on the checkbox state. 
*/

function togglePartialMatch() {
    const partialMatchCheckbox = document.querySelector("#partialMatchCheckbox");
    if (partialMatchCheckbox) {
        const isActive = partialMatchCheckbox.checked;
        if (isActive) {
            console.log("Partial Match Enabled");
            // Listen to the buildingQuery event and update the query context
            Coveo.$$(root).on("buildingQuery", (e, args) => {
                args.queryBuilder.addContext({
                    partialMatch: isActive
                });
            });
        } else {
            console.log("Partial Match Disabled");
            Coveo.$$(root).on("buildingQuery", (e, args) => {
                args.queryBuilder.addContext({
                    partialMatch: isActive
                });
            });
        }
    } else {
        console.error("Partial Match Checkbox not found!");
    }
}

/**
* Toggles the Query Syntax context parameter based on the checkbox state. 
*/

function toggleQuerySyntax() {
    const querySyntaxCheckbox = document.querySelector("#querySyntaxCheckbox");
    if (querySyntaxCheckbox) {
        const isActive = querySyntaxCheckbox.checked;
        if (isActive) {
            console.log("Query Syntax Enabled");
            Coveo.$$(root).on("buildingQuery", (e, args) => {
                args.queryBuilder.addContext({
                    enableQuerySyntax: isActive
                });
            });
        } else {
            console.log("Query Syntax Disabled");
            Coveo.$$(root).on("buildingQuery", (e, args) => {
                args.queryBuilder.addContext({
                    enableQuerySyntax: isActive
                });
            });
        }
    } else {
        console.error("Query Syntax Checkbox not found!");
    }
}

Étape 3 : Configurer les règles du pipeline de requêtes

Dans le Console d’administration Coveomodifiez votre pipeline de requêtes pour répondre aux valeurs de contexte envoyées depuis le front-end.

Configuration de correspondance partielle

Paramètre de requête : correspondance partielle

• Valeur de remplacement : vrai
• Condition : Contexte[partialMatch] est vrai

Remplacements supplémentaires:

• partialMatchKeywords : défini sur 3
• partialMatchThreshold : défini sur 35 %

Configuration de la syntaxe de requête

Paramètre de requête: activer la syntaxe de requête

• Valeur de remplacement : vrai
• Condition : Contexte[enableQuerySyntax] est vrai.

Étape 4 : Flux détaillé des paramètres de contexte

1. Interaction utilisateur : Lorsqu’un utilisateur vérifie la bascule Partial Match ou Query Syntax, la fonction JavaScript correspondante (togglePartialMatch ou toggleQuerySyntax) est déclenchée.
2. Logique frontale : L’événement buildingQuery met à jour dynamiquement le contexte de la requête avec des paramètres tels que partialMatch ou activateQuerySyntax.
   Exemple de mise à jour du contexte :

   {
      "q": "example query",
      "context": {
        "partialMatch": true,
        "enableQuerySyntax": false
      }
   }

3. Traitement back-end : La requête, accompagnée du contexte mis à jour, est envoyée au backend Coveo. Le pipeline de requête évalue les paramètres de contexte et applique les règles correspondantes, comme l’activation de partialMatch ou d’enableQuerySyntax.
4. Remplacements dynamiques : En fonction des valeurs contextuelles, les remplacements tels que partialMatchKeywords ou partialMatchThreshold sont appliqués dynamiquement.
5. Résultats en temps réel : Les résultats de recherche mis à jour sont affichés à l’utilisateur sans nécessiter de rechargement de la page.

Avantages de cette approche

• Contrôle utilisateur amélioré : permet aux utilisateurs d’adapter dynamiquement les résultats de recherche à leurs besoins.
• Mises à jour en temps réel : les paramètres de recherche sont mis à jour immédiatement, sans rechargement.
• Configuration flexible : le comportement des requêtes peut être ajusté via la console d’administration sans modifier le code du frontend.
• Évolutif : facilement extensible pour d’autres bascules ou fonctionnalités avancées.

Les résultats

Une fois ces bascules en place, les utilisateurs peuvent :

• Basculez sans effort entre l’activation et la désactivation de la correspondance partielle et de la syntaxe de requête.
• Bénéficiez de résultats de recherche améliorés, adaptés à leur style de saisie.

Résultats partiels du match :

Résultats de la syntaxe de la requête :

Conclusion

Tirer parti des capacités de contexte et de pipeline de requêtes de Coveo peut vous aider à offrir une expérience de recherche hautement interactive et dynamique. La combinaison des bascules de l’interface utilisateur et du traitement backend permet aux utilisateurs de contrôler leur expérience de recherche et garantit que les résultats correspondent à leurs préférences.

Implémentez cette fonctionnalité dès aujourd’hui et faites passer votre interface de recherche Coveo au niveau supérieur !

Liens utiles

À propos du contexte personnalisé | Apprentissage automatique Coveo

Contexte du pipeline | Cadre de recherche Coveo JavaScript – Documentation de référence

Profiter de la fonctionnalité de correspondance partielle | Plateforme Coveo

Syntaxe de requête | Plateforme Coveo