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.

« Comment organiser son temps en Dropshipping

Comment être conforme RGPD sur Shopify »

Cet article a 40 commentaires

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
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
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é
Kach
18 Avr 2018 Répondre

Hello,
marche pas avec le theme debut, dommage.
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
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
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
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
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
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
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 😉
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 🙂
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.
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 😉
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.
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 🙂
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 😉
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
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 🙂
FoxFox
2 Août 2020 Répondre

Excellent, merci beaucoup !!
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 🙂
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é
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 🙂

Création du Template

Création du Snipped

Besoin d'aide ?

🤗 Vous souhaitez me remercier pour mes Tutos ?

Besoin de déléguer votre SAV ?

🤗 Vous souhaitez me remercier pour mes Tutos ?

Vous devriez également aimer

Comment créer un bouton ajouter au panier dans les collections sur Shopify

Comment créer un Badge « Nouveauté » sur Shopify

Comment créer une Free shipping bar pour avoir la livraison Offerte sur Shopify ?

Cet article a 40 commentaires

Francine HO A TCHUNG

Dgeo GD

STEPHANIE

cyril

Dgeo GD

Kach

Cyril

Dgeo GD

cyril

Michael B

Dgeo GD

Manu

Antoine

Dgeo Dev

Marie-Laure

Dgeo Dev

Mario Sire

paul

Dgeo Dev

HybrideCobaye

Dgeo Dev

fasquel

Dgeo Dev

Nathan

Dgeo Dev

Andriano

Clément

Dgeo Dev

John

Dgeo Dev

Florian

Florian

Dgeo Dev

FoxFox

LEYDET

Dgeo Dev

dams

Dgeo Dev

Fleur

Dgeo Dev

Laisser un commentaire Annuler la réponse

Panier