Anleitung modx: Verschachteln von MIGX Template Variablen
Das Plugin MIGX ist ein großartiger Weg Template Variablen effektiv einzusetzen und das möchten wir Ihnen in diesem Blogeintrag etwas näher bringen.
MIGX wurde von Bruno Perner für das Content Management System modx Revolution entwickelt, um mehrere Einträge in einer einzelnen Template Variable zu vereinen. Statt etliche unstrukturierte Einträge zu verwalten, müssen Sie lediglich einige übersichtliche Datensätze pflegen. Das spart viel Zeit und erleichtert die Arbeit des Endnutzers im Manager erheblich.
MIGX Variablen verhalten sich ähnlich Arrays und unterstützen auch verschachtelte Array-Werte (eng.: nesting). Im Folgenden möchten wir Ihnen veranschaulichen wie Sie eine verschachtelte MIGX-TV erstellen und im Frontend ausgeben können.
Selbstverständlich sollten Sie das Plugin MIGX vorher Manuell oder über die Package-Verwaltung installiert haben.
1. Kind-Variable anlegen: childTV
Beginnen wir mit unserer Kindvariable, die später in unserer Elternvariable aufgerufen wird. Wir legen eine MIGX - Template Variable an und nennen sie childTV. Danach wechseln wir auf den Tab Eingabe-Optionen und wählen den Eingabetyp migx aus. Daraufhin ändert sich das unten stehende Formular. Dort können wir nun folgende JSON Arrays einfügen.
Template Variable - childTV: Formular-Tabs:
[ {"caption":"childTV", "fields":[ { "field":"ctv_text", "caption":"Text" } ] } ]
Dazu eine kurze Erklärung: Der erste Schlüssel caption ist der Name des Tabs welcher unsere Eingabefelder beinhaltet. fields beinhaltet alle unsere Felder für einen Datensatz. Das zweite caption ist der Name des aktuellen Feldes und wird uns beim Bearbeiten der Ressource als Label dargestellt. field beinhaltet den Namen über welchen wir die Daten in unserem Template abrufen können.
Tabellenspalten:
[ { "header":"Text", "dataIndex":"ctv_text" } ]
Die Tabellenspalten zeigen uns unsere gespeicherten Daten in einer Tabelle an, damit wir sehen welche Datensätze bereits gespeichert sind. header ist der Kopf einer Tabellenspalte für die dementsprechenden Felder unseres Datensatzes. dataIndex beinhaltet den Namen unseres Feldes, denselben welchen wir im Template verwenden werden.
Nun erstellen wir unseren ersten Chunk und nennen diesen childTvTpl, der Chunk muss nicht viel enthalten, da lediglich der Text aus unserem Datensatz angezeigt werden soll.
Chunk - childTvTpl:
[[+ctv_text]]
Jetzt müssen wir nur noch den Datensatz in unserem Template ausgeben können dafür benutzen wir den Snippet-Aufruf getImageList, übergeben unseren Variablennamen mit tvname und den Namen des Chunks mit tpl. Zusätzlich geben wir einen outputSeperator an, dieser wird zwischen den Ausgaben eingefügt.
Falls Sie die Variable testen möchten, muss in der Template Variable unter Template-Zugriff das entsprechende Template zugewiesen werden. Danach können in jeder Ressource, dem dieses Template zugewiesen ist, neue Datensätze unter Template-Variablen angelegt werden.
Template:
[[getImageList? &tvname=`childTV` &tpl=`childTvTpl` &outputSeparator=` - ` ]]
Beispiel anzeigen
Text 1 - Text 2 - Text 32. Eltern-Variable anlegen: parentTV
Gehen wir einen Schritt weiter, hier beginnt das Verschachteln der Template Variablen. Hierfür wird eine neue Template Variable angelegt, genannt parentTV.
Die TV bekommt eine Überschrift (genau wie den Text zuvor in childTV) und zusätzlich einen Verweis auf childTV. Dafür wird der Schlüssel inputTV genutzt, welcher den Namen der Kind-Variable erhält, in diesem Beispiel childTV.
Template Variable - parentTV: Formular-Tabs:
[ {"caption":"parentTV", "fields":[ { "field":"ptv_heading", "caption":"Überschrift" }, { "field":"ptv_childtv", "caption":"childTV Inhalte", "inputTV":"childTV" // Verweis auf TV "childTV" } ] } ]
Für die Tabellenspalten brauchen wir momentan nicht viel mehr ausgeben als die Überschrift.
Tabellenspalten:
[ { "header":"Überschrift", "dataIndex":"ptv_heading" } ]
Als Nächstes legen wir einen weiteren Chunk an und nennen ihn parentTvTpl. Der Chunk childTvTplwird weiterhin benötigt. An dieser Stelle wollen wir nun unsere Überschrift ausgeben und nutzen dazu unseren bereits vorhandenen Snippet-Aufruf aus dem Template, mit einem Unterschied: Wir möchten nun nicht die Datensätze abrufen, die in der Template Variable childTV sind, sondern den Datensatz von childTV aus der Variable parentTV. Hierfür wird der Parameter tvname entfernt undvalue genutzt. Diesem übergibt man nun den Aufruf aus unserem Verweis auf die Kind-Variable, als würden wir es direkt ausgeben wollen.
Chunk - parentTvTpl:
[[+ptv_heading]] <br> [[getImageList? &value=`[[+ptv_childtv]]` &tpl=`childTvTpl` &outputSeparator=` - ` ]]
Natürlich muss nun in unserem Template auch ein neuer Snippet-Aufruf stattfinden. Der alte childTV Aufruf kann dafür entfernt werden. Dieser wird nun innerhalb des parentTvTpl Chunks eingesetzt. Diesmal zeigen wir die TV parentTV mit dem Chunk parentTvTpl in unserem Template an.
Template:
[[getImageList? &tvname=`parentTV` &tpl=`parentTvTpl` &outputSeparator=`<hr>` ]]
Damit wir die Datensätze bearbeiten können, sollten wir der Template Variable parentTV den entsprechenden Template-Zugriff verpassen, und falls noch nicht erledigt entfernen wir in childTV den Zugriff auf das Template. Somit greift nur noch parentTV darauf zu.
Beispiel anzeigen
Überschrift 1Text 1.1 - Text 1.2 - Text 1.3Überschrift 2Text 2.1 - Text 2.2 - Text 2.3
Hiermit wären wir fertig. Nun können wir in den Ressourcen die Datensätze anlegen und im Frontend ausgeben.
3. Anwendungsbeispiel: Eine einfache Galerie
Um das ganze abschliessend zu veranschaulichen, bieten wir Ihnen noch ein kleines Beispiel zur Anwendung in der Praxis: eine Galerie. Hierfür erstellen wir im Grunde dieselben Template Variablen und Chunks erneut, deshalb können Sie, falls bevorzugt, auch die vorher erstellten TVs und Chunks ganz einfach anpassen.
Template Variable - galleryChildTV: Formular-Tabs:
[ {"caption":"Galeriebild", "fields":[ { "field":"gallery_image", "caption":"Bild", "inputTVtype":"image" } ] } ]
Vermutlich haben Sie schon festgestellt, dass hier ein neuer Schlüssel bei der Beschreibung vorhanden ist: inputTVtype. Damit können wir entscheiden was für ein Feld wir als Eingabe verwenden möchten, in diesem Fall image, also ein Bild - sogar mit Verlinkung zum Medien-Browser - um leichter nach Ihren Medien zu suchen oder diese hochzuladen.
Tabellenspalten:
[ { "header":"Bild", "dataIndex":"gallery_image", "renderer":"this.renderImage" } ]
In den Tabellenspalten nun ebenfalls einen neuen Schlüssel, den renderer. Damit kann in der Tabelle die Ausgabe angepasst werden. Mit this.renderImage wird das Bild, welches in unserem Datensatz gespeichert ist dargestellt. Es besteht auch die Möglichkeit andere renderer zu verwenden oder gar eigene zu erstellen, jedoch werden wir das hier nicht explizit erklären.
Template Variable - galleryTV:
Formular-Tabs:
[ {"caption":"einfache Galerie", "fields":[ { "field":"gallery_heading", "caption":"Überschrift" }, { "field":"gallery_description", "caption":"Beschreibung", "inputTVtype":"textarea" }, { "field":"gallery_images", "caption":"Galeriebilder", "inputTV":"galleryChildTV" } ] } ]
Hier nutzen wir als inputTVtype den Typen textarea. Wie erwartet wird damit ein mehrzeiliges Textfeld in unserer Ressource dargestellt. Alternativ können Sie den Typen richtext verwenden, jedoch benötigen Sie dafür einen installierten Editor, wie beispielsweise TinyMCE. Falls gewünscht können Sie Ihrem Label eine Beschreibung beifügen. Dafür wird einfach der Schlüssel descriptionverwendet.
Tabellenspalten:
[ { "header":"Überschrift", "dataIndex":"gallery_heading" }, { "header":"Beschreibung", "dataIndex":"gallery_description" } ]
Chunk - galleryTvTpl:
<h3>[[+gallery_heading]]</h3> [[+gallery_description]] <div class="images"> [[getImageList? &value=`[[+gallery_images]]` &tpl=`galleryChildTvTpl` ]] </div>
Chunk - galleryChildTvTpl:
<img src="[[+gallery_image]]" alt="[[+gallery_heading]]" />
____ Template:____
[[getImageList? &tvname=`galleryTV` &tpl=`galleryTvTpl` &outputSeparator=`<hr>` ]]
Beispiel anzeigen
Gallerie 1
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Gallerie 2
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Mehr über MIGX erfahren Sie in der MODX Revolution Dokumentation und im GitHub von Bruno Perner.
