[PrestaShop] Accélérez la recherche dans les tableaux

PrestaShop
  • Accueil
  • Blog
  • [PrestaShop] Accélérez la recherche dans les tableaux

Je vais vous présenter dans cet article une technique simple et rapide à mettre en place pour améliorer la vitesse de recherche d’une information dans un tableau de votre boutique PrestaShop. C’est parti !

 

Suis-je concerné par cette optimisation de la recherche ?

Il est fort probable que oui car voici des cas de figure où la recherche d’un tableau peut être optimisée :
CAS N°1 : si vous utilisez un tableau avec des déclinaisons ou variantes de votre produit. Si le tableau est long, vos clients vont perdre du temps à chercher l’information pertinente nécessaire à l’achat. Simplifiez-leur le travail !
recherche-prestashop-optimisee
 
CAS N°2 : si vous proposez à la vente des produits techniques avec un tableau de caractéristiques très long. Dans ce cas, même constat : la recherche est pénible alors simplifiez la navigation avec une recherche !
CAS N°3 : si votre marché est orienté BtoB et que vos clients professionnels ont besoin de retrouver rapidement leurs clients dans le tableau des commandes PrestaShop sur le front office. Il ne faut pas oublier que pour des professionnels distributeurs, PrestaShop est dans certains cas un outil de vente.
Il existent sûrement d’autres applications de ce tuto PrestaShop car du moment qu’il y a un tableau avec besoin de chercher une information à l’intérieur, alors on peut utiliser cette astuce 😉
 

Tuto PrestaShop : simplifier la recherche d’un table

Avant de vous expliquer comment faire, voici la démonstration de la recherche pour tableau :

Name Country
Alfreds Futterkiste Germany
Berglunds snabbkop Sweden
Island Trading UK
Koniglich Essen Germany
Laughing Bacchus Winecellars Canada
Magazzini Alimentari Riuniti Italy
North/South UK
Paris specialites France

 

1. Localisez le tableau à optimiser et insérer la recherche

Pour optimiser la recherche de votre tableau, il vous faut un tableau : logique ! Localisez le fichier tpl où se situe ce tableau pour y insérer juste avant le code suivant qui va permettre d’afficher la barre de recherche pour le tableau :

  • Pour PrestaShop 1.4 / 1.5 / 1.6 :
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="{l s='Recherche'}" title="{l s='Recherche'}">
  • Pour PrestaShop 1.7 :

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="{l s='Recherche' d='Shop.Theme.Global'}" title="{l s='Recherche' d='Shop.Theme.Global'}">

 

2. Ajouter le script de recherche

Ajoutez ensuite un peu de javascript pour que la recherche soit effective dans votre tableau :

  • Pour PrestaShop 1.4 / 1.5 / 1.6 au début du fichier www/themes/votre_theme/global.js
  • Pour PrestaShop 1.7 au début du fichier www/themes/votre_theme/assets/js/custom.js

function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}

A noter que vous pouvez changer l’id du champ de recherche dans le tpl et le js. Pour l’exemple, l’id est « myInput ».
Idem pour l’id du tableau qui est « myTable » dans le js. Votre tableau devra donc avoir l’id « myTable ».
 

3. Mettre du style CSS

Voici un bout de code CSS pour mettre en forme très rapidement votre champ de recherche même si par défaut le thème PrestaShop que vous utilisez risque se charger de le mettre en forme :

#custom-search-input input{
    border: 0;
    box-shadow: none;
    padding: 3px 10px;
    border: solid 1px #E4E4E4;
    border-radius: 3px;
    background-color: #fff;
    width: 100%;
    color: #000;
    margin-bottom: 15px;
}

 
Voici un résultat concret de l’application de ce tuto PrestaShop :
tuto-prestashop-recherche-optimisee
 
Voici également une application de ce tuto sur WooCommerce car ça fonctionne très bien aussi sur WordPress 😉
accelerez-recherche-tableaux-prestashop-1
 
J’espère que ce tuto PrestaShop mêlant un peu de développement et d’intégration vous a plu et qu’il sera utile à certains d’entre vous !
 

Laisser un commentaire

Consultez les autres articles