Schreiben Sie ihre eigenen Template Overrides

Sie können dieses Kapitel sponsern!

Fiat 500 - tuned  by Abarth!Stellen Sie sich vor Sie planeneine Joomla! Website mit drei verschiednen Komponenten. Wenn Sie diese Komponenten installieren, kommen sie alle mit einem vordefinierten View um die Ausgaben der Komponente anzuzeigen. Diese Views sind von dem Entwickler der Komponente erstellt worden und der grösste anzunehmende Unfall ist, dass Sie drei verschiedenen Ansätze der Gestaltung von Benutzeroberflächen sehen.

Selbstverständlich möchte Ihr Kunde ein einmaliges Template Design und nun müssen Sie an die einzelnen Komponenten und die Ausgabe mit zusatätzlichen CSS Klasses, unterschiedlichen HTML tags verändern oder sogar komplett neu schreiben.

Sie könnten den Code der Komponente verändern. Das ist allerdings keine gute Idee, denn beim nächsten Komponenten-Update würden Ihre Änderungen wieder überschrieben werden!

In dieser Situation kommen Template Overrides ins Spiel.

Template Overrides sind eine Lösung für das

Every time you hack core, God kills a kitten

Problem. Auch wenn gerade kein Gott verfügbar ist und auch wenn es sich bei der Komponente nicht im reinen Core Code handelt, denken Sie in solchen Situation immer an die kleinen, süssen Kätzchen!

Nehmen wir mal an, Ihr Kunde benutzt unsere wunderbare Cocoate Real Estate Komponente.

Ihre Idee die Detailseite darzustellen ist völlig anders als Meine. Also verändern wir das mal!

Die Komponente hat ein Standard Template Layout für jede View. Wir wollen den Frontend View, der in der Datei /components/com_cocoaterealestate/views/object/tmpl/default.php liegt, verändern. Dieses Datei formatiert die Ausgabe der Detailseite (Abbildung 1) und verwendet Daten, die in der Datei /components/com_cocoaterealestate/views/object/views.html.php aufbereitet worden sind.

cocoate.com/node/10197

Abbildung 1: Standard Detailansicht eines Objekts

Für unser Beispiel benutze ich das beez_20 Template als Basi. In der Realität würden Sie vielleicht ein eigenes Template erstellen, aber das würde jetzt zu weit führen, also lassen Sie uns beez_20 nehmen. Auch wenn ein Joomla! Core Update installiert wird, die Datei wird nicht überschrieben.

Kopieren Sie die Datei

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

nach

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

Die Struktur des Templates sieht folgermassen aus:

  • /templates - Der Ordner, der alle Templates enthält
  • /templates/beez_20 - Der Ordner, der das beez2 Template enthält
  • /templates/beez_20/html - Der Ordner, der die Template Overrides enthält
  • /templates/beez_20/html/com_cocoaterealestate - Der Ordner, der die Template Overrides für eine Komponente enthält
  • /templates/beez_20/html/com_cocoaterealestate/object - Der Ordner, der die Template Overrides für einen bestimmten View einer Komponente enthält.

Entfernen Sie einfach die Kommentare der letzten fünf Codezeilen (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

Die PHP Funktion print_r() zeigt den Inhaltdes Arrays $this->item. Um die Ausgabe besser lesen zu können, habe ich sie zwischen <pre> </pre> Tags geschrieben. Wenn Sie die Seite aktualisieren, sehen Sie jetzt alle zur Verfügung stehenden Daten. Diese Daten können Sie für ihr individuelles Template benutzen.
(Abbildung 2).

cocoate.com/node/9577

Abbildung 2: Überschreibener View - Schritt 1

Sie sollten jetzt den Inhalt des Arrays sehen.

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

Abhängig von der Komponente kann das Array erheblich komplexer ausfallen. In unserem Fall ist es klein und übersichtlich.

Jetzt können Sie die Werte nehmen, die Sie benötigen und Ihr gewünschtes Markup hinzufügen.

Example: Wenn Sie den Preis in einem <div> Tag mit einer speziellen Kalsse habe wollen, würde das so aussehen:

<div class="myprice>

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

</div>

Es ist möglich, jede Art von PHP Kommando in dieser Datei zu benutzen, aber ist ist viel besser, wenn der Komponentenentwickler bereits alle möglichen Werte zur Verfügung stellt, damit sich der Designer auf sein Markup konzentrieren kann.

Mehr Information