Forum CMS Made Simple FR
Module Cataloger : trier facilement les articles grâce à Jquery - Version imprimable

+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Ressources (https://forum.cmsmadesimple.fr/forum-4.html)
+--- Forum : Développement et Astuces (https://forum.cmsmadesimple.fr/forum-15.html)
+--- Sujet : Module Cataloger : trier facilement les articles grâce à Jquery (/thread-1141.html)


Module Cataloger : trier facilement les articles grâce à Jquery - nicks - 01/04/2011

[cette astuce est réalisée avec CMSMS 1.9.4.1, CATALOGER 0.9 et la version 2.0.5 du plugin Tablesorter et il est indispensable de pouvoir se connecter au FTP de son site pour y ajouter le script]

Bonjour,
Un des principaux problèmes du module cataloger (catalogue) est son absence de tri des articles en mode catégorie (il est prévu par défaut de pouvoir lister les articles par ordre alphabétique ou par ordre de navigation, ce qui peut se révéler insuffisant assez rapidement...).

La solution proposée ici, est loin d'être idéale, mais a le mérite d'être facile et rapide à mettre en place. L’inconvénient principal étant que si javascript est désactivé côté client (le navigateur de l’internaute), ce tri sera tout simplement impossible.
Le plugin Jquery Tablesorter va nous permettre de trier très facilement les entrées d’un tableau. Pour illustrer cette astuce, nous allons créer une fausse liste d’annonces immobilières que nous souhaitons pouvoir trier par prix et par nombre de pièces.

1. On installe le module « cataloger », on télécharge Tablesorter (http://tablesorter.com/docs/), on le dézippe et on récupère le script : « jquery.tablesorter.min.js », les images et les styles CSS d’un des thèmes (blue ou green)

2. On modifie le gabarit de page utilisé pour la partie annonce (dans l’admin : disposition > Gabarits > *gabarit à utiliser*) pour y ajouter un lien vers Jquery et Tablesorter (qu’on aura parallèlement transféré sur le ftp).
On ajoute également le script qui va permettre d’identifier le tableau qui pourra être trié et sa configuration (je l'expliquerai plus loin).
On se retrouve ainsi avec un gabarit contenant entre <head> et </head> :
Code :
<script type="text/javascript" src=" lib/jquery/js/ jquery-1.4.2.min.js"/></script>
<script type="text/javascript" src=" lib/jquery/js/ jquery.tablesorter.min.js  "/></script>
    {literal}
    <script type="text/javascript">
        $(document).ready(function() {
           $("table").tablesorter({
                headers: {
                    0: {
                        sorter: false
                    },
                    1: {
                        sorter: false
                    },
                                        
                    4: {
                        sorter: false
                    }
                }
            });
        });
    </script>
{/literal}

3. Ensuite, nous allons paramétrer le module cataloger pour qu’il s’adapte à nos besoins ( Dans l’admin : « Extension > Catalogue » .)
« Gestion des attributs défini par l’utilisateur » : on commence par créer les champs personnalisés pour les « Attributs d’Articles », parmi lesquels le prix et le nombre de pièces. Dans l’onglet, on créait ainsi deux champs de type « text » avec comme noms « Prix » et « Nombre de pièces » (on peut choisir des alias pour faciliter la construction des gabarits, on évitera alors de mettre des espaces et des accents - ex : « prix » et « pieces »).

4. Il est ensuite temps de personnaliser les gabarits du module Cataloger.
Pour le gabarit du détail de l’annonce, il n’y a rien de particulier à savoir, vous pouvez le construire tel que vous le désirez ou simplement utiliser un gabarit existant : « Item CSS based » ou « Item Table based ».
Ce qui nous intéresse ici c’est le gabarit de la liste des annonces. Pour permettre le tri, nous allons donc utiliser le plugin Jquery « tablesorter » qui permet donc de trier les entrées d’un tableau (correspondant à la balise html <table>).
Il est donc primordial de construire un gabarit sous forme de tableau, nous allons donc adapter le gabarit : « Category-Table-based » par exemple de cette manière :

Code :
<table class="tablesorter" cellspacing="0" cellpadding="0">
<thead>
<tr>
    <th></th>
    <th></th>
    <th class="pieces">Nbre de pièces</th>
    <th class="prix">Prix</th>
    <th></th>
</tr>
</thead>
<tbody>
     {section name=numloop loop=$items}
    <tr>
        <td>
            <div class="img-loader-thumb"><a href="{$items[numloop].link}"><img src="{$items[numloop].image}" title="{$items[numloop].title}" alt="{$items[numloop].title}"/></a></div>
        </td>
         <td class="left">
            <h2><a href="{$items[numloop].link}">{$items[numloop].title}</a></h2>
        </td>
        <td class="pieces">
            {$items[numloop].pieces}
        </td>
        <td class="prix">
            {$items[numloop].prix}
        </td>
        <td>
            <a href="{$items[numloop].link}"><img src="images/loupe.png" alt="voir l'annonce"/></a>
        </td>
    {/section}
</tbody>
</table>

Quelques explications s'imposent...
Déjà, il faut créer les en-têtes (th) qui vont indiquer au plugin ce qu'il faut trier :
Code :
<thead>
<tr>
    <th></th>
    <th></th>
    <th class="pieces">Nbre de pièces</th>
    <th class="prix">Prix</th>
    <th></th>
</tr>
</thead>

Ensuite, par rapport au gabarit proposé par défaut, plutôt que de proposer une annonce par cellule (td), il faut en proposer une par ligne (tr). Ceci va nous permettre d'identifier nos items (prix et nombre de pièces) dans des cellules (td) indépendantes et donc permettre le tri. Pour rappel :
Code :
<td class="pieces">
  {$items[numloop].pieces}
</td>
<td class="prix">
   {$items[numloop].prix}
</td>
Ensuite, il faut attribuer une classe à la balise <table>, ici on a choisi "tablesorter" (on peut prendre autre-chose, mais il faut alors également modifier le script dans le gabarit de page).
Code :
<table class="tablesorter" cellspacing="0" cellpadding="0">

Et puis c'est tout, il est maintenant possible de trier de manière croissante ou décroissante les annonces par prix ou par nombre de pièces (si ces champs sont renseignés au moment où on rédige l'annonce bien sur!). Il est également possible de combiner le tri en maintenant "schift", mais je vous laisse consulter la doc de tablesorter pour en savoir plus!

Avant de terminer, quelques mots sur le script dans le gabarit de page :
Code :
headers: {
0: {
sorter: false
},
1: {
sorter: false
},
                                        
4: {
sorter: false
}

La première entrée d'un tableau (array) en js est 0. Dans le cas de cet exemple, je souhaitais que le tri ne soit possible QUE par le prix et le nombre de pièces (permettre le tri par le titre ou l'image n'a pas de sens), du coup j'ai indiqué dans le script que les entrées 0, 1 et 4 correspondant à l'image, le titre et le lien "voir l'annonce" ne peuvent être triées : sorter: false.

Une fois encore, consultez la doc du plugin si ce n'est pas clair, ou pour en savoir plus sur les options dispos. Smile

Pour finir, on peut inclure le CSS et les images (les icones de tri) pour parfaire l'apparence de notre liste.

Module Cataloger : trier facilement les articles grâce à Jquery - jeebeezebee - 05/05/2011

Merci pour cette astuce qui va bien me servir Big Grin