Tutorial: Neues Hinweis-Inhaltselement erstellen

In diesem Tutorial wird Schritt für Schritt gezeigt, wie Sie ein eigenes Hinweis-Inhaltselement erstellen können. Hierbei soll ein HTML-Feld zur Definition des Hinweis-Textes implementiert werden. Des Weiteren soll über ein Auswahlfeld definierbar sein, ob die Hinweisbox als Fehler- oder als Warnung dargestellt werden soll.

Das Inhaltselement sieht in der Storefront anschließend wie folgt aus:

Vorbereitung

Als Vorbereitung erstellen wir zunächst eine neue Inhaltselemente-Gruppe. Dies ist nicht zwangsläufig notwendig, sorgt jedoch später für eine bessere Übersicht.

Wechseln Sie hierzu bitte in den Tab-Reiter Inhaltselemente Editor (Experten-Einstellung) und klicken hier auf die Schaltfläche Inhaltselement oder Gruppe hinzufügen.

Wählen Sie im folgenden Dialog-Fenster die Option Neue Gruppe erstellen aus und hinterlegen Sie eine Beschreibung / Bezeichnung für die Gruppe.

Inhaltselement erstellen

Nachdem wir die Gruppe erstellt haben, erstellen wir nun das eigentliche Inhaltselement. Klicken Sie hierzu auf das Plus-Icon in der Zeile der Gruppe "Eigene".

Hinterlegen Sie anschließend die Bezeichnung des neuen Inhaltselements sowie einen Key. Beachten Sie bei dem Key die erlaubten Zeichen.

Grundeinstellungen des Inhaltselements

Nachdem das Inhaltselement erstellt wurde, kann es über das Stift-Icon bearbeitet werden.

Wechseln Sie anschließend in den Tab-Reiter Einstellungen und hinterlegen hier "sprite-exclamation" als Wert für das Feld Icon-Klasse.

Weitere Einstellungen sind für dieses Inhaltselement an dieser Stelle nicht notwendig. Nachdem Sie die Einstellungen gespeichert haben, sollte das Icon in der Baumansicht entsprechend dargestellt werden.

Eine Übersicht der Icons die in Shopware zur Verfügung stehen finden Sie unter:
http://p.yusukekamiyamane.com/

Felder-Konfiguration

Im nächsten Schritt erstellen wir die beiden benötigten Konfigurationsfelder. Wechseln Sie hierzu in den Tab-Reiter Felder-Konfiguration und klicken Sie anschließend auf Feld oder Fieldset hinzufügen.

Einstellungen-Fieldset erstellen

Für eine übersichtlichere Struktur können die Konfigurationsfelder in Fieldsets unterteilt werden. Aktivieren Sie die Option Neues Fieldset erstellen und geben Sie ein Label für das Fieldset ein.

HTML-Feld für Inhalt erstellen

Nachdem wir das Fieldset erstellt haben, können wir das erste Konfigurationsfeld anlegen. Um direkt eine korrekte Zuweisung zu erhalten, reicht hierbei ein Klick auf das Plus-Icon in der Zeile des Fieldsets.

Als Beschreibung wählen wir den Wert Hinweistext und definieren, dass es sich bei diesem Feld um ein Feld vom Typ TinyMCE (Html-Editor) handelt. Damit wir auf die Konfiguration im Template zugreifen können, muss darüber hinaus noch der Name der Variable hinterlegt werden. Für dieses Feld setzen wir hier den Wert content.

Speichern Sie die Konfiguration und schließen sie anschließend den Konfigurator dieses Feldes.

Auswahlbox-Feld für Hinweis-Typ erstellen

Nachdem nun das erste Feld erstellt wurde, erstellen wir das Zweite über den selben Weg. Hierbei wählen wir dieses mal Auswahlbox als Feld-Typ und definieren type als Variablenname.

Speichern Sie das Formular und wechseln Sie auf den nun verfügbaren Tab-Reiter Werte-Tabelle. Klicken Sie hier auf die Schaltfläche Hinzufügen, um einen neuen Wert für die Auswahlbox zu hinterlegen.

Legen Sie über diesen Weg die beiden folgenden Werte an:

Abschließend wechseln wir noch einmal in den Tab-Reiter Feld-Einstellungen und geben hier als Standardwert warning an. Somit wird bei einem neu erstellen Hinweis-Inhaltselement der Hinweis-Typ Warnung vorausgewählt.

Template bearbeiten

Nachdem nun die Konfigurationsfelder hinzugefügt wurden, befassen wir uns mit dem Template des Inhaltselements. Hierzu wechseln wir auf den Tab-Reiter Template.

Hierbei ist zu erkennen, dass das Shopware CMS System bereits ein Grundgrüst für das Template erstellt hat. In der ersten Zeile wird die Smarty Alias-Variable $storage erzeugt, über die wir Zugriff auf die Konfigurationsfelder erhalten. Zusätzlich wurde ein DIV-Container erstellt, der als Wrapper für das Inhaltselement dient. Diese Struktur muss bebehalten bleiben, damit Funktionen wie die Definition der Außen- und Innenabstände für dieses Inhaltselement funktionieren.

Wir bearbeiten das Template, indem wir den folgenden Quellcode in dem exitsierenden DIV-Container platzieren:

<div class="alert is--{$storage.type} is--rounded">
    <div class="alert--icon">
        <i class="icon--element icon--warning"></i>
    </div>
    <div class="alert--content">
{$storage.content}
    </div>
</div>

Somit sollte das Template nun wie folgt aussehen:

Inhaltselement verwenden

Nachdem wir das Template angepasst haben, ist unser erstes Inhaltselement fertig. Dieses kann ab jetzt in jeder CMS Seite verwendet werden.