Betriebsurlaub

Unser Büro ist vom 19.04. bis einschließlich dem 26.04.2019 nicht besetzt. Wir stehen Ihnen ab Montag, dem 29. April 2019 wieder regulär zur Verfügung.

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:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.

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.

Neues-Inhaltselement-erstellen-Button

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

Neue-Inhaltselemente-Gruppe-erstellen

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".

Neues-Element-durch-plus-hinzufugen

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

Neues-Inhaltselement-erstellen

Grundeinstellungen des Inhaltselements

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

Grundeinstellungen-des-Inhaltselements

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

Sprite-fur-Inhaltselement-hinterlegen

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.

Inhaltselement-mit-neuem-Icon

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.

Feld-oder-Fieldset-hinzufugen

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.

Fieldset-Einstellungen-erstellen

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.

Neues-Feld-zum-Einstellungs-Fieldset-hinzufugen

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.

Hinweistextfeld-hinzufugen

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.

Hinweis-Typ-Feld-erstellen

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.

Neuen-Wert-in-der-Werte-Tabelle-hinzufugen

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

Wertetabelleeintrag-Warnung

Fehler-in-der-Wertetabelle

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.

warning-als-Standardwert-hinterlegen

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.

Template-Tab-Reiter-Inhaltselemente-Editor

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:

Finales-Template-Hinweis-Text

Inhaltselement verwenden

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

Hinweis-Element-in-der-Liste

Konfiguration-des-Hinweistext-Inhaltselements

Hinweistext-im-Frontend