Adventtipp 21- Atomic Design mit Hilfe von Item Renderings

 

Der heutige Adventtipp soll einen kurzen praktischen Einblick in das Atomic Design geben und wie dabei vor allem mit Item Renderings der Redakteur unterstützt werden kann.

«We’re not designing pages, we’re designing systems of components.»
Stephen Hay

Atomic Design

Atomic Design basiert auf den Gedanken, jedes Element einer Seite als Atom zu modellieren und zu einem Gesamtbild zu vereinen. Im Frontend werden dabei Atome designed, zum Beispiel ein Button, einen Link oder auch ein Textelement, welche wiederum einem Molekül zugewiesen werden.

Um dem Atomic Deisgn Gedanken praktisch zu vermitteln, wird als Beispiel eine Cluster Box Komponente modelliert. Sie besteht aus Titel, Bild und zusätzlich der Möglichkeit, verschiedene Inhalteboxen auf einem Platzhalter zu platzieren. Einer dieser dynamischen Boxen wiederum, hat die Möglichkeit verschiedene Atome zu rendern.

 

In Sitecore gibt es verschiedene Wege Item Renderings zu benutzen. Man kann zum Beispiel direkt ein „Item Rendering“ unter „Layouts“ anlegen. In diesem Beispiel beschränken wir uns allerdings auf den Razor-Aufruf in der View.

@Html.Sitecore().ItemRendering(child.Item)

Dadurch ist es möglich dem Atom eine eigenes View- bzw Controller-Rendering mitzugeben.

 

Rendering dem Atom zuweisen

Als erstes müssen die Templates der Atome mit dazugehörigen Renderings anlegelegt werden. In unserem Beispiel soll das Atom „Button“ durch ein View-Rendering angeziegt werden. Dabei muss in den „Standard Values“ des Button-Templates unter „Layout“ -> „Renderers“ die Item Id des Renderings eingetragen werden. Als Rendering kann aber natürlich auch ein Controller Rendering gewählt werden.

Das Gleiche muss mit den anderen Atomen gemacht werden. Dies ist gleichzeitig auch die Besonderheit der Item Renderings. Der Inhalt muss die Render-Information selber mitbringen, so dass die Komponente verschiedene Atome rendern kann.

Cluster Box erstellen

Als nächstes erstellen wir das äußere Cluster Box Template. Diese besteht aus einem Titel, Bild und einem Platzhalter.

Jetzt fehlt noch das innere Inhaltebox-Template. Diese besteht aus Titel und Intro. Ausserdem haben wir uns dazu entschieden, die Atome als Subitems der Inhaltebox hinzuzufügen. Daher weisen wir unter“Insert Options“ der Inhaltebox, die Atome der Komponente zu.

Im Experience Editor hat die Inhaltebox nun schon Form angenommen.

An sich übernimmt das „Insert Item“ die Funktion eines Platzhalters. Im Content Editor lässt sich die Struktur gut verdeutlichen, nachdem schon einige Atome erstellt wurden.

Aufrufen der Item Renderings in der View

Als letztes müssen noch die Views angepasst werden. In unserem Projekt werden die Models mit Hilfe von Glass Mapper generiert. Die Inhaltebox:

Die foreach-Schleife holt sich dabei alle Kinder unter der Content Cluster Box Datasource. Die View des Button:

Das Besondere hier ist, dass das Item Rendering verschiedenes HTML rendern kann, je nachdem was für ein Atom der Redakteur hinzufügt. Dadurch wird der Redakteur bei der Umsetzung des Atomic Design noch besser an die Hand genommen und der Mehraufwand durch Hinzufügen von Items lässt sich durch die gewonne Variabilität verschmerzen. Das Ergebnis:

Zusammenfassung

Item Renderings werden selten genutzt, obwohl sie eigentlich eine sehr nützliche Funkltionaität besitzen. Durch sie kann eine Komponente, Atome bzw Subkomponenten mit verschiedenen HTML rendern. Dies kann natürlich auch mit Platzhaltern erreicht werden, aber oft wird nicht die komplette Funktionalität dieser benötigt.

Ausserdem fördern zu verschachtelte Platzhalter nicht gerade die Übersichtlichkeit für den Redakteur, der dadurch viele verschiedene Datasources für eine Komponente verwalten muss.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>