CMS Vorlagen anlegen und verwalten

Eine Vorlage bestimmt, wie ein Inhaltsbereich im Shop aussieht. Du legst sie einmal an und verwendest sie danach in beliebig vielen Universal-Elementen wieder. Die Verwaltung findest du in der Administration unter Inhalte → CMS Vorlagen.

Eine Vorlage anlegen

Öffne Inhalte → CMS Vorlagen und klicke auf Neue Vorlage.
Vergib einen Namen – daran erkennst du die Vorlage später bei der Auswahl im Element.
Fülle die drei Editoren:

Inhalt – das HTML/Twig-Markup, das die Darstellung erzeugt.
Stylesheet – das CSS für die Vorlage.
JavaScript – optionaler Code für interaktive Funktionen.

Klicke auf Speichern.

In der Übersicht siehst du zu jeder Vorlage den Namen sowie das Erstell- und Änderungsdatum. Über das Kontextmenü am Zeilenende kannst du eine Vorlage bearbeiten oder löschen. Das Löschen lässt sich nicht rückgängig machen.

Auf die Inhalte der Elemente zugreifen

Das eigentliche Zusammenspiel entsteht im Inhalt-Editor: Dort steht dir die Liste der im Element gepflegten Einträge als Variable items zur Verfügung. Jeder Eintrag bringt die Felder mit, die du am Universal Element ausfüllst. Nur aktive Einträge landen in items – inaktive werden automatisch ausgelassen.

Ein Eintrag (item) stellt unter anderem diese Felder bereit:

item.title – Titel
item.subtitle – Untertitel
item.button – Button-Text
item.url – Link (Kategorie, Produkt, Landingpage oder externe Adresse)
item.text – formatierter Inhalt (HTML; im Template mit dem Filter raw ausgeben)
item.color1 bis item.color3 – die drei Farbwerte
item.media1 bis item.media4 – die Bilder (die Bild-Adresse z. B. über item.media1.url)
item.product – das verknüpfte Produkt
item.cssclass – die individuelle CSS-Klasse des Eintrags

Ein einfaches Beispiel für den Inhalt-Editor:

<div class="teaser-grid">
    {% for item in items %}
        <a href="{{ item.url }}" class="teaser {{ item.cssclass }}">
            {% if item.media1 %}
                <img src="{{ item.media1.url }}" alt="{{ item.title }}">
            {% endif %}
            <h3 style="color: {{ item.color1 }}">{{ item.title }}</h3>
            <p>{{ item.subtitle }}</p>
            {% if item.button %}<span class="btn">{{ item.button }}</span>{% endif %}
        </a>
    {% endfor %}
</div>

Wie CSS und JavaScript eingebunden werden

Damit sich die Vorlagen im Shop nicht gegenseitig beeinflussen, bindet das Plugin deinen Code gekapselt ein:

Stylesheet: Dein CSS wird automatisch auf genau dieses eine Element begrenzt. Du kannst deine Regeln deshalb verschachtelt schreiben (z. B. .teaser { color: red; }), ohne einen Präfix zu setzen – sie wirken ausschließlich innerhalb deines Elements und stören den restlichen Shop nicht.
JavaScript: Dein Code läuft in einem eigenen, gekapselten Bereich. Er wird beim Anzeigen der Seite einmal ausgeführt und stört keine anderen Skripte.

Mitgelieferte Design-Stile

Für drei häufige Muster liefert das Plugin fertige, responsive CSS-Stile mit. Du nutzt sie, indem du dein Markup in ein Element mit der passenden Klasse hüllst – das übrige Aussehen übernimmt der mitgelieferte Stil:

Bilderslider – Klasse coe-cms-universal-image-slider: großflächige Bilder mit zentriertem Titel, Untertitel und Button-Overlay. Innere Klassen u. a. image-slider-item, image-slider-title, image-slider-subtitle, image-slider-cta.
Banner-Boxen – Klasse coe-cms-universal-banner-boxes: quadratische Kacheln mit halbtransparentem Textbereich über dem Bild. Innere Klassen banner-box-item und banner-box-item-content.
Storytelling – Klasse coe-cms-universal-story-telling: abwechselnd angeordnete Bild-/Text-Reihen. Innere Klassen u. a. storytelling-item, storytelling-left, storytelling-right, storytelling-content.

Diese Stile sind ein optionaler Startpunkt. Du kannst sie unverändert verwenden, im Stylesheet der Vorlage anpassen oder ganz eigene Klassen einsetzen.