La page FAQ de Kestrel était devenue si longue que les clients passaient devant la réponse qu’ils cherchaient. Le marchand nous a montré la page d’aide d’un concurrent avec un champ de recherche dans l’en-tête et a demandé la même chose : taper un mot, ne voir que les questions correspondantes.
Voici l’histoire de cette recherche FAQ Shopify : le snippet, le bug qui empêchait la première version de trouver quoi que ce soit sur la boutique en ligne, et le correctif, qui s’est révélé être une leçon sur les scripts en ligne dans les thèmes Shopify.
À propos de cette étude de cas : il s’agit d’un récit composite fondé sur de vrais projets Shopify. Le nom de la marque et certains détails ont été modifiés. Le code, le bug et le correctif sont exactement ce qui s’est passé.
Pourquoi ne pas utiliser la recherche de Shopify ?
La recherche de la boutique Shopify couvre les produits, les collections, les pages et les articles de blog. Le texte saisi dans les blocs de sections du thème, là où la plupart des sections FAQ stockent leurs questions, ne fait pas partie de cet index. Un client qui cherche « retour » trouve des produits, pas la réponse sur les retours.
Les réponses de la FAQ sont pourtant déjà dans le HTML de la page. Les filtrer dans le navigateur ne demande ni requête, ni application, ni index. Les résultats apparaissent pendant que le client tape encore.
Version un : un snippet et une ligne de rendu
Le marchand modifie le thème dans l’éditeur de code, nous avons donc gardé le changement aussi petit que possible : un nouveau snippet avec le balisage, les styles et le script, et une ligne dans la section FAQ pour l’afficher.
{%- render 'faq-search', section: section -%}
<div class="faqs ..."> <!-- the theme's existing FAQ markup -->Le script est un petit élément personnalisé. À chaque saisie, il fait quatre choses :
- Il normalise le texte : minuscules et sans accents, pour que « e » trouve aussi « é ».
- Il découpe la recherche en mots et ne garde une question que si elle les contient tous, dans le titre ou dans la réponse.
- Il masque une catégorie entière, titre compris, quand aucune de ses questions ne correspond.
- Il affiche le message « aucune question trouvée » avec une invitation à contacter le support quand rien ne correspond.
Nous l’avons testé sur une copie du balisage de la FAQ dans un navigateur sans interface. Chaque recherche renvoyait les bonnes questions. Nous l’avons envoyé.
La capture d’écran
La réponse est arrivée avec une capture d’écran. Le marchand avait collé une phrase entière d’une réponse dans le champ de recherche. La page affichait « aucune question trouvée », et toutes les questions restaient visibles en dessous. Rien n’était masqué, rien n’était trouvé.
Les deux symptômes indiquaient la même chose : le script croyait que la page n’avait aucune question. Nous avons ouvert la page en ligne et interrogé l’élément directement. La page comptait deux groupes de FAQ et sept questions. La liste de groupes de l’élément de recherche était vide.
La cause : un script en ligne qui s’exécute trop tôt
Le snippet s’affiche au-dessus des questions, et sa balise <script> se trouve dans le snippet. Le navigateur lit le HTML de haut en bas. En arrivant au script, il définit l’élément personnalisé et, comme <faq-search> est déjà dans le document, son connectedCallback s’exécute aussitôt. À ce moment, l’analyseur n’a pas encore atteint les questions en dessous.
Notre première version cherchait les groupes de la FAQ dans connectedCallback et les mémorisait. Elle a mémorisé une liste vide, une fois pour toutes. Notre test avait réussi parce que la page de test plaçait par hasard le script après les questions.
Le correctif tient en un getter. Au lieu de mémoriser les groupes au branchement de l’élément, le script les cherche à chaque frappe :
get groups() {
return Array.from(this.closest('.section').querySelectorAll('.faq'));
}Quand quelqu’un tape, la page est entièrement lue. La recherche ne coûte presque rien pour quelques dizaines de questions et continue de fonctionner quand l’éditeur de thème réaffiche la section pendant que le marchand la modifie, ce qu’une liste mémorisée ne permettrait pas.
Un second bug, plus discret
En déplaçant le code dans son snippet définitif, nous avons trouvé un autre problème. La règle CSS qui masquait les éléments filtrés était écrite .faq [data-faq-hidden], avec une espace. Elle masque les questions à l’intérieur d’un groupe, mais pas le groupe lui-même, si bien qu’un titre de catégorie pouvait rester affiché sans rien dessous. La règle couvre maintenant les deux cas : .faq [data-faq-hidden], .faq[data-faq-hidden].
Tester là où cela tourne vraiment
Cette fois, nous avons testé sur la vraie page FAQ, en exécutant la logique corrigée dans le navigateur sur le balisage réel, avant de demander au marchand de changer quoi que ce soit.
| « levertijd » | Seulement la question sur le délai de livraison |
| « garantie » | Les questions de garantie de deux catégories différentes |
| « €70 gratis » | Seulement la question sur les frais de port, trouvée par sa réponse |
| « retour » | Seulement la question sur les retours, l’autre catégorie masquée |
| « xyz » | Rien, avec le message « aucune question trouvée » |
Ce que nous en retenons
- Testez dans l’ordre de la vraie page. Un élément personnalisé défini dans un script en ligne ne voit que le HTML au-dessus de lui.
- Ne mémorisez pas de requêtes DOM dans
connectedCallbacksans savoir que le contenu existe déjà. Un getter est plus simple qu’attendreDOMContentLoadedet résiste aux réaffichages de l’éditeur de thème. - Quand un marchand envoie une capture, lisez les symptômes ensemble. « Aucun résultat » plus « rien de masqué » a cerné le bug avant même d’ouvrir la console.
La recherche a ensuite intégré une page d’aide complète ; nous la décrivons dans notre étude de cas sur un modèle de page FAQ Shopify. L’offre de fiche produit réalisée pour la même boutique est présentée dans le sélecteur un acheté, un offert. Si votre FAQ ou une autre partie de votre thème a besoin de ce type de travail, découvrez notre service de développement de thèmes Shopify.
Questions fréquentes
Une barre de recherche dans la FAQ nuit-elle au SEO ?
Non. Toutes les questions et réponses restent dans le HTML. Elles ne sont masquées que dans le navigateur du client, après sa saisie.
Faut-il une application pour ajouter une recherche à une FAQ Shopify ?
Non. Comme les questions sont déjà sur la page, un petit script peut les filtrer. C’est plus rapide qu’une application et sans coût mensuel.
Cela fonctionne-t-il avec une grande FAQ ?
Oui. Filtrer quelques centaines de questions dans le navigateur est instantané. Au-delà, mieux vaut de toute façon répartir la FAQ sur plusieurs pages.
La recherche porte-t-elle aussi sur les réponses ?
Oui. Chaque question est comparée sur son titre et sur le texte de sa réponse, sans accents, et tous les mots de la recherche doivent y figurer.