.png){kind=logo}
.png){kind=small}
.png){kind=logo}
.png){kind=logo}
.png){kind=logo}
.png){kind=logo}
.png){kind=logo}
.png){kind=logo}
Toolbox: #009 · Fokus: Dropper
Problem
Ich möchte meinen JTL-Shop anpassen ohne dafür meine Template-Dateien ändern oder extra ein Child-Template erstellen zu müssen.
Viele kleine Anpassungen im JTL-Shop landen schnell im (Child-) Template: ein zusätzlicher Hinweis im Header, einen Teilbereich im Footer ausblenden, Artikelinfos in Listen ergänzen oder eine kleine Layoutkorrektur via CSS. Das funktioniert, erzeugt aber auch Pflegeaufwand. Jede neue oder geänderte Template-Datei muss bei Shop-Updates geprüft und ggf. nachgezogen werden.
Lösung
Für viele solcher Anpassungen brauchst du nicht ins Template eingreifen - es reicht Dropper! Bereiche deines JTL-Shops lassen sich mit passenden Drops ergänzen, bestehende Komponenten ausblenden oder erweitern. Sogar eigenes CSS kann per Plain Drop eingefügt werden. Dabei bleiben deine Änderungen im Backend nachvollziehbar, lassen sich gezielt ein- und ausblenden und sind besser wartbar.
Dropper & Drops sind templateunabhängig. Einfügeorte wie Drop Zones und viele Selektoren basieren auf der Struktur des NOVA-Templates. Drittanbieter-Templates unterstützen diese Selektoren oft. Dadurch funktionieren Anpassungen via Dropper auch nach einem TemWechsel des Templates weiter.
in Dropper Gold & Ultimate
Nutze alle Drops in unseren Flatrates oder wähle gezielt, was du brauchst.
Schritt für Schritt
Der Ablauf einer Templateanpassung mit Dropper & Drops ist immer ähnlich: Du erstellst ein Drop, suchst im Selektorfinder die passende Stelle in deinem JTL-Shop und legst fest, wie der Inhalt eingefügt werden soll.
- Drop erstellen - Inhalt anlegen, der eingefügt werden soll (leerer Inhalt, falls Ausblenden gewünscht).
- Position suchen - Im Selektorfinder die passende Stelle im Shop finden.
- Einfügemethode festlegen - Ergänzen, vor/nach einem Element einfügen oder vollständig ersetzen.
- Darstellungsfilter setzen (optional) - Zusätzlich die Sichtbarkeit nach Seitentyp, Kategorie, Artikel, Kundengruppe, Gerätetyp oder Zeitraum einschränken.
Wenn die Anpassung oder der Inhalt nicht überall erscheinen soll, grenzt du die Anzeige mit Darstellungsfiltern ein - z.B. nach Seitentyp, Kategorie, Artikel, Kundengruppe, Gerätetyp oder Zeitraum. Alle Details dazu findest du in der Dropper-Dokumentation zu Einfügemethoden.
Wissenswert
Für Positionen im JTL-Shop sind Drop Zones meist der beste Einstieg, weil sie vorbereitete und sprechende Einfügepunkte im Template sind. OPC-Mountpoints entstammen dem OnPage Composer (OPC), können aber auch von Dropper nachgenutzt werden. CSS-Selektoren sind eine flexible Variante, wenn du gezielt ein konkretes Element im DOM deines Shop ansprechen willst.
Auch
eigenes CSS
braucht normalerweise eine Templateanpassung, z.B. über eine eigene CSS-Datei im Child-Template. Mit Dropper kannst du CSS-Code einfach über ein
Plain Drop
einfügen. Dabei nicht den Style-Tag vergessen:
<style type='text/css'>...</style>
Unser Ansatz ist besonders stark, wenn Position und Sichtbarkeit kombiniert werden: Ein Drop global einfügen, aber per Darstellungsfilter nur auf bestimmten Seiten, Kategorien oder Artikeln ausgeben. Toolbox #005 zeigt dieses Prinzip konkret am Beispiel von Inhalten auf Artikeldetailseiten. Mit einer Templateanpassung oder dem OPC ist das nur schwer bis unmöglich zu realisieren.
Wenn diese Einfügemethoden grundsätzlich nicht ausreichen, z.B. weil du direkt auf Smarty-Template-Variablen zugreifen musst, kannst du auch
Template Blöcke
{block name="..."}{/block}
oder ganze
Templatedateien ersetzen. Das macht Dropper entgültig zur Temlating-Engine. Diese Variante für versierte Nutzer ist aber einen eigene Toolbox Beitrag wert.
Ressourcen
| Typ | Ressource |
|---|---|
| Dokumentation | Drops einfügen · Drop Zones · CSS-Selektoren · OPC-Mountpoints · Darstellungsfilter |
| Test & Shop | Dropper in unserem Store · Dropper Ultimate im JTL-Extension Store |
| Toolbox | Toolbox #005 - Inhalte ohne Duplizieren auf vielen Artikelseiten einfügen |