Dein Warenkorb ist leer

Templates schreiben

Lerne wie du ein eigenes Template für dein Drop scheibst

Das Drop-Template 'template.tpl'

Die template.tpl ist eine Smarty-Datei, die in Hook 140 ausgeführt wird. Sie sollte sich immer im ROOT-Ordner deines Drops befinden und wird automatisch geladen, sobald dein Drop auf der Seite gerendert werden kann. In der template.tpl eines Drops stehen dir alle Variablen des Shops innerhalb von Smarty zur Verfügung. Vor Allem aber steht ein Assoziatives Array unter der Variable $drop zur Verfügung, welches die Einstellungen des aktuellen Drops enthält. Mehrsprachige Optionen des Drops wurden an dieser Stelle bereits in die aktuell ausgewählte Sprache des Shops umgewandelt. Haben wir beispielsweise ein kleines Mitarbeiter Drop:

config.json

{
    "name": "Coworker",
    "description": "zeigt einen Mitarbeiter an.",
    "stylesheets": ["coworker.css"],
    "scripts": [],
    "version": "1.0.0",
    "settings": [
        {
            "name": "Bild",
            "description": "Profilbild vom Mitarbeiter",
            "type": "upload",
            "property": "image"
        },
        {
            "name": "Name",
            "description": "Name des Mitarbeiters",
            "type": "text",
            "property": "name"
        },
        {
            "name": "Jobbezeichnung",
            "description": "z.B. Hacker oder Designer",
            "type": "text",
            "property": "job",
            "multilanguage": true
        }
    ]
}

könnte unser $drop Objekt wie folgt aussehen:

array(
     "image" => "bilder/kk_dropper_uploads/martin.png",
     "name" => "Martin Zilz",
     "job" => "Hacker"
)

und unser Template den Mitarbeiter so darstellen:

template.tpl

<div class="kk-coworker">
  <img class="kk-coworker-img" src="{$drop.image}" alt="{$drop.name}"/>
  <h3 class="kk-coworker-name">{$drop.name}</h3>
  <p class="kk-coworker-job">{$drop.job}</p>
</div>

Beachte, dass du auf Eigenschaften eines Drops immer mit dem . -Operator zugreifst, da es sich um ein assoziatives Array handelt.

Debugging

Möchtest du den Inhalt des $drop Objektes etwas genauer untersuchen, kannst du es auch in deinem Template dumpen:

<pre>{$drop|@var_dump}</pre>

CSS Styling

Das CSS Styling könnte jetzt in der coworker.css erfolgen, welche in der config.json als Stylesheet eingetragen wurde. Bitte wrappe deine Drops immer in gute, eindeute Klassen, sodass du sicherstellen kannst, dass deine Klassen nicht mit Klassen aus dem Template oder denen anderer Plugins und Drops kollidieren, es sei denn du wünscht es bewusst so.

Wir nutzen bspw. für unsere Drops oftmals den Präfix kk- vor unseren CSS-Klassen. In den Styles selber selektieren wir häufig zunächst die Klasse des Root-Elementes im Template, und gehen von da aus abwärts:

coworker.css

.kk-coworker .kk-coworker-img{ ... }
.kk-coworker .kk-coworker-name{ ... }

Auf diese Art gehst du sicher, dass deine Styles nur dort Einfluss haben, wo du es auch möchtest.

Drops & Javascript - Ein Dreamteam

Häufig kommt es vor, dass du in deinem Drop Javascript Biliotheken benutzen möchtest. Drops sollten immer so programmiert sein, dass (unendlich) viele gleichzeitg auf einer Seite eingebunden werden können. Vermeide daher die Verwendung von IDs in deinen Templates. Doch wie sprichst du zuverlässig den DOM einer bestimmten Drop-Instanz an, um Javascript darauf ausführen zu können?

Hierfür gibt es das Javascript DropperFramework. Es erlaubt das einfache Initialisieren von Drops und bietet dir einen sicheren, isolierten Container, der auch dann neu initialisiert wird, wenn sich die Seite via Ajax ändert (z.B: beim Nachladen von Variationen auf der Artikeldetailseite).

Oftmals wirst du jQuery Plugins verwenden um bestimmten Funktionalitäten eines Drops herzustellen, beispielsweise um einen Slider zu initialisieren. Packe diese Libraries am besten direkt in deinen Drop-Ordner und binde sie im Feld scripts in deiner config.json mit ein, damit sie deinem Drop zur Verfügung stehen.

Jeder Drop-Instanz wird eine eindeutige ID, die sogenannte guid bei seiner Erstellung im Backend zugewiesen. Diese ID kannst du dir auch zunutze machen, um eindeutige Klassen zu bauen, die du später wieder Javascript ansprechen kannst. Hier das allgmeine Vorgehen anhand eines Sliders:

template.tpl


<div class="my-drop-slider my-drop-slider-{$drop._internal.guid}"> {foreach from=$drop.dropItems item="slide"} <div class="my-drop-slide"> <img src="{$slide.image}" alt=""/> </div> {/foreach} </div> <!-- Initialisierung des Sliders --> <script type="text/javascript"> DropperFramework.init('.my-drop-slider-{$drop._internal.guid}', function(drop){ldelim} drop.$.myAwesomeSliderLib({ldelim} 'speed' : {$drop.sliderSpeed}, 'navigation' : {if $drop.showNavigation eq true}true{else}false{/if} {rdelim}); {rdelim}); </script>

Was passiert hier?

Zunächst wird der für den Slider benötigte DOM erzeugt. Hierbei werden die Daten aus unserem $drop Objekt und den dazughörigen $drop.dropItems verwendet.
Wie wir auch sehen, wird eine eindeutige Klasse gesetzt, die wir später verwenden um genau dieses Element mit jQuery nutzen zu können:

my-drop-slider-{$drop._internal.guid}

Diese wird später auf der Clientseite ungefähr so aussehen:

my-drop-slider-8d47f6f3-9920-4218-9cb1-8365cdcfb116

Schliesslich folgt ein Javascript Block in welchem der Slider initialisiert wird. Beachte dass innerhalb von Smarty-Templates {ldelim} und {rdelim} genutzt werden müssen, um öffnende und schliessende geschweifte Klammern darzustellen.

DropperFramework

Das DropperFramework hat vor Allem die Aufgabe, dir beim sicheren Initialisieren von Javascript zu helfen. Ohne das DropperFramework hättest du beispielsweise keine Möglichkeit zu erkennen, ob der Inhalt der Artikeldetailseite via xAjax nachgeladen wurde. Wäre in dem nachgeladenen Inhalt ein Drop welches Javascript nutzt, müsste dieses eigentlich von dir neu initialisiert werden.

DropperFramework nimmt dir diese Aufgabe ab. Auch ist es nicht nötig auf den DOM-Ready Event vor der Initialisierung zu warten.

init

Registriert einen Selector und eine Callback-Funktion, die aufgerufen wird sobald der DOM fertig ist, oder Inhalte per xAjax wechseln.

DropperFramework.init(selector, callback /* drop */)

  • selector: CSS-Selector des Elementes, auf welchem Javascript angewendet werden soll

  • callback: Eine Callbackfunktion, die bei der Initialisierung aufgerufen wird. Übergeben wird ein Objekt drop.

    • drop [DropInstance]: Repräsentiert die Lifetime des in init selektieren Drops. Bietet Zugriff auf das zugehörige jQuery-Element über drop.$

Sprachvariablen nutzen

In deiner config.json gibt es die Möglichkeit, Sprachvariablen über alle Drop-Instanzen hinweg zu definieren. Möchtest du auf diese innerhalb deines Templates zugreifen, nutze den i18n Smarty Modifier. Hier ein Beispiel:

config.json

{
    ...
    "lang" : {
        "hello-world" : {
            "ger" : "Hallo Welt!",
            "eng" : "Hello World!"
        },
        "hello-world-personal" : {
            "ger" : "Hallo {0}, magst du {1}?",
            "eng" : "Hello {0}, do you like {1}?",
        }
    }   
}

template.tpl

<span>{"hello-world"|i18n}</span>
<span>{"hello-world-personal"|i18n:"Martin":"Dropper"}</span>

Durch weitere Parameter an dem i18n Modifier kannst du Platzhalterwerte für Platzhalter in der Sprachvariable vorgeben.

Drops & PHP

Es ist möglich mit PHP-Code die Funktionsweise von deinem Drop zu erweitern. Wie das funktioniert lese hier.