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.

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

Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 3 votes]

🤗 Vous souhaitez m'encourager à continuer mes Tutos ?

Cliquez sur le bouton ci-dessous pour me laisser un petit pourboire 😉

Payer un coup à Dgeo Dev

Cet article a 28 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.

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

Laisser un commentaire

Fermer le menu
×
×

Panier

Tu aimes mes Tutos & mes Articles ?

Alors n'hésites pas à m'encourager à continuer ce Blog !


Je donne 1e à Dgeo Dev

Envie de Protéger le contenu de ton site ?

Speedecom te propose l'Application Shopify Speed Defender !
Elle va te permettre de protéger ton site des copieurs et protéger tes contenus, tes médias et même empêcher les raccourcis claviers et l'affichage du code source ;) !

N'hésite pas à la tester elle est Gratuite pendant 3 jours

Tester Speed Defender

Envie de Booster ton taux de conversion ?

Speedecom a créé une nouvelle Application Shopify qui devrait te plaire !
Elle va te permettre de créer des Bundles en direct checkout !
N'hésite pas à la tester elle est Gratuite pendant 7 jours

Tester Speed Bundle

Besoin d'un developpeur ?

Si tu as un besoin particulier sur ta boutique,
n'hésite pas à me contacter et à regarder mes prestations !

Consulter mes prestations