Un moteur de recherche dynamique sur Shopify: oui c’est possible !

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 Online store – Actions – Edit Code

2 Trouvez le dossier Template et cliquez sur Add a new template 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 Snippeds et cliquez sur Add a new snipped 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 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 Save 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 Layout 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 7 votes]

Cet article a 33 commentaires

  1. Bonjour Geoffrey,

    Merci beaucoup ça fonctionne trop bien.

    Je me permets de te faire un gros bisou.

    Francine

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

  2. Bonjour,

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

    peux tu m aider ?

    merci bcp

    stephanie

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

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

  4. Hello,
    marche pas avec le theme debut, dommage.

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

    1. Bonne nouvelle 😉
      Bonne soirée

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

  6. 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. 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. 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. 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. 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. 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. 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. Cela fonctionne bien sur Ordinateur mais sur Smartphone le titre de l’article ne s’affiche pas …
    Theme: Brooklyn

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

    1. Hello, merci c’est sympa 😉

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

    1. Hello, merci pour le message et l’encouragement 🙂

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

    1. 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. 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. 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. Je croyais que j’aurai plus de mal à le faire mais finalement, réussi en un coup. Encore merci.

  16. Sur le theme Impulse cela ne fonctionne pas.

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

  17. 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. Hello, ok je vois, tu peux me contacter sur messenger je regarderai 😉

  18. 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. 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. Hello 🙂 il faudrait voir ensemble car la comme ça je ne sais pas navré 🙂 me MP au besoin 🙂

Laisser un commentaire

Fermer le menu

meilleure chaine youtube dropshipping shopify

Envie de tout savoir sur le Dropshipping & Shopify  ?

Alors abonne-toi à la chaine et active la cloche pour ne pas louper l'arrivée des prochaines vidéos !

S'abonner à la chaine