Dokumentation Blog für SW6 (Plugin für Shopware)

Link zum Plugin: https://bit.ly/netzperfekt-blog6

Das Plugin rüstet die momentan noch fehlende Blog-Komponente in Shopware 6 nach. Im Backend können beliebig viele Blog-Posts angelegt werden, dabei wird natürlich die Mehrsprachigkeit unterstützt. Das Blog kann über einen Block in beliebige Layouts der Einkaufserlebnisse eingebunden werden.

Zweck

Das Plugin rüstet die momentan noch fehlende Blog-Komponente in Shopware 6 nach. Im Backend können beliebig viele Blog-Posts angelegt werden, dabei wird natürlich die Mehrsprachigkeit unterstützt. Das Blog kann über einen Block in beliebige Layouts der Einkaufserlebnisse eingebunden werden.

  • Blog-Komponente für Shopware 6 mit unterschiedlichen Layouts
  • Kategorien und Produktzuordnung
  • Element für Einkaufserlebnisse
  • Zeitsteuerung von Blogposts, Mehrsprachigkeit
  • SEO-Unterstützung (URL, Meta Title + Description)

Wichtig: Update auf 1.1.0

Ab der Version 1.1.0 wird der Shopware SEO Link Mechanismus verwendet.

Daher ist es notwendig, dass Sie nach der Aktualisierung auf die 1.1er Version unbedingt den SEO Cache leeren und diese SEO Links neu generieren lassen!

Klicken Sie dazu  unter
Admin -> Einstellungen -> System -> Caches & Indizes
nacheinander alle drei Buttons:

  1.  Caches leeren
  2. Löschen und Aufwärmen
  3. Indizes aktualisieren

Der letzte Schritt kann ein Weilchen dauern. Danach stehen die Blogbeiträge im Frontend wieder zur Verfügung.

Installation und Einrichtung

  • wie gewohnt installieren + aktivieren

Für die Darstellung stehen sowohl in der Übersichtsliste als auch in der Detailanzeige zwei unterschiedliche Layouts (kleines / großes Bild) zur Verfügung (Einstellbar in den Plugineinstellungen).
Metainformationen eines Beitrags, Tags, Autor und Kategorie können optional angezeigt werden. Ebenso ist die Darstellung von zugehörigen Blogbeiträgen auf den Artikeldetailseiten möglich.

Zu den CMS Seiten für Detailansicht siehe das Kapitel Blog Post Layouts.

 


  • Unter "Einstellungen - Plugins - Blog-Kategorien" können Kategorien angelegt werden (optional)


  • Unter "Einstellungen - Plugins - Blog-Autoren" können Autoren angelegt werden (optional)

Blog Beiträge erstellen

Reiter Hauptdaten

Geben Sie auf dem ersten Reiter den Titel und Hauptdaten zum Blogpost an. Steuern Sie, wann ein Blogpost erscheint und geben Sie einen Autor an. Blogeinträge können genau einer Kategorie zugeordnet werden.

(Autoren und Kategorien können unter Einstellungen -> Plugins im entsprechenden Menüpunkt angelegt werden.)

Zur weiteren Verfeinerung und Strukturierung können dem Blogeintrag Tags zugeordnet werden.

Der Slug (Bestandteil der sprechenden Url) wird automatisch generiert, kann aber auch vorgegeben werden.


Reiter Inhalt

Ein Blog-Artikel besteht aus dem (optionalem) Teaser und dem Inhalt.
Einem Blogpost können Produkte zugeordnet werden, die in der Detailansicht im Slider dargestellt werden.

Produktzuordnungen sind unabhängig der Sprachversion! Hier kann keine unterschiedliche Zuordnung EN / DE erfolgen.

Reiter Bilder / Medien

In diesem Bereich können das Hauptbild des Blogbeitrags sowie ein optionales Vorschaubild zugeordnet werden.

Bilder und Produkte sind unabhängig der Sprachversion! Hier kann keine unterschiedliche Zuordnung EN / DE erfolgen.

Ausserdem kann dem Blogartikel eine Galerie mit mehreren Bildern hinzugefügt werden. Die Bilder werden dazu über die Funktion "hochladen" oder aus der Mediathek bzw. mit Dropdown auf die große Fläche hinzugefügt. Sind die Bilder dann unten klein in den Thumbnails dargestellt, können Sie dort umsortiert oder wieder entfernt werden.
Der Bildtitel aus der Mediathek kann bei der Ausgabe angezeigt werden.

Reiter Zusatzinhalte

Hier können zusätzliche Inhalte einem Blogbeitrag hinzugefügt werden. Z. B. für Rezepte oder Bastelanleitungen, die mehrere Schritte umfassen. 

Die Felder Titel und Inhalt oben bilden eine Kombination für z. B. Zutaten. Diese wird in der Ausgabe etwas hervorgehoben dargestellt und kann aus- oder eingeklappt werden.

Mit der Schaltfläche "Neues Item hinzufügen" werden die Schritte angefügt. Diese können über die Pfeile rauf und runter links vom Text in der Reihenfolge nach oben / unten verschoben werden. Ein Schritt kann einen Titel, einen Text und ein Bild haben.

Reiter Metadaten

An dieser Stelle werden die Metadaten des Beitrags gepflegt.

Über das Zusatzfeld können weitere Inhalte hinzugefügt werden. Zur Darstellung im Frontend muss eine Anpassung des Templates erfolgen (post.translated.custom). So können Sie z. B. im Zusatzfeld einen YouTube Link oder Code eingeben und die Ausgabe so anpassen, dass im Blogbeitrag die Information erscheint. 

Ausserdem sind Shopware spezifische Custom Fields möglich (siehe Abschnitt Custom Fields)

Hinweis: diese Möglichkeit erfordert Erfahrung in der Anpassung von Templates.


Blog einbinden

Um Blogbeiträge anzuzeigen, fügen Sie einen Block in das Layout einer Erlebniswelt ein.

Der Block ist über Block-Kategorie "Text & Bild" als Element "Blog" verfügbar. 


Die Darstellung der Beiträge ist über verschiedene Einstellungen steuerbar.

Kategorie und Tags sind dabei mit logischem UND verknüpft (zeige Beiträge, die Kategorie 2 zugeordnet sind UND den Tag tag1 haben).

Es können mehrere Tags angegeben werden, die dann ODER verknüpft sind (zeige Beiträge, die Kategorie 2 zugeordnet sind UND den Tag tag1 oder tag2... haben)


Zu den Erlebniswelten allgemein und den Einrichtungen bietet die Shopware 6 Benutzerdokumentation einige Informationen.
Als Hinweis: Die Einstellungen können je nach Sprache unterschiedlich sein - hier bei Fehlersuche (die Kategorie wird nicht dargestellt oder ähnliches) auch unbedingt die Einstellungen in den unterschiedlichen Sprachen prüfen.


Blog Post Layouts

Ab der Version 1.1.0 ist es möglich, die Darstellung der Blogposts individueller vorzunehmen. 

Die Einkaufswelten Möglichkeiten von Shopware lassen sich an dieser Stelle nicht wirklich anwenden, daher haben wir eine andere Möglichkeit geschaffen, flexibel die Darstellung der Beiträge an die Erfordernisse anzupassen.

Ohne diese Einstellungen wird weiterhin der Standard Blogpost verwendet.

Layout definieren

Um ein anderes Layout zu verwenden muss zunächst dieses Layout geschaffen werden. Dazu legen Sie ein Einkaufserlebnis neu an. 

Das Kernstück in dieser neuen Einkaufswelt ist ein neues Element: Blog-Detailseite / Blog-Element.

Wenn Sie dieses Element hinzufügen, haben Sie ein Element des Beitrags zur Seite hinzugefügt. Diesen Vorgang müssen Sie also je nach Anzahl der Elemente mehrfach durchführen. 

Das eingefügte Element können Sie dann bearbeiten:

Hier sehen Sie, welche verschiedenen Elemente Sie ansprechen können.

Bei einigen Elementen sind weitere Einstellungen möglich.

Titel 

Dieses Element fügt den Titel ein. Hier können Sie wählen, welcher Art die Überschrift ist - Standard ist H2.

Inhalt

Dieses Element fügt den Inhalt ein.

Teaser

Dieses Element fügt den Teaser ein.

Meta-Informationen

Dieses Element fügt die Meta-Informationen ein. Hier können Sie auswählen, welche angezeigt werden.

Autor

Dieses Element fügt Informationen zum Autor ein. Hier können Sie auswählen, welche angezeigt werden.

Bild

Dieses Element fügt ein Bild zum Blogbeitrag ein. Hier können Sie wählen, ob das Haupt- oder Vorschaubild verwendet wird, ob es vollflächig oder als kleines Bild und in welcher Höhe es eingefügt wird.

zugeordnete Produkte

Dieses Element listet die zugeordneten Produkte auf.

Die Produkte werden als Slider dargestellt. Die Einstellungen zum Layout des Shopware Produktkastens, Anzeige Modus des Bildes und zu minimaler Breite können in diesem Dialog eingestellt werden.

Zusatzinhalte

Dieses Element fügt die im Reiter "Zusatzinhalte" einem Blogbeitrag zugeordneten Extra-Inhalte ein (z. B. Rezepte).

Bilder / Medien

Mit diesem Element können die Bilder / Medien eines Blogbeitrags als Galerie angezeigt werden. Neben der Höhe der Medien kann eingestellt werden, ob ein Galeriezähler (2 von 5) oder die Bildtitel (aus der Medienverwaltung) angezeigt wird.

Social Sharing Icons

Dieses Element fügt den Icons zum Teilen in Sozialen Netzwerken ein.

Inhalt Zusatzfeld

Dieses Element fügt das zum Blogbeitrag vorhandene Zusatzfeld für Inhalte ein, sofern vorhanden. Siehe hierzu den Abschnitt Custom Fields.


Mit diesen Elementen können Sie die Ausgabe des Blogbeitrags nun individuell gestalten. Dabei werden die Element-Typen zur besseren Orientierung am Element dargestellt.
Sie können das Vollflächige oder das Layout mit Sidebar wählen - auch in unterschiedlichen Bereichen.

Im folgenden Bereich wurde der Titel über die gesamte Breite und darunter in der Sidebar Vorschaubild und Autorinformation sowie der Inhalt im Bereich daneben angeordnet.

Insgesamt wurde hier 4 mal das Element eingefügt und entsprechend angepasst.

Die weiteren Elemente der Einkaufswelten wie z. B. normalen Text etc. können Sie ausserdem verwenden - hier steht dann allerdings für jeden Blogbeitrag der gleiche Inhalt.


Technisch ist leider ein Zugriff mit den Shopware Standard Bild oder Textelementen auf die Bloginhalte derzeit nicht möglich.

Layout zuweisen

Das im ersten Schritt definierte Layout muss nun zugewiesen werden, damit die Blogbeiträge abweichend vom Standard angezeigt werden.

In den Einstellungen zum Plugin gibt es dort die zusätzliche Einstellung "CMS-Seite für Blog-Detailansicht". Wählen Sie dort die angelegte individuelle Ansicht aus. 

Die Zuordnung kann je nach Verkaufskanal vorgenommen werden.

Wenn Sie darüber hinaus verschiedene Vorlagen für verschiedene Kategorien verwenden möchten, da News anders dargestellt werden sollen als Produktneuheiten, können Sie unter Einstellungen - Plugins - Blog-Kategorien einer Kategorie abweichend vom Standard bzw. in den Einstellungen angegebenem Layout, abweichend ein eigenes Layout zuweisen.

SEO-Urls

Die Erzeugung der SEO-Urls kann frei über die Shopware-Mechanismen angepasst werden. Das SEO-Template kann über das Menü Einstellungen / Shop / SEO bearbeitet werden: 

Die möglichen Platzhalter können aus der Liste der Möglichen Variablen ausgewählt werden. Bitte beachten Sie, dass dies durchaus fortgeschrittene Einstellungen sind, wir verweisen hier auf die Shopware 6 Dokumentation. Etliche Platzhalter müssen darüberhinaus über translated angesprochen werden, damit die jeweilige Sprachversion verwendet wird.

Wichtig: nach Änderungen am SEO Url-Template muss der SEO-Index neu erzeugt werden. Dies erfolgt über das Menü Einstellungen / System / Caches / Indizes aktualisieren. Je nach Anzahl der Produkte und sonstigen SEO-Urls kann dies einige Zeit in Anspruch nehmen!

Wird dagegen ein Blog-Post bearbeitet und gespeichert, wird die SEO-Url für diesen Post direkt erzeugt, hier ist keine gesonderte Aktualisierung des SEO-Index notwendig. 

Rich Snippets + RSS Feed

Das Blog-Plugin stellt automatisch auf jeder Post-Detailseite sogenannte Rich Snippets im JSON-LD-Format bereit. Das sind in die Seite eingebettete Informationen, die hilfreich für Suchmaschinen sind und die Auffindbarkeit der Blog-Informationen und somit letztlich das Ranking verbessern.

Weiterhin steht unter der Url www.ShopName.de/blog.rss ein RSS-Feed für alle Blog-Posts zur Verfügung (die Feed-Adresse ist nicht änderbar). Die Beschreibung (description-Knoten im Feed) kann über die Shopware-Textbausteine (Admin-Menü Einstellungen / Shop / Textbausteine) festgelegt werden (Textbaustein: netzp.blog.feed.description).

Weiterhin wird in den Seitenheader des Shops ein sogenannter Auto-Discovery-Eintrag eingefügt: hierüber ist der Feed für Feed-Reader und andere Programme einfacher auffindbar. Der Titel kann auch hier über einen Textbaustein (netzp.blog.feed.metatitle) benannt werden.

Suche und Social Sharing

Suche im Backend

Das Blog-Plugin integriert die Suche in der Administration - einfach in die globale Suche den gewünschten Suchbegriff eingeben: 


Suche im Frontend

Dies wird über unser Zusatzplugin Erweiterte Suche ebenfalls unterstützt. Hiermit können dann - neben Herstellern, Kategorien, CMS-Seiten - auch Blog-Einträge im Frontend aufgefunden werden.

Social Sharing

Ebenfalls über ein weiteres Plugin (Social Sharing via Shariff) können Social Sharing-Buttons datenschutzkonform für die gängigen Social Media Dienste wie Facebook, Twitter, Instagram etc. eingebunden werden. 

Sitemap

Alle Blog-Posts werden automatisch in die von Shopware 6 erzeugte Sitemap mit aufgenommen und können somit schneller/leichter von Suchmaschinen indiziert werden. Die Erzeugung der Sitemap kann manuell über den Konsolenbefehl bin/console sitemap:generate angestossen oder über einen Cron-Job automatisiert werden. Weitere Informationen dazu finden sich in der Shopware-Dokumentation.

Die Sitemap eines Shops ist grundsätzlich unter der Url www.Shop.de/sitemap.xml abrufbar.

Custom Fields

Neben dem festeingebauten Zusatzfeld können zusätzlich die Shopware-Zusatzfelder (custom fields) verwendet werden. Zur generellen Einrichtung und Verwendung sei auf die zugehörige Shopware 6-Dokumentation verwiesen. Custom fields können für Blog-Posts, Kategorien und Autoren eingerichtet werden.

Verwendung in Templates:

Zunächst muss ein entsprechender custom field-Block in der gewünschten Post-Detailseite eingebunden werden (siehe auch hier). 


Anschließend kann in einem eigenen Theme (Dokumentation zur grundsätzlichen Erstellung) der entsprechende Block überschrieben werden, das passende Template heisst views/storefront/elements/cms-element-netzp-blog6-detail.html.twig.


Eine beispielhafte tabellarische Ausgabe aller vorhandenen custom fields zu einem Blog-Post sieht wie folgt aus:

{% sw_extends '@Storefront/storefront/element/cms-element-netzp-blog6-detail.html.twig' %}

{% block blog_content_post_inner_custom %}
    <h3>Custom fields:</h3>
    {% for field, value in post.translated.customFields %}
        {{ field }}: {{ value }}<br>
    {% endfor %}
{% endblock %}


Achtung: zum derzeitigen Zeitpunkt (Januar 2021) ist die Verwendung von custom fields in der Shopware-Administration teilweise noch fehlerbehaftet. Das zeigt sich vor allem dort, wo mit mehrsprachigen custom fields gearbeitet wird. Als Abhilfe kann/muss nach jeder Umschaltung der Sprache (z.B. in einem Blog-Post) das Backend neugeladen werden (browser reload), dann lassen sich die Inhalte in mehrsprachigen custom fields korrekt speichern.

Das Problem ist ist bereits in mehreren Shopware-Supporttickets gemeldet worden und wird hoffentlich im Laufe der Zeit behoben. Es betrifft generell alle custom fields in der Administration, also nicht nur das Blog-Plugin. 

Shopware Api Endpunkte

Direkter Zugriff über Shopware API Endpunkte (nur für Programmierung relevant):

Das Blog-Plugin verwendet zur Datenspeicherung die SW6-Entities und da das API grundsätzlich für alle Entities funktioniert, klappt das dann auch mit dem Blog-Plugin.

Die Namen sind s-plugin-netzp-blog (für die posts) und s-plugin-netzp-blog-category (für die kategorien).

(Der grundsätzliche Zugriff ist hier ganz gut beschrieben: https://docs.shopware.com/en/shopware-platform-dev-en/admin-api-guide/reading-entities)

Fehlerbehebung

Links zu Blogartikeln sehen "komisch" aus - nicht als Name sondern mit einer ID in der Url?

Bitte lassen Sie die SEO Links neu generieren! (siehe Schritt 3 - SEO Indizes neu generieren)


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