Template de thème et Smarty

Contenu

Template de thème et Smarty
- Principes de base
- Usages avancés

Template de thème et Smarty

Smarty est un moteur de template PHP solide, facile à apprendre et à utiliser, et qui dispose d'une syntaxe propre et compacte. Il vous aide à avoir un code HTML beaucoup plus simple, et fonctionne en compilant puis en mettant en cache chaque page.

Vous pouvez en apprendre plus en vous rendant sur son site officiel : http://www.smarty.net/

Principes de base

Délimiteurs

Les délimiteurs indiquent au moteur de template la présence d'un appel Smarty. Les délimiteurs utilisés par Smarty utilisent des accolades : {appel_smarty}

Si vous avez besoin d'utiliser des accolades dans le code de votre template, Smarty dispose d'un appel particulier : {redelim} pour une accolade ouvrante ({), et {rdelim} pour une accolade fermante (}).

Commentaires

Comme avec tout langage de script ou de programmation, vous pouvez mettre des commentaires dans le code de votre template, et le moteur de template ne les traitera pas.

Les commentaires utilisent des délimiteurs normaux, accompagné du caractère * :

{* Commentaire sur une ligne. *}

{* 
Commentaire
sur
plusieurs
lignes.
*}

{* Commentaire sur du {$code} Smarty. *}

Variables

Tout comme en PHP, les variables sont présentées avec un signe dollar suivi du nom de la variable. Le fait de mettre une variable directement dans des délimiteurs Smarty signifie que vous souhaitez afficher son contenu tel quel. Par exemple, {$foo} est l'équivalent Smarty d'un appel PHP echo $foo;.

Vous pouvez également appliquer des "modifieurs" à vos variables :

{* Affiche le contenu de la variable en minuscule (lowercase). *}
{$foo|lower}
    
{* Affiche le contenu de la variable après avoir remplacé un mot par un autre. *}
{$foo|replace:'bar':'baz'}
    
{* Exemple de modifieurs qui se suivent. *}
{$foo|lower|capitalize|truncate:10:'...'}

Vous pouvez obtenir une liste complète des modifieurs disponibles sur le site officiel : http://www.smarty.net/docsv2/en/language.modifiers.tpl

Expressions conditionnelles

Smarty dispose d'un système conditionnel if / else / elseif :

{if $coffee == 'good'}
  {* Programmeur heureux *}
{elseif $coffee == 'very good'}
  {* Programmeur très heureux *}
{else}
  {* Programmeur grognon *}
{/if}

Vous pouvez en apprendre plus sur les diverses expressions conditionnelles sur le site officiel : http://www.smarty.net/docsv2/en/language.function.if.tpl

Boucles

Smarty reconnaît deux boucles : section et foreach. Vous pouvez utiliser des itérateurs, et même le conditionnel foreachelse :

<?php
  $items_list = array( 23 => array('no' => 2456, 'label' => 'Salad'), 96 => array('no' => 4889, 'label' => 'Cream') );
  $smarty->assign('items', $items_list);
?>
<ul>
{foreach from=$items key=myId item=i}
  <li><a href="item.php?id={$myId}">{$i.no}: {$i.label}</li>
{/foreach}
</ul>

Vous pouvez en apprendre plus sur chaque boucle grâce à leurs pages respectives sur le site offficiel :

Inclusion de fichier

Vous pouvez facilement inclure un fichier template dans un autre à l'aide des fonctions include, extends ou block. Grâce à l'héritage, l'inclusion d'un fichier peut avoir un impact sur de nombreux templates à la fois.

La méthode d'assignation nécessite deux paramètres obligatoires :

file : le nom du fichier template à inclure.
assign : le nom de la variable à laquelle le résultat de l'inclusion sera assigné.

Voici deux exemples :

{* Inclure d'un fichier. *}
{include file='steps.tpl'}
   
{* Placer le contenu inclus dans une variable, puis afficher cette variable.	 *}
{include file='text.tpl' assign='MyText'}
{$MyText}

Démonstration de l'héritage à l'aide de extends et block :

{* Nom du fichier : parent.tpl *}
<html>
<head>
<title>{block name="title"}Default Title{/block}</title>
...
{block name="title"}New Title{/block}
</head>
</html>

{* Nom du fichier : child.tpl *}
{extends file='parent.tpl'}
{block name='title'}New Page Title{/block}

Ce dernier exemple utilise la fonction block, qui est conçue pour définir une zone nommée du template d'origine pour l'héritage de template.

Vous pouvez en apprendre plus sur l'héritage de templates et sur chaque fonction d'inclusion en lisant leurs pages respectives sur le site officiel :

Fonction de débogage

L'ensemble du processus interne entourant un template Smarty peut être affiché lorsque la page est chargée.

Au cours du développement du thème, cela peut être fait pour chaque page chargée en modifiant le fichier /config/smarty.config.inc.php et en modifiant la valeur de $smarty->debugging :

$smarty->debugging = true;

Une fois le thème sur son site de production, vous pouvez activer la méthode de débogage en ajoutant la directive {DEBUG} au fichier de template.

Vous pouvez également gérer la fonction de débogage directement depuis PrestaShop : dans le menu "Paramètres avancés", dans la page "Maintenance", changez l'option "Console de debug" selon vos besoins.

Vous pouvez en apprendre plus sur la fonction debug sur le site officiel : http://www.smarty.net/docs/en/language.function.debug.tpl

Usages avancés

Captures

La fonction capture permet de récupérer le résultat d'un template sans l'afficher. Par exemple : {capture name="myCapture'} ... {/capture}.

Pour utiliser ce contenu, vous devez appeler la super-variable $smarty : $smarty.capture.myCapture

N'oubliez pas de tester l'existence de la capture avant de vous en servir :

{if $smarty.capture.<nom>} ou {if isset($smarty.capture.<nom>}

La fonction de capture est également capable d'auto-assigner une variable :

{capture name='maCapture' assign='maVariable'}
   ...
{/capture}
{* Puis, pour utiliser le contenu, appelez la variable $myVariable. *}

Vous pouvez en apprendre plus sur la fonction capture via le site officiel : http://www.smarty.net/docs/en/language.function.capture.tpl

Assigner des variables

Il est possible d'assigner une variable dans un fichier template (vue), à l'aide de la fonction assign :

{assign var='myVar2' value='Ma valeur'}

{* Affichera "Ma valeur". *}
{$myVar2}

Vous pouvez en apprendre plus sur la fonction assign sur le site officiel : http://www.smarty.net/docs/en/language.function.assign.tpl

La variable $smarty

$smarty est ce que l'on appelle une super-variable. Elle permet de récupérer des informations utiles :

valeurs de capture : $smarty.capture.maVariable
valeurs GET : {$smarty.get.<nom>}
valeurs POST : {$smarty.post.<nom>}
horodatage actuel : {$smarty.now}, ou avec un formatage personnalisé : {$smarty.now|date_format:'%d-%m-%Y %H:%M:%S'}
constantes PHP : {$smarty.const.<nom de la constante>}

Dans Smarty 2, $smarty pouvait être utilisé avec foreach :

Quand la boucle est définie en tant {foreach from=$myarray key="mykey" item="myitem"} ...vous pouvez lancer un appel $smarty.foreach.name.property.

Depuis PrestaShop 1.5, il est recommandé de n'utiliser que la syntaxe Smarty 3. De fait, l'appel $smarty.foreach.varName.property peut être remplacé par l'appel équivalent $varName@property.

Vous pouvez en apprendre plus sur la variable $smarty sur le site officiel : http://www.smarty.net/docs/en/language.variables.smarty.tpl

Littéraux

La balise literal permet d'utiliser un bloc de données tel quel, littéralement, sans que Smarty cherche à l'interpréter :

{literal}
<script type="text/javascript">
  function myFonction()
  {
    ...
  }
</script>
{/literal}

Vous pouvez en apprendre plus sur la fonction literal sur le site officiel : http://www.smarty.net/docs/en/language.function.literal.tpl

Fonctions

Les fonctions Smarty n'utilisent pas le préfixe $ des variables : {debug}, {rdelim}, {ldelim}, ...

Elles peuvent accepter des paramètres : {include file='<nom du fichier>'}

La structure d'un appel de fonction est comme suit : {nomDeLaFonction arg1='...' arg2='...'}

Vous ne pouvez pas utiliser de modifieurs sur les fonctions. Par exemple {nomDeLaFonction arg1='...' |lower} ne renverra pas le résultat espéré.

Vous pouvez en apprendre plus sur les fonctions de Smarty sur le site officiel :

Plugins

Les plugins de Smarty permettent d'étendre son comportement standard. Ils sont écrits en PHP

Par exemple, PrestaShop dispose d'un plugin Smarty qui crée une fonction pour gérer les chaînes traduisibles : {l}

Tout d'abord, dans un thème :

{l s='Hello dear viewer'}

Et dans un module (même s'il est surchargé) :

{l s='Hello dear view' mod='myModule'}

Vous pouvez en apprendre plus sur les plugins Smarty sur le site officiel : http://www.smarty.net/docs/en/plugins.tpl

Ce qu'il ne faut pas faire avec Smarty et PrestaShop

Quelques aspects à prendre en compte lorsque vous utilisez Smarty :

Ne pas faire d'appel direct avec les constantes de PrestaShop. En particulier, n'utilisez jamais {$smarty.const._DB_PASSWD_}, pour des raisons évidentes.
Ne remplacez par les variables mises en place par PrestaShop.
Ne rendez pas le code inutilement difficile à lire. Par exemple, évitez de faire des appels include depuis un fichier déjà inclus dans un autre...
Ne faites pas d'appels PHP directs. Par exemple, n'utilisez pas {php} // PHP code {/php}.

PreviousCaractéristiques d'un thème back-office NextUtiliser jQuery et Ajax

Last updated 4 years ago