Comment mettre un système d’auto-complétion sur le moteur de recherche de Shopify ?

Nous allons voir comment créer un système de recherche dynamique qui permettra au client de trouver plus facilement et rapidement son produit

Dés qu’il va commencer à taper sa recherche une proposition de produits lui sera proposé ! Ce système permet d’augmenter considérablement votre taux de conversion

Création du Template

1 Rendez vous dans Boutique en ligne – Actions – Modifier Code

2 Trouvez le dossier Template et cliquez sur Ajouter une nouvelle ressource et nommez le search et dans Called mettez « json »

3 Supprimez le code de votre nouveau template search.json.liquid et mettez le code ci-dessous et cliquez sur Save

{% layout none %}
{% capture results %}
  {% for item in search.results %}
    {% assign product = item %}
    { 
      "title"    : {{ product.title | json }},
      "url"      : {{ product.url | within: product.collections.last | json }},
      "thumbnail": {{ product.featured_image.src | product_img_url: 'thumb' | json }}
    }
    {% unless forloop.last %},{% endunless %}
  {% endfor %}
{% endcapture %}
{
  "results_count": {{ search.results_count }},
  "results": [{{ results }}]
}

Création du Snipped

1 Trouvez le dossier Extraits (Snippets) et cliquez sur Ajouter une nouvelle ressource et nommez le search-autocomplete 

2 Supprimez le code de votre nouveau template search-autocomplete.liquid et mettez le code ci-dessous et cliquez sur Save

{% comment %} Width of results box {% endcomment %}
{% assign results_box_width = '242px' %}
{% comment %} Background color of results box {% endcomment %}
{% assign results_box_background_color = '#ffffff' %}
{% comment %} Border color of results box {% endcomment %}
{% assign results_box_border_color = '#d4d4d4' %}

<script>
$(function() {
  // Current Ajax request.
  var currentAjaxRequest = null;
  // Grabbing all search forms on the page, and adding a .search-results list to each.
  var searchForms = $('form[action="/search"]').css('position','relative').each(function() {
    // Grabbing text input.
    var input = $(this).find('input[name="q"]');
    // Adding a list for showing search results.
    var offSet = input.position().top + input.innerHeight();
    $('<ul class="search-results"></ul>').css( { 'position': 'absolute', 'left': '0px', 'top': offSet } ).appendTo($(this)).hide();    
    // Listening to keyup and change on the text field within these search forms.
    input.attr('autocomplete', 'off').bind('keyup change', function() {
      // What's the search term?
      var term = $(this).val();
      // What's the search form?
      var form = $(this).closest('form');
      // What's the search URL?
      var searchURL = '/search?type=product&q=' + term;
      // What's the search results list?
      var resultsList = form.find('.search-results');
      // If that's a new term and it contains at least 3 characters.
      if (term.length > 3 && term != $(this).attr('data-old-term')) {
        // Saving old query.
        $(this).attr('data-old-term', term);
        // Killing any Ajax request that's currently being processed.
        if (currentAjaxRequest != null) currentAjaxRequest.abort();
        // Pulling results.
        currentAjaxRequest = $.getJSON(searchURL + '&view=json', function(data) {
          // Reset results.
          resultsList.empty();
          // If we have no results.
          if(data.results_count == 0) {
            // resultsList.html('<li><span class="title">Pas de résultat.</span></li>');
            // resultsList.fadeIn(200);
            resultsList.hide();
          } else {
            // If we have results.
            $.each(data.results, function(index, item) {
              var link = $('<a></a>').attr('href', item.url);
              link.append('<span class="thumbnail"><img src="' + item.thumbnail + '" /></span>');
              link.append('<span class="title">' + item.title + '</span>');
              link.wrap('<li></li>');
              resultsList.append(link.parent());
            });
            // The Ajax request will return at the most 10 results.
            // If there are more than 10, let's link to the search results page.
            if(data.results_count > 10) {
              resultsList.append('<li><span class="title"><a href="' + searchURL + '">Voir tous les résultats (' + data.results_count + ')</a></span></li>');
            }
            resultsList.fadeIn(200);
          }        
        });
      }
    });
  });
  // Clicking outside makes the results disappear.
  $('body').bind('click', function(){
    $('.search-results').hide();
  });
});
</script>

<!-- Some styles to get you started. -->
<style>
.search-results {
  z-index: 8889;
  list-style-type: none;   
  width: {{ results_box_width }};
  margin: 0;
  padding: 0;
  background: {{ results_box_background_color }};
  border: 1px solid {{ results_box_border_color }};
  border-radius: 3px;
  -webkit-box-shadow: 0px 4px 7px 0px rgba(0,0,0,0.1);
  box-shadow: 0px 4px 7px 0px rgba(0,0,0,0.1);
  overflow: hidden;
}
.search-results li {
  display: block;
  width: 100%;
  height: 38px;
  margin: 0;
  padding: 0;
  border-top: 1px solid {{ results_box_border_color }};
  line-height: 38px;
  overflow: hidden;
}
.search-results li:first-child {
  border-top: none;
}
.search-results .title {
  float: left;
  width: {{ results_box_width | remove: 'px' | to_number | minus: 50 }}px;
  padding-left: 8px;
  white-space: nowrap;
  overflow: hidden;
  /* The text-overflow property is supported in all major browsers. */
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-align: left;
}
.search-results .thumbnail {
  float: left;
  display: block;
  width: 32px;
  height: 32px;    
  margin: 3px 0 3px 3px;
  padding: 0;
  text-align: center;
  overflow: hidden;
}
</style>

3 Rendez-vous ensuite dans le dossier Mise en page (Layout) et trouvez le fichier theme.liquid 

4 Rendez-vous tout en bas du fichier et vous devez trouver le bout de code suivant: </body> Vous allez coller le code ci dessous juste avant celui-ci !

{% include 'search-autocomplete' %}

Il ne vous reste plus qu’à cliquer sur Enregistrer et tester le moteur de recherche en tapant un mot de + de 3 lettres

Ce mot doit être comprit dans le titre ou la description du produit

Attention si le tuto ne fonctionne pas il se peut que votre thème n’ai pas jquery d’installé comme le thème début ! dans ce cas il vous suffit d’ajouter cette ligne de code dans le dossier Mise en page et trouvez le fichier theme.liquid avant la fermeture du </head>

<script src="//code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>

PS: Merci à tous pour vos sympathiques messages et commentaires.

Inclus dans Speedfly
Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 9 votes]

Besoin d'aide ?

Vous avez un problème pour faire fonctionner ce tutoriel ou vous avez un besoin spécifique ?
Nous pouvons le faire pour vous ! pour ce faire merci de prendre contact avec notre équipe.

En savoir plus

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Besoin de déléguer votre SAV ?

Si vous avez besoin d'une personne pour gérer votre SAV j'ai la perle rare 😉 contactez moi en MP ou cliquez sur le bouton ci-dessous:

Je veux déléguer mon SAV

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Cet article a 40 commentaires

  1. Francine HO A TCHUNG

    14 Avr 2018 Répondre

    Bonjour Geoffrey,

    Merci beaucoup ça fonctionne trop bien.

    Je me permets de te faire un gros bisou.

    Francine

    1. Dgeo GD

      14 Avr 2018 Répondre

      Bonjour Francine !
      Merci pour le message et le bisou 😀 c’est gentil
      Bon WE

  2. STEPHANIE

    16 Avr 2018 Répondre

    Bonjour,

    je viens d’essayer ce nouveau tuto mais cela ne fonctionne pas …

    peux tu m aider ?

    merci bcp

    stephanie

  3. cyril

    17 Avr 2018 Répondre

    Bonjour, Le thème Début fait il encore exception pour ce tuto?

    1. Dgeo GD

      17 Avr 2018 Répondre

      Bonjour, je n’ai pas testé sur ce thème mais a priori pas d’incompatibilité

  4. Kach

    18 Avr 2018 Répondre

    Hello,
    marche pas avec le theme debut, dommage.

  5. Cyril

    19 Avr 2018 Répondre

    Je regrette d’avoir prit le thème Début …. Ma prochaine boutique sera faite avec Speedfly

    1. Dgeo GD

      21 Avr 2018 Répondre

      Bonne nouvelle 😉
      Bonne soirée

      1. cyril

        26 Avr 2018 Répondre

        Voilà thème acheté et vraiment aucun regret ! Super thème Merci pour tout ton travail

  6. Michael B

    23 Avr 2018 Répondre

    Bonjour,

    petite précision pour les personnes chez qui ça ne fonctionne pas (nottament avec le theme debut). Il est necessaire d’avoir jQuery pour que cela fonctionne.

    Un simple ajout de :

    Dans la section head de votre theme.liquid devrait etre suffisant. Attention à la version également puisque certains plugins shopify ne fonctionnent qu’avec des version 2.X.

    Ce serait pas mal d’ajouter ça au tuto, car j’ai l’impression que pas mal de gens l’oublient.

    1. Dgeo GD

      23 Avr 2018 Répondre

      Bonjour Michael ! Oui c’est juste merci pour la précision, je vais adapter le tuto en conséquence merci pour le tips 😉 n’ayant pas le temps de tester sur tous les thème de la terre il est important d’avoir des retours 😉 Bonne journée

  7. Manu

    29 Avr 2018 Répondre

    Bonjour,

    J’ai le thème « Supply » et ça fonctionne

    Merci beaucoup et continue à nous créer des lignes de codes c’est super !

    Bonne soirée

  8. Antoine

    10 Mai 2018 Répondre

    Bonjour,

    Merci beaucoup ça marche nickel.

    j’ai une petit question:
    Je voudrais savoir si c’est possible de créer plusieurs filtre.

    Exemple le premier filtre : type de vêtement : t-shirt, veste, pantalon, pull ect…
    Exemple deuxième filtre : la taille : 10 ans, 12 ans, S, XL ect…

    Je sais que l’on peut créer des filtres avec les tags, mais je n’arrive pas à faire un autre filtre pour les tailles.

    Merci de me répondre pour savoir si c’est possible

    Bonne continuation !!

    1. Dgeo Dev

      15 Mai 2018 Répondre

      Bonjour, merci pour le com
      Tout dépend du thème certains le proposent et effectivement c’est possible en jouant avec les tags et le groupe de tags

  9. Marie-Laure

    24 Mai 2018 Répondre

    Merci beaucoup pour ce super tuto Dgeo.
    Il fonctionne parfaitement avec le thème Début, grâce au bout de code que tu as donné pour installer JQuery.
    Il faut avoir une grande confiance en toi et ne pas avoir peur pour pouvoir installer tout ça, j’avais le coeur qui battait fort 🙂
    Peut-être un prochain tuto sur comment sauvegarder son thème avant de modifier le code serait utile, sauf si tu l’a déjà donné. Merci.
    Trop génial.

    1. Dgeo Dev

      24 Mai 2018 Répondre

      Salut et merci pour le commentaire 🙂 Oui c’est vrai, il est important de sauvegarder et même de sauvegarder la sauvegarde et ainsi de suite, c’est la règle numéro 1 en informatique 🙂
      Bonne soirée

  10. Mario Sire

    9 Oct 2018 Répondre

    Cela fonctionne bien sur Ordinateur mais sur Smartphone le titre de l’article ne s’affiche pas …
    Theme: Brooklyn

  11. paul

    20 Déc 2018 Répondre

    Bonjour. Vous faite vraiment un super job. Continuez comme ca!!!!!!!Merci

    1. Dgeo Dev

      20 Déc 2018 Répondre

      Hello, merci c’est sympa 😉

  12. HybrideCobaye

    24 Avr 2019 Répondre

    Merci pour ces tutos qui nous permettent d’améliorer nos boutiques. Continuez comme ça.

    1. Dgeo Dev

      24 Avr 2019 Répondre

      Hello, merci pour le message et l’encouragement 🙂

  13. fasquel

    2 Mai 2019 Répondre

    j’ai testez mais il ne fonctionne pas chez moi j’utilise le thème minimal

    1. Dgeo Dev

      7 Mai 2019 Répondre

      Arf 🙁 faudra faire F12 sur chrome pour voir si vous avez des erreurs rouge sur votre thème… ce qui pourrait causer le non fonctionnement.

  14. Nathan

    19 Mai 2019 Répondre

    Salut il marche impeccable sur le thème Venture merci beaucoup !
    J’aurai aimé savoir, comment faire lorsque la recherche dynamique s’affiche à l’écran après avoir écris un mot, puis que l’utilisateur pointe sa souris sur un menu par exemple et l’ouvre en ‘hover’, pour que la recherche dynamique disparaisse? Parce que sinon tant que le dropdown de la recherche est ouvert, il ne disparaît qu’après avoir cliqué sur un des produits seulement !
    Merci d’avance en espérant que tu es comrpis ^^

    1. Dgeo Dev

      25 Mai 2019 Répondre

      Bonjour et merci pour le message. Alors la c’est assez complexe et dépend du thème. En gros il faut une intervention technique d’un pro 😉

  15. Andriano

    2 Oct 2019 Répondre

    Je croyais que j’aurai plus de mal à le faire mais finalement, réussi en un coup. Encore merci.

  16. Clément

    19 Nov 2019 Répondre

    Sur le theme Impulse cela ne fonctionne pas.

    1. Dgeo Dev

      20 Nov 2019 Répondre

      Hello, navré je ne connais pas ce thème. si c’est un officiel du store shopify il devrait fonctionner 🙂

  17. John

    15 Déc 2019 Répondre

    Salut ! Un grand Merci pour tes tutos! Tu apportes beaucoup à chacune des personnes qui les appliquent.
    Sur PC, tout fonctionne pour moi mais je souhaiterais mettre en 1er plan le déroulé des suggestions de la recherche. J’ai mon menu en header qui vient « s’emmêler » avec ce déroulé.

    Sur smartphone, comme le déroulé est en second plan, celui-ci est coupé par la photo de couverture.

    Malheureusement, ce très bon tuto n’est pas exploitable en l’état…

    Pourrais-tu m’aider à modifier la partie de code concernée afin d’avoir le rendu souhaité?

    Merci à toi !

    Amicalement,
    John

    1. Dgeo Dev

      16 Déc 2019 Répondre

      Hello, ok je vois, tu peux me contacter sur messenger je regarderai 😉

  18. Florian

    10 Juin 2020 Répondre

    Bonjour, merci pour ce tuto ainsi que tous les autres d’ailleurs, ca fonctionne par contre je n’ai pas le nom en entier qui s’affiche, j’ai juste la 1er partie
    tous mes produits ont une balise pour le coté esthétique. Est-ce à cause de cela? dois je changer qq chose?
    je suis sur le thème Venture

  19. Florian

    11 Juin 2020 Répondre

    Bonjour, mon message a du être supprimé par erreur car je ne le vois plus.

    Merci pour tous ces tutos ainsi que celui-ci qui fonctionne super bien.
    Je rencontre juste un problème car le nom du produit n’est pas affiché en entier. j’utilise la balise pour plus d’esthétisme, c’est peut être la cause.
    En regardant j’ai vu que
    .breadcrumbs br {
    display: none;
    }
    pourrait faire l’affaire mais je n’y connais presque rien donc aucune idée ou le placer. Avez-vous une idée ?

    Merci d’avance et bonne journée

    1. Dgeo Dev

      11 Juin 2020 Répondre

      Hello 🙂 il faudrait voir ensemble car la comme ça je ne sais pas navré 🙂 me MP au besoin 🙂

  20. FoxFox

    2 Août 2020 Répondre

    Excellent, merci beaucoup !!

  21. LEYDET

    4 Jan 2021 Répondre

    rhaalllaaalla à chaque fois que j’utilise vos tutos je me prends pour une déesse du code 🙂 merci ca fonctionne et bravo encore !

    1. Dgeo Dev

      5 Jan 2021 Répondre

      héhé cool 🙂

  22. dams

    30 Juil 2021 Répondre

    le .json ne s’enregistre pas, message d’erreur: Ce fichier contient les erreurs suivantes – Error: Invalid JSON: unexpected token. Je suis sur Brookyn

    1. Dgeo Dev

      30 Juil 2021 Répondre

      Oui Brooklyn est codé bizarrement le mieux serait de prendre speedfly c’est inclus et la majorité des tutos également mais en + évolué

  23. Fleur

    2 Fév 2022 Répondre

    Bonjour,

    J’ai le thème Supply, cela fonctionne parfaitement pour la version ordinateur !
    Par contre sur mobile les libellés d’articles ne s’affiche pas … Une solution pour résoudre ce soucis ?

    Aussi, Comment modifier la couleur et police des suggestions ?

    Par avance merci pour tous vos tutos !

    1. Dgeo Dev

      3 Fév 2022 Répondre

      Bonjour, ca dépend bcp des thèmes malheureusement ils ne sont pas tous codés pareil 🙁
      Pour toutes les demandes il faudrait une mini intervention car c’est impossible d’expliquer par écrit 🙂

Laisser un commentaire

Fermer le menu
×
×

Panier