Tri par date de rédaction / date de publication / par popularité / par visites / par pertinence

Choix de l’ordre de tri des articles par les visiteurs

Page rubrique.html & page recherche.html

Choix du tri par date / par popularité des articles d’un rubrique par les visiteurs
Choix de différents ordres de tri pour les résultats des recherches.

Des exemples avaient déjà étés données pour des versions antérieures de SPIP, mais la 1.9 permet de faire ça avec bien plus de facilité : dans le premier exemple ci-dessous, la boucle BOUCLE_articles du squelette rubrique.html a été modifié pour offrir aux visteurs le choix entre un tri par date et un tri par popularité.

[(#REM) Articles de la rubrique ]
   <B_articles>
   <div class="liste-articles">
      <hr />
      #ANCRE_PAGINATION
      <h2><i><:articles_rubrique:>, [(#CLASSEMENT|=={date}|?{<:classes_par_date:>:</i> (<a href="#URL_RUBRIQUE#pagination_articles"><:classes_par_popularite:></a>),<:classes_par_popularite:>:</i> (<a href="#URL_RUBRIQUE&classement=date#pagination_articles"><:classes_par_date:></a>)})]</h2>
      [<p class="pagination">(#PAGINATION)</p>]
      <ul>
         <BOUCLE_articles(ARTICLES) {id_rubrique} {par (#CLASSEMENT|=={date}|?{date,popularite})}{inverse} {pagination}>
         <li>
            <h3 class="titre"><a href="#URL_ARTICLE">#TITRE</a></h3>
            <small>[(#DATE_REDAC|affdate|sinon{#DATE|affdate})][, <:par_auteur:> (#LESAUTEURS)]</small>
         </li>
         </BOUCLE_articles>
      </ul>
   </div>
   </B_articles>

Dans cet exemple simple, les articles sont, par défaut, classés par popularité. pour les classer par date, un lien renvoie sur la même page (rubrique.html), avec un paramètre de plus dans l’URL : le paramètre « classement ». Celui-ci sert ensuite de critère de test à la fois pour afficher le classement actuel et pour modifier l’ordre de tri. On passe également dans l’URL l’ancre pagination #ANCRE_PAGINATION pour permettre une navigation agréable.

Pour utiliser ce code tel quel, il vous faut également ajouter à vos squelettes un fichier de langue local_fr.php qui contiendra (en plus des autres chaïnes), les textes correspondant aux ordres de tri utilisés :

...
'classes_par_date' => 'classés par <u>date</u>',
'classes_par_popularite' => 'classés par <u>popularité</u>',
...

Enfin, je précise que ce (petit) changement est compatible avec l’existant, et n’oblige pas à un recalcul complet par vidage du cache.

Tri des résultats d’une recherche

Tri du résultat d'une recherche

Sur le même principe, voici une page de résultats d’une recherche offrant au visiteur le choix de l’ordre de tri. C’est à peine plus compliqué :

[(#REM) Articles trouves ]
   <B_articles>

   [<div class="cartouche">
      <form id="tri" action="#SELF" method="get" name="tri">
         <h1 class="surtitre"><:resultats_recherche:> <b>«(#RECHERCHE)»</b>, <:tries_par:>
            <input type="hidden" name="page" value="recherche" />
            <input type="hidden" name="recherche" value="#RECHERCHE" />
            <select class="" name="tri" onchange="submit(); " class="spip_bouton">
               <option value="points"[(#TRI|=={points}|?{' selected="selected" class="selected"'})] /><:pertinence:></option>
               <option value="popularite"[(#TRI|=={popularite}|?{' selected="selected" class="selected"'})] /><:popularite:></option>
                <option value="visites"[(#TRI|=={visites}|?{' selected="selected" class="selected"'})] /><:nb_de_visites:></option>
                <option value="date_redac"[(#TRI|=={date_redac}|?{' selected="selected" class="selected"'})] /><:date_de_redaction:></option>
                <option value="date"[(#TRI|=={date}|?{' selected="selected" class="selected"'})] /><:date_de_publication:></option>
            </select>
            <input type="checkbox" name="ordre" [(#ORDRE|=={on}|?{'checked '})]onchange="submit();">[(#ORDRE|?{&uarr;,&darr;})] </input>
            <noscript>
               <input type="submit" value="<:trier:>" class="spip_bouton" />
            </noscript>
         </h1>
      </form>
   </div>]

   <div class="liste-articles">
      #ANCRE_PAGINATION
      <h2 class="invisible"><:articles:></h2>
      <ul>
         <BOUCLE_articles(ARTICLES) {recherche} {par (#TRI|?{#TRI,points})} {inverse (#ORDRE|?{0,1})} {pagination}>
         <li>
         <h3 class="titre"><a href="#URL_ARTICLE" title="#DESCRIPTION">#TITRE</a></h3>
         <small>[<a title="<:pertinence:>: #POINTS - <:visites:>: #VISITES - <:popularite:>: #POPULARITE[ - <:date_de_publication:>: (#DATE|affdate)]">(#DATE_REDAC|affdate|sinon{#DATE|affdate})</a>][, <:par_auteur:> (#LESAUTEURS)]</small>
         </li>
         </BOUCLE_articles>
      </ul>
      [<p class="pagination">(#PAGINATION)</p>]
   </div>
   </B_articles>
   </B_articles>
      <p><:aucun_article:></p>
   <//B_articles>

François Schreuer avait déjà proposé une conribution à ce sujet en 2005, mais il semblait possible, le progrès aidant ( ;-), de faire à la fois plus compact et plus riche fonctionnellement.

On notera que l’astuce utilisée pour gérer l’ordre de tri croissant ou décroissant utilise la nouvelle syntaxe disponible pour {inverse} :

{inverse (#ORDRE|?{0,1})}

Ce paramètre-là peut s’utiliser aussi bien pour les articles trouvés que pour les brèves, messages de forums, etc. Ce n’est pas le cas pour tous les paramètres : il faut que le champ existe en base de données pour le type d’objet considéré.

Afin de fonctionner même si javascript est désactivé, un bouton « submit » est affiché uniquement dans ce cas, grâce au tag <noscript>.

Enfin, il convient bien entendu d’ajouter les chaînes de caractères adéquates dans les fichiers de langues.

Minga
« Parce que le vrai courage est de faire ce qui est juste »

Dernière modification de cette page le 5 décembre 2006

Discussion

5 discussions

  • citoyen

    SPIP 3.0 introduit un critère et une balise qui permettent de faire facilement des listes triables.

    http://www.spip.net/fr_article5429.html

    Répondre à ce message

  • Bonjour à tous,

    J’ai un peu modifié le code fourni par Minga pour faire utiliser ce tri sur un spip 2.1.

    J’espère que ca fonctionnera aussi pour vous ....

       <B_articles>
     
       [<div class="cartouche">
          <form id="tri" action="#SELF" method="get" name="tri">
             <h1 class="surtitre"><:resultats_recherche:> <b>«(#RECHERCHE)»</b>, <:tries_par:>
                <input type="hidden" name="page" value="recherche" />
                <input type="hidden" name="recherche" value="#RECHERCHE" />
                <select class="" name="tri" onchange="submit(); " class="spip_bouton">
                   <option value="points"[(#ENV{tri}|=={points}|?{' selected="selected" class="selected"'})] /><:pertinence:></option>
                   <option value="popularite"[(#ENV{tri}|=={popularite}|?{' selected="selected" class="selected"'})] /><:popularite:></option>
                    <option value="visites"[(#ENV{tri}|=={visites}|?{' selected="selected" class="selected"'})] /><:nb_de_visites:></option>
                    <option value="date_redac"[(#ENV{tri}|=={date_redac}|?{' selected="selected" class="selected"'})] /><:date_de_redaction:></option>
                    <option value="date"[(#ENV{tri}|=={date}|?{' selected="selected" class="selected"'})] /><:date_de_publication:></option>
                </select>
                <input type="checkbox" name="ordre" [(#ENV{ordre}|=={on}|?{'checked '})]onchange="submit();">[(#ENV{ordre}|?{&uarr;,&darr;})] </input>
                <noscript>
                   <input type="submit" value="<:trier:>" class="spip_bouton" />
                </noscript>
             </h1>
          </form>
       </div>]
     
       <div class="liste-articles">
          #ANCRE_PAGINATION
          <h2 class="invisible"><:articles:></h2>
          <ul>
             <BOUCLE_articles(ARTICLES) {recherche} {par #ENV{tri,points}} {inverse #ENV{ordre,0}} {pagination}>
             <li>
             <h3 class="titre"><a href="#URL_ARTICLE" title="#DESCRIPTION">#TITRE</a></h3>
             <small>[<a title="<:pertinence:>: #POINTS - <:visites:>: #VISITES - <:popularite:>: #POPULARITE[ - <:date_de_publication:>: (#DATE|affdate)]">(#DATE_REDAC|affdate|sinon{#DATE|affdate})</a>][, <:par_auteur:> (#LESAUTEURS)]</small>
             </li>
             </BOUCLE_articles>
          </ul>
          [<p class="pagination">(#PAGINATION)</p>]
       </div>
       </B_articles>
       </B_articles>
          <p><:aucun_article:></p>
       <//B_articles>

    Répondre à ce message

  • Bonjour,

    il doit y avoir un truc que je n’ai pas pigé mais ça ne fonctionne pas chez moi. Quand je clique sur trier par date, la page se réouvre mais c’est toujours le « par date » qui s’affiche comme proposition de tri et non le « par popularité ». La logique voudrait que si la page s’ouvre par un trier par date, elle propose un trier par popularité. Puis, s’il elle s’ouvre triée par popularité, elle devrait proposer un trier par date.

    J’ai pourtant fait un copié collé du code.

    Répondre à ce message

  • 1

    ça a l’air bête mais comment inverser inverse (#ORDRE| ?0,1)
    because il es inversé dans un fichier inclus (bizare non ?)

    • Si j’ai bien compris la question : {inverse (#ORDRE|?{1,0})}

      Mais ça a l’air trop simple, non ?

    Répondre à ce message

    • Oui : j’en parles dans ma contribution. Nénamoins, la précedente date de 2005 : on peut désormais, avec les dernières versions de SPIP, faire plus « propre » et bien plus simple.

      Minga
      « Parce que le vrai courage est de faire ce qui est juste »

    • Carrément ! ça c’est une trouvaille !
      plus de php, plus de boucles à dupliquer
      3 fois moins de code
      je rêve...
      Merci beaucoup, c’est juste... juste !

    Répondre à ce message

Ajouter un commentaire

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom