Du möchtest zusätzliche Tabs bei Shopware 5 einbinden? Ok dann kauf dir doch das Plugin! Achsoooo du willst es lieber selber machen. Ja na gut dann erklär ich dir hier mal kurz wie das funktioniert. ;)

Vorab: Wie man bei Shopware 4 eigene Tabs oder Reiter einbindet haben wir bereits 2014 in einem Beitrag gezeigt den ihr hier nachlesen könnt: „Shopware Tutorial – Individuelle Reiter auf Artikel-Detailseiten“ Sofern ihr noch mit Shopware 4 arbeitet könnt ihr den Rest des Artikels vergessen, den Link da oben klicken und den Anweisungen in dem Tutorial folgen. Der Rest kann sich die aktuelle Version weiter durchlesen.

Voraussetzungen: Dieser Beitrag setzt voraus, dass an einem zuvor angelegten Child-Theme gearbeitet wird. Alle erstellten Dateien werden in dem Ordner dieses Child-Themes abgelegt.

Inhaltsübersicht, Zusätzliche Tabs bei Shopware 5:

• Schritt 1: tabs.tpl anlegen
• Schritt 2: inhaltsstoffe.tpl anlegen
• Schritt 3: LESS Code erweitern
• Schritt 4: Freitextfelder anlegen
• Schritt 5: Textbaustein bearbeiten
• Bonus Material
• Quellen / Weiterführende Links

Zusätzliche Tabs bei Shopware 5 – Schritt 1: tabs.tpl anlegen

Genau wie bei der alten Version müssen zunächst einige Dateien angelegt werden. Die wichtigste ist die tabs.tpl – legen Sie diese Datei in folgendem Ordner an: ihrtheme/frontend/detail

Der Inhalt könnte folgendermaßen aussehen (Klicke auf Run Pen):

Code sichten Shopware 5 – Eigene Tabs anlegen – frontend/detail/tabs.tpl by Atilla Boz (@great2gether) on CodePen.

In diesem Beispiel wird ein Tab eingebunden. Wie man sieht wird im unteren Teil zu diesem Zwecke auch eine weitere Datei TPL eingebunden dessen Inhalt es nun auch zu definieren gilt.

Sofern du ein gekauftes Plugin modifizierst werfe unbedingt einen Blick in die eventuell vorhandene tabs.tpl Datei, einige Theme Hersteller haben dort bereits schon den Code für ein Tab eingebunden. Bei mir war das einmal der Fall als ich an dem Magazine Theme gearbeitet habe. In dessen tabs.tpl Datei war der Code für genau ein zusätzliches Tab bereits eingebunden und dem Freitextfeld attr4 zugeordnet. Das heißt in dem Fall müsste man nur noch das Freitextfeld mit genau dem Namen anlegen und den vorgegeben Textbaustein, in diesem Fall NewTabsDescription mit einem passenden Titel für den Reiter bestücken und prüfen welche zusätzliche Datei (hier: /tabs/news.tpl) für den Inhalt des Tabs eingebunden wird.

Wer aber gar keine Lust hat, dass die Daten des Parent-Themes verwendet werden, sollte in diesem Falle einfach auf die Nutzung des attr4 Feldes verzichten. Es ist eh ratsam, dass man sprechende Namen, also solche die beim Lesen schon verraten worum es geht, verwendet. So weiß man dass die Namen einzigartig sind / nicht von etwaigen gekauften Plugins verwendet werden und kann auch schneller arbeiten das man nicht ständig nachgucken was denn jetzt .attr4, .attr5, .attr19 oder .attr287. Je mehr Freitextfelder verwendet werden desto mehr Zeit und Nerven wird euch diese Vorgehensweise bei der späteren Arbeit am Code einsparen.

Zusätzliche Tabs bei Shopware 5 – Schritt 2: inhaltsstoffe.tpl anlegen

Lege nun die Datei inhaltsstoffe.tpl an die du im Ordner ihrtheme/frontend/detail/tabs ablegst. Du kannst die Datei natürlich auch anders nennen, nur dann darfst du nicht vergessen den Dateinamen in der tabs.tpl ebenfalls anzupassen. So könnte der Inhalt aussehen (Klicke auf auf Run Pen)::

See the Pen Shopware 5 – Eigene Tabs anlegen – frontend/details/tabs/inhaltsstoffe.tpl by Atilla Boz (@great2gether) on CodePen.

Sollen mehr als ein zusätzlicher Tab eingebunden werden muss man in der tabs.tpl die Blöcke kopieren (alles außer der Zeile die oben mit „extends file…“ beginnt) und dementsprechend die Inhalte anpassen. Statt attr4 sollte also überall attr5 (oder atr6, attr7 etc…) stehen und statt der inhaltsstoffe.tpl muss eine andere Datei eingebunden und natürlich auch erstellt werden. Und ganz wichtig passen Sie auch unbedingt den die variable „NeuerTab1“ aus gegen „NeuerTab2“ oder „NeuerTab3“ etc. Wer es professionell machen möchte verwendet wie oben bereits vorgeschlagen sprechende Namen, wann immer es sich anbietet.

Eigene Tabs in Shopware einbinden – Schritt 3: LESS Code erweitern

Damit alles gut aussieht muss man noch einen kleinen Code Schnipsel einbinden um die Abstände des / der neuen Tabs zu optimieren. Man kann diesen Code beispielsweise in der global.less Datei des Themes einbinden.


/* Anpassung wegen zusätzlichem Tab */
.custom-content--description {
.unitize-padding(30, 30);
}


Es wurden bisher noch gar keine Less Dateien angelegt? Gut dann brauchst du als erstes die Dateien all.less und modules.less die im Ordner frontend/_public/src/less deines Child-Themes (!) abgelegt werden müssen. Zusätzlich wird im Ordner frontend/_public/src/less/modules dann auch die global.less abgelegt. Was ist der Sinn? In der all.less wird die modules.less registriert / eingebunden in der dann schlussendlich die global.less Datei aus dem _modules Ordner eingebunden wird, die dann die ganzen LESS & CSS Befehle beinhaltet.

Zusätzliche Tabs bei Shopware 5 – Schritt 4: Freitextfelder anlegen

So in den letzen Schritten haben wir dafür gesorgt, dass bestimmte zusätzliche Inhalte in einem eigenen zusätzlichen Tab ausgegeben werden können. In diesem Schritt werden wir bestimmen welche Inhalte das sind, und in welcher Form der Shopware 5 Nutzer diese Attribute eintragen kann.

Zunächst einmal gehen wir dafür in den Bereich: Einstellungen > Freitextfeld-Verwaltung. Dort wird man dann eine Liste von von attr1 – attr20 sehen.

Nach einer neuen Installation sind attr1 – attr3 bereits konfiguriert während der Rest nicht konfiguriert ist. Da wir in unserem Beispiel die Variable attr4 verwenden müssen wir dieses Feld nun auch konfigurieren. Hierbei gehen wir davon aus, dass der Nutzer bei den Artikel-Details einen Text, nämlich die Inhaltsstoffe des Produkts, eingeben möchte.

Wenn wir nun in der Liste der nicht konfigurierten Attribute auf attr4 klicken können wir folgende Einstellungen vornehmen:

• Spaltentyp: An dieser Stelle empfehle ich „Größerer Text – TEXT“ auszuwählen.
• Support-Text: Hier kann man einen Beschreibungstext eingeben, der im Admin Bereich unter der Textbox steht. In diesem Fall könnte man dort zum Beispiel „Bitte geben Sie hier die Inhaltsstoffe des Artikels ein“ reinschreiben.
• Hilfe-Text: Kann man leer lassen
• Position: Mit der Zahl die hier eingeben wird bestimmt man die Reihenfolge der Tabs.
• Im Backend anzeigen: Hier muss das Häkchen gesetzt werden, damit das Feld im Backend / Admin Bereich des Shopware 5 Shops angezeigt wird. Macht man das nicht, können auch keine individuellen Texte eingetragen werden.
• Übersetzbar: Setzen Sie das Häkchen, falls Sie einen mehrsprachigen Shop betreiben. Auch wenn Sie es für die Zukunft mal planen, kann es nicht schaden das Häkchen jetzt schon zu setzen.

Jetzt, da attr4 konfiguriert ist wird der Eintrag auch in der oberen Liste angezeigt und ist somit aktiv. Falls noch weitere Tabs eingebunden werden sollen müssen hier dann auch die entsprechenden Freitextfelder dafür konfiguriert und aktiviert werden.

Wenn du alle Schritte erfolgreich erledigt hast kannst du im Backend einen Artikel bearbeiten und die Inhalte für das neu angelegte Freitextfeld eingeben. In diesem Beispiel wurde 2 Freitextfelder angelegt. Wenn man einen Artikel bearbeitet muss man beim Haupt-Bearbeitsungsformulars ganz nach unten navigieren und sieht dort nun die neu angelegten Freitextfelder.

Jetzt ist es fast geschafft – man muss nur noch den Text eingeben, der oben im Reiter stehen soll.

Eigene Tabs in Shopware einbinden – Schritt 5: Textbaustein bearbeiten

Im letzen Schritt ersetzen wir die Variable NeuerTab1 mit dem eigentlichen Text der als Überschrift für den Reiter verwendet werden soll. In unserem Fall ist es das Wort Inhaltsstoffe. Hierfür rufen wir zunächst einmal eine Artikel-Detailseite auf, damit der Textbaustein im System geladen werden kann und löschen danach noch einmal den Cache. Jetzt gehen wir in den Bereich Einstellungen > Textbausteine und suchen nach „NeuerTab“. Je nach dem ob wir einen oder mehrere neue Tabs angelegt haben werden hier nun die neu angelegten Variablen angezeigt. In der Zeile Name sehen wir unsere Variable, in der Zeile Wert daneben ein leeres Feld sehen – trage dort den Begriff / die Begriffe ein – so wie in diesem Screenshot:

Also: TPL Dateien anlegen, LESS erweitern, Attriibut-Feld(er) konfigurieren, Textbaustein bearbeiten – fertig. Eigentlich ganz einfach :)

Eigene Tabs in Shopware einbinden – Bonusmaterial

Tja was erwartet euch hier wohl für ein Bonus? – Ganz einfach hier zeige ich euch wie man bei Shopware 5 nicht nur einen sondern gleich 2 zusätzliche Tabs einbindet. Das hier ist der Code für eure tabs.tpl mit 2 neuen Tabs. Der eine ist für Inhaltsstoffe und der andere für Anwendungshinweise. Hierfür muss dann natürlich auch die entsprechende Datei (im Beispiel: anwendung.tpl) angelegt werden. So hier ist euer Bonus – bitteschön! (Auf Run Pen klicken):

Code sichten Shopware 5 – Eigene Tabs einbinden – tabs.tpl mit 2 zusätzlichen Tabs by Atilla Boz (@great2gether) on CodePen.

Und so könnte dann zum Beispiel das Ergebnis aussehen, wer es live sehen möchte kann auf das Bild klicken und gelangt zur Webseite von Cosmaderm, die natürlich Kunde bei uns sind. In diesem Beispiel haben wir die Trennlinie zur Beschreibung des Artikels entfernt und damit ein homogeneres Design geschaffen.

Quellen und weiterführende Links:

– Individuelle Reiter auf Artikel Detailseiten
https://great2gether.com/2014/11/shopware-tutorial-individuelle-reiter-auf-artikel-detailseiten/

– Das Plugin für die faulen, Bonzen & Nicht-Programmierer:
https://store.shopware.com/scha168252746948/erstellen-von-zusaetzlichen-tabs-eigenschaften-und-downloads-tabs-fuer-die-artikeldetailseiten.html?number=scha168252746948t

– Das günstigere Alternativ-Plugin:
https://de.dreischild.com/artikeldetails-als-tab-reiter-in-shopware-5

– Beitrag zum Thema Eigener Tab in der Artikeldetail Ansicht, Hübert Webentwicklung
https://www.huebert-webentwicklung.de/blog/shopware-5-eigenen-tab-in-der-artikeldetail-ansicht/