Templates schreiben

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>

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

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

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.