Dokumentation ContentBuilder CMS (Plugin für Shopware)

Link zum Plugin: http://bit.ly/netzperfekt-contentbuilder

Mit dem ContentBuilder CMS können Sie ganz einfach beliebige Inhalte im Shopware-Shop pflegen. Das System ist dabei block-basiert, Ihnen stehen über 300 bereits vordefinierte Inhaltsblöcke zur Verfügung, die schnell und einfach beliebig kombiniert werden können. Das Prinzip ist aus HTML-Baukästen oder WordPress-Pagebuildern bekannt.

Das alles funktioniert mit diesem Plugin nun auch in Shopware, und zwar an jeder Stelle, wo der bisherige Wysiwyg-Editor (TinyMCE) zur Verfügung steht. Hier gibt es den ContentBuilder-Button - einfach draufdrücken, und schon geht es los!

Noch ein Hinweis: der ContentBuilder soll in keiner Weise die Einkaufswelten ersetzen. Daher gibt es hier neben den Inhaltsblöcken auch keine weiterführenden Widgets (wie Artikelanzeige, Slider, Kategorien etc.). Diese sind über die Einkaufswelten bereits bestmöglich in Shopware abgebildet. 

Einkaufswelten und der ContentBuilder ergänzen sich vielmehr optimal: Sie können über das Text-Element in allen Einkaufswelten auf den ContentBuilder zugreifen und hier beliebige Inhaltsblöcke einfügen!


Benutzung

Der ContentBuilder kann in jedem Wysiwyg-Editor (TinyMCE) verwendet werden. Im nachfolgenden Beispiel ist die Bearbeitung einer Shopseite abgebildet:

Klicken Sie einfach auf den ContentBuilder-Button - das funktioniert so zum Beispiel bei Shopseiten, Artikelbeschreibungen, Kategorietexten, Einkaufswelten (Text-Element) und Blog-Beiträgen.

Hinweis: die Bearbeitung von Newsletter-Elementen ist derzeit noch nicht mit dem ContentBuilder möglich, da hier die notwendigen CSS-Angaben fehlen. Wir arbeiten aber daran ;-)

Sie sehen nun - vorausgesetzt, die Shopseite hatte bisher noch keinen Inhalt - einen leeren ContentBuilder:


Ein Klick auf "Click to add content" zeigt nun ein Menü an, um einfache Blöcke und Inhaltselemente hinzuzufügen:

Hier können etwa Absätze (Paragraph), Überschriften (Headline), Bilder, Listen, Tabellen und einige andere Elemente eingefügt werden.

Die eigentliche Funktionalität steckt jedoch in den Blöcken. Klicken Sie im Menü an der rechten Fensterseite auf den Block-Button, erhalten Sie die Übersicht aller zur Verfügung stehenden Inhaltsblöcke:



In der oberen Menüzeile können Sie zwischen verschiedenen Bereichen wählen und ein Klick auf den gewünschten Block fügt diesen dann ein. Sie können anschließend den Inhalt beliebig bearbeiten und verändern.

Im ContentBuilder-Menü können Sie noch auf eine reine HTML-Darstellung umschalten und mit "OK" den Inhalt speichern. Sie befinden sich dann wieder im Shopware-Wysiwyg-Editor. Die drei kleinen Icons darunter erlauben die Umschaltung der Darstellung zwischen Desktop, Tablet und SmartPhone - so können Sie die Inhalte etwas besser auf unterschiedlichen Endgeräten kontrollieren.


Am oberen Fensterrand gibt es eine weitere Bearbeitungsleiste, die unter anderem die Formattierung ändert, aber auch Schriftarten, Farben und Zeilenabstand. Weiterhin können hier auch Symbole (Icons) ausgewählt und eingefügt werden.

 

Installation und Einrichtung

Das Plugin installieren Sie wie gewohnt im Plugin Manager im Shopware-Backend und aktivieren es anschließend. Bitte achten Sie darauf, das Theme neu zu compilieren und das Backend neu zu laden.

In den Plugin-Einstellungen können Sie noch wählen, ob Sie den standardmäßigen Wysiwyg-Editor (TinyMCE) in Shopware komplett abschalten möchten und durch einen reinen HTML-Codeeditor (CodeMirror) ersetzen möchten. Der TinyMCE verändert leider gelegentlich den HTML-Quellcode mehr oder weniger eigenmächtig, was zu unschönen Ergebnissen führen kann und die Fehlersuche erschwert. 

Wichtig: nach einer Änderung der Plugin-Settings sollten Sie den Cache löschen und zur Sicherheit das Theme neu compilieren sowie das Backend neu laden.

Bilder einfügen

Bilder können Sie auf zwei verschiedene Arten einfügen: entweder über die Eingabe einer direkten URL (sinnvoll, wenn das Bild extern auf einem anderen Server liegt) oder über Auswahl aus der Shopware Medienverwaltung.

Wählen Sie zunächst im gewünschten Bild das Bildauswahl-Symbol rechts oben.  Nun öffnet sich der Eingabedialog für die Bildadresse; hier können Sie die bereits erwähnte Bildadresse (vollständige URL) eingeben und auf OK drücken. Das Bild wird entsprechend angezeigt.

Wenn Sie ein Bild aus der Shopware-Medienverwaltung auswählen möchten, geben Sie jedoch keine Bildadresse ein, sondern klicken stattdessen auf den Auswahl-Button rechts neben der Adresse (drei Punkte).

Nun erscheint der Auswahl-Dialog der Medienverwaltung und Sie können ein beliebiges Bild auswählen, das in den obigen Eingabedialog übernommen wird. Ein Klick auf den OK-Button kehrt dann wiederum zum ContentBuilder zurück. 

Optional können Sie noch einen Titel für ein Bild vergeben (im Feld Title) sowie einen Link auf das Bild legen.

Hinweis: aufgrund des blockbasierten Prinzips können Bilder nicht nachträglich in der Größe verändert werden, diese wird vom jeweiligen Inhaltsblock definiert. Sie können Bilder (und natürlich auch alle anderen Inhalte) jedoch nachträglich entweder im HTML-Quellcode oder über den Shopware-Wysiwyg-Editor bearbeiten.

Eigene Inhaltsblöcke

Sie können zusätzlich eigene Inhaltsblöcke definieren. Diese erhalten dann ein eigenes Menü im ContentBuilder und können wie gewohnt verwendet werden. Dies ist zum Beispiel dann nützlich, um die Inhaltsblöcke exakt auf Ihr Shop-CI anzupassen und so immer wiederkehrende Inhaltselemente schnell im Zugriff zu haben.

Im obigen Beispiel sind zwei eigene Blöcke definiert, die dann im Menü Own Snippets erscheinen.

Damit das funktioniert, legen Sie bitte im Hauptordner Ihres Shops das Verzeichnis files/contentbuilder an. In diesem Verzeichnis muss weiterhin die Datei snippets.js vorhanden sein und einen bestimmten Aufbau haben. Weiterhin können Sie in diesem Verzeichnis auch die Vorschaubilder für die eigenen Inhaltsblöcke ablegen. Die Benennung ist dabei Ihnen überlassen, es sollten JPG oder PNG-Dateien mit maximalen Abmessungen von 250x145 Pixeln sein.

In der Datei snippets.js definieren Sie nun alle gewünschten eigenen Inhaltsblöcke, der Grundaufbau ist wie folgt:

var contentBuilderSnippets = [
    {
        'thumbnail': 'preview/article-02.png',
        'html':
            '<div class="row clearfix">' +
                '<div class="column full center">' +
                    '<h1 class="size-64 is-title1-64 is-title-lite">MOIN!</h1>' +
                    '\n<p style="border-bottom: 2.5px solid #e74c3c; width: 60px; display: inline-block; margin-top: 0"></p>' +
                '</div>' +
            '</div>'
    },
    {
        'thumbnail': '/files/contentbuilder/article-04.png',
        'html':
            '<div class="row clearfix">' +
                '<div class="column full center">' +
                    '<h1 class="size-64 is-title1-64 is-title-lite">MOIN MOIN!</h1>' +
                    '\n<p style="border-bottom: 2.5px solid #e74c3c; width: 60px; display: inline-block; margin-top: 0"></p>' +
                '</div>' +
            '</div>'
    }
];

Bitte achten Sie auf einen korrekten Aufbau der Javascript-Datei wie oben beschrieben, sonst kann es zu Fehlern im Plugin kommen! 


Die Liste kann beliebig lang werden, aber für eine bessere Übersicht sollten Sie nicht mehr als maximal 30-40 eigene Blöcke hinzufügen.

Im Feld thumbnail kann jeweils das Vorschaubild hinterlegt werden, dieses wird in der Menüauswahl der Inhaltsbllöcke angezeigt; die Bildgröße (JPG oder PNG) sollte 250x145 Pixel nicht überschreiten.

Im Feld html definieren Sie nun Ihren gewünschten Inhaltsblock. Das können sowohl kurze Abschnitte, aber problemlos auch längere Blöcke oder sogar eine ganze Inhaltsseite sein. Sie können dabei auf sämtliche CSS-Klassen zurückgreifen, die in Shopware oder Ihrem Theme zur Verfügung stehen. Der ContentBuilder sorgt dann automatisch dafür, dass die Inhalte der Blöcke bearbeitet werden können.

Hinweis: Zur Sicherheit sollten Sie nach Änderungen der eigenen Blöcke jeweils das Theme neu compilieren und das Backend neuladen.


Wir wünschen Ihnen viel Erfolg 
mit unserem Plugin und 
gute Geschäfte mit Shopware.