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

Un moteur de recherche dynamique sur 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

Un exemple de ce que cela va donner:

auto

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.

J’essaye de répondre à tout le monde mais ayant énormément de mails et de commentaires ca devient difficile 🙁  alors si jamais je ne réponds ne le prenez pas mal 😉 . Bon tuto à tous

17 commentaires sur “Tuto comment mettre un système d’auto-complétion sur le moteur de recherche de Shopify

  1. Michael B

    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

      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

  2. Antoine

    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

      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

  3. Marie-Laure

    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

      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

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*
*