Puissant pour les pros
Simple pour les utilisateurs

CMS Made Simple, un CMS open source, permet la gestion rapide et facile des contenus d'un site web. Ce CMS est adapté aussi bien pour les petites sociétés que pour les grandes entreprises.

Comment intégrer un compteur à vos boucles

7 juin 2010
Catégorie : Astuces et Conseils
Posté par : admin

Insérer un compteur dans une boucle peut paraître assez inutile de prime abord, jusqu'à ce qu'on se rende compte des applications possibles. Voyons ensemble un cas concret. ;)

Ecrit par Corrine de l'agence Inseo

Créer une liste alternée :

Partons du principe que vous souhaitiez lister les articles de votre site. Afin de rendre la lecture de votre page plus confortable, vous aimeriez styler un article sur deux.

Or vous n'avez pas la main sur le code produit car il est automatiquement généré. Une boucle parcourt l'ensemble de vos articles et crée un élément pour chaque article trouvé.

Voici à quoi ressemble le gabarit du sommaire par défaut. Ce dernier étant assez indigeste, je n'ai conservé ici que les éléments qui nous intéressent, à savoir l'intitulé de l'article et sa date de parution :

{foreach from=$items item=entry}
{if $entry->postdate}
<div class="NewsSummaryPostdate">
{$entry->postdate|cms_date_format}
</div>
{/if}
<div class="NewsSummaryLink">
<a href="{$entry->moreurl}" title="{$entry->title|cms_escape:htmlall}">{$entry->title|cms_escape}</a>
</div>
{/foreach}

Avant de continuer, rendons ce code un peu plus sémantique :

  • en nous séparant de ces <div> inutiles ;
  • en encadrant les informations dans un élément de liste ;
  • et en rajoutant une balise <span> qui va nous servir pour la mise en forme.
<ul>
{foreach from=$items item=entry}
<li>
{if $entry->postdate}
<span>{$entry->postdate|cms_date_format}</span>
{/if}
<a href="{$entry->moreurl}" title="{$entry->title|cms_escape:htmlall}">{$entry->title|cms_escape}</a>
</li>
{/foreach}
</ul>

Ajoutons un peu de style à l'ensemble :

li {
margin: 0;
padding: 9px 0;
width: 500px;
font-family: Arial, Verdana, ans-serif;
font-size: 0.75em;
color : #384654;
list-style: none;
}

li span {float: right}

li a:link {
color : #384654;
text-decoration: underline;
}

Et affichons le résultat dans notre navigateur : Rendu du code html

Nous allons maintenant intégrer un compteur à cette boucle. Il suffit pour cela de le créer, de l'initialiser et de l'incrémenter à chaque nouveau passage :

<ul>{counter start=0 assign=compteur}
{foreach from=$items item=entry}{counter}

Afin de différencier un élément sur deux, nous allons déterminer si la valeur du compteur est paire ou impaire en utilisant la fonction mathématique modulo : %.

Si le reste de la division est strictement égal à 0, nous pourrons alors en déduire que la valeur du compteur est paire. Sinon, cela voudra dire que la valeur du compteur (et donc l'élément de liste <li>...</li>) est impaire.

En langage informatique, cela équivaut à : "Si la valeur du compteur est paire, alors je crée une class de valeur paire". Et traduit en smarty, cela donne : {if $compteur % 2 == 0} class="paire"{/if}

Il ne nous reste qu'à intégrer cette portion de code à l'ensemble, comme ceci :

<ul>{counter start=0 assign=compteur}
{foreach from=$items item=entry}{counter}
<li{if $compteur % 2 == 0} class="paire"{/if}>
{if $entry->postdate}
<span>{$entry->postdate|cms_date_format}</span>
{/if}
<a href="{$entry->moreurl}" title="{$entry->title|cms_escape:htmlall}">{$entry->title|cms_escape}</a>
</li>
{/foreach}
</ul>

À ajouter une nouvelle classe correspondante.

li.paire {background-color: #E2EAEB}

Et à admirer le résultat : Rendu du code html avec style alterné

Pratique, non ? :)

Addon du 24 janvier 2011

Le modulo permet de connaître le reste de la division.

En indiquant {if $compteur % 3 == 0}, on stylera donc un élément sur trois.

Pour stopper une boucle au-delà d'un certain nombre, j'opterais plutôt pour une boucle do { … } while() qui répond tout à fait à cette problématique.

Et pour tous ceux qui ne le savent pas encore ? CMS Made Simple c'est également Facebook, Twitter et même un flux RSS pour rester constamment au courant des nouveautés, des annonces et des préviews de la communauté ! Alors aucune excuse pour dire que vous n'étiez pas au courant :)

comments powered by Disqus
Agence Website12
  Flux Rss Twitter FaceBook