Écrivez vos propres surcharges de template

Thank you for your contribution: 

Vous pouvez déjà sponsoriser ce chapitre

Fiat 500 - tuned  by Abarth!Imaginez que vous prévoyez un site Joomla ! avec trois composants différents. Lorsque vous installez les composants, ils affichent tous avec des vues prédéfinies leur contenu. Les vues sont créées par les développeurs de composants et, dans le pire des cas, vous avez trois approches différentes pour adapter le design sur votre site.

Bien sûr, votre cvlient veut avoir un design unique sur son site, Of course, your client wants to have a unique template design et maintenant vous devez ajuster les vues du composant existant avec des classes CSS supplémentaires, différentes balises HTML ou écrire un nouveau balisage complet.

Vous pouvez changer le code du composant. Cependant, ce n'est pas bon pour votre réputation, car avec la prochaine mise à jour du composant, vos modifications auront disparu !

Voici la situation où la surcharge de template entre en jeu.

Les surcharges de templates (overrides) sont essentiellement une solution au problème.

Chaque fois que vous hackez le Noyau, Dieu tue un chaton

Même si vous n'avez aucun dieu à l'esprit, et même s'il ne s'agit pas noyau mais de codage de composant, s'il vous plaît, pensez aux chatons !

Supposons que vous êtes un client qui utilise notre merveilleux composant Cocoate Immobilier.

Votre idée de l'affichage de la fiche de la maison est totalement différente de la mienne. Ok, alors modifions !

Le composant dispose d'une couche modèle de template par défaut pour chaque vue. Nous voulons changer la vue frontend, elle est stockée dans le fichier /components/com_cocoaterealestate/views/object/tmpl/default.php. Ce fichier fait paraitre la page de cette manière (Figure 1) et elle est construite autour des données collectées dans le fichier /components/com_cocoaterealestate/views/object/views.html.php.

cocoate.com/node/10197Frontend House Listing

Figure 1: Vue de l'objet par défaut

Pour notre exemple nous nous baserons sur le template beez_20 Template. En réalité vous voudriez probablement commencer en créant votre propre template mais ce serait de trop, à ce niveau de décrire les différentes étapes nécessaires alors nous utiliserons beez_20 qui existe déjà. Même s'il y a une mise à jour du noyau de Joomla! , vos surcharges ne seront pas perdues.

Copiez le fichier

/components/com_cocoaterealestate/views/object/tmpl/default.php

vers

/templates/beez2/html/com_cocoaterealestate/object/default.php.

La structure du dossier template est ainsi faite:

  • /templates - le dossier contient tous les templates
  • /templates/beez_20 - le dossier contient le template beez2
  • /templates/beez_20/html - le dossier contient les surcharges de template
  • /templates/beez_20/html/com_cocoaterealestate - le dossier contient les surcharges de template pour un composant
  • /templates/beez_20/html/com_cocoaterealestate/object - le dossier contient les surcharges de template pour une vue du composant

 Décommentez ou insérer des 5 dernières lignes de code (Listing 1).

<?php
// No direct access to this file
defined('_JEXEC') or die;
?>
<h1><?php echo $this->item['title']; ?></h1>
<img src="<?php echo $this->item['image']; ?>">
<ul>
  <li>
  <?php echo $this->item['zip']; ?>
  <?php echo $this->item['city']; ?>,
  <?php echo $this->item['country']; ?>
  </li>
  <li>
  <strong><?php echo $this->item['price']; ?> €</strong>
  </li>
</ul>
<pre>
<?php
print_r($this->item); 
?>
</pre>

Listing 1: /templates/beez_20/html/com_cocoaterealestate/object/default.php

La fonction PHP print_r() montre le contenu de la rangée $this->item. Pour rendre la sortie plus lisible, je l'ai placée entre les balises <pre> </pre>.

Lorsque vous rechargez votre page, vous voyez maintenant toutes les données.Vous pouvez utiliser la liste ci-dessous pour votre template personnel.
(Figure 2).

cocoate.com/node/9577Template Override

Figure 1: Étape 1 vue surchargée

Nous devrions voir le contenu du tableau.

Array
(
    [id] => 1
    [image] => http://farm4.staticflickr.com/3100/2724105775_4d039b4127.jpg
    [title] => First House
    [city] => Fitou
    [zip] => 11510
    [country] => France
    [price] => 85000
)

Selon le composant le tableau pourrait être beaucoup plu grand et plus complexe. Dans notre cas, il est très simple.

Maintenant vous pouvez choisir les valeurs dont vous avez besoin et construire le balisage souhaité autour.

Exemple: Si vous voulez avoir le prix dans un balise <div> avec une classe spéciale, cela pourrait ressembler à ceci:

<div class="myprice>

<?php echo $this->item['price']; ?>

</div>

Il est possible d'utiliser n'importe quel type de déclarations PHP dans ce fichier, mais c'est beaucoup mieux quand le développeur du composant propose tous les champs nécessaires dans le tableau afin que vous puissiez vous concentrer sur le balisage.

Plus d'informations sur l'overriding (surcharge)