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. 
La Gestion de Contenu Simplifiée
Comment intégrer un compteur à vos boucles
7 June 2010
Catégorie : Astuces et Conseils
Posté par : admin
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 : 
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 : 
Pratique, non ? 
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.