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/
Shopware 5.5.7
Hallo :-)
Vorab möchte ich sagen, dass das ganze hier sehr gut beschrieben ist und sich echt gut liest!
Leider stimmt da aber etwas nicht. Ich habe dieses Tut 4x durchgearbeitet und echt lange dran getüftelt, aber ich bekomme einfach keinen zusätzlichen Tab Angezeigt im Frontend.
Im Backend unter Artikeldetail werden mir zwar Textfelder angezeigt (Tab4) aber im Frontend nicht ausgespuckt :-(
Kannst das nochmals untersuchen?
LG
Angi
Mmmh kann sein dass das etwas veraltet ist. Schreib mir bitte in einer Woche eine E-Mail dann aktualisiere ich das nochmal hier.
Hallo,
bei mir funktioniert das Tutorial leider auch nicht, hatte es vor einiger Zeit bereits angewandt da hat alles prima funktioniert und auch jetzt noch mit 5.6.6.
Viele Grüße
Sandro
Ich hab den Code aus der ersten Box überarbeitet. Jetzt sollte es wieder funktionieren. Append und pretend sind veraltete Befehle. Jetzt hab ich den Smarty parent block drin, so müsste es klappen. Bei mir ging es mit SW 5.5.10 problemlos.
hi super anleitung mal vorab.
hatte mal von einem bekannten ein Tab angelegt bekommen „Inhaltsstoffe“ und wollte diese mit deiner Anleitung erweitern um den Tab „Inverkehrbringer“ hat auch gut geklappt allerdings kommt zusätzlich das was ich im Tab sehen oben bei der Artikel Nummer??
Artikel-Nr.: 67
Freitextfeld 1: inverk
hast du mir da einen tipp oder Idee was ich falsch gemacht habe
Kam so nicht noch vor bei uns :/ Daher wüßte ich jetzt leider nicht wie sich das eingeschlichen haben könnte. Mit welcher Version arbeitet ihr denn? Kann sein dass die Anleitung bei den neueren Versionen nicht 100% passt.
und wie bekommt man die Anmeldung / Registrierung so wie bei dir oben recht im Shop hin?
Das war nicht unser Werk. Das hat ein gekauftes Theme so mitgebracht. Je nachdem welches Theme man verwendet ist es dann immer unterschiedlich. Kann ich also leider nicht mit 2, 3 Sätzen beantworten. Aber sicher bei jedem Theme in ein, zwei Stündchen umsetzen. Wo man dann bei den Kosten von 2 günstigen oder einem halben guten Theme wäre.
Hi, vielen Dank für die Anleitung. Bekomme leider beim Kompilieren folgenden Fehler. ParseError: Unexpected input in tabs.tpl on line 1, column 0
1| {* Hier werden die Inhalte aus dem Parent Theme eingebunden *}
2| {extends file=“parent:frontend/detail/tabs.tpl“}
3|
4| {block name=“frontend_detail_tabs_description“ append}
5| {if $sArticle.attr8}
6| {s namespace=“frontend/detail“ name=’Temperaturtest‘}{/s}
Könnt ihr mir sagen, woran das liegt?
Danke,
Nico
Bei solchen Fragen kommt immer folgende Gegenfrage: „Welche Version verwenden Sie?“
Am besten nochmal mit unserem Code vergleichen, habe den auch gerade aktualisiert wegen veralteten Befehlen.
Shopware 5.6.4 oder was meinen Sie?
Genau das. Wir werden das in den nächsten Tagen einmal prüfen und geben dann Bescheid. Schöne Grüße!
Leider funktioniert es in 5.6.7 und 5.6.8 nicht mehr wie gewollt.
Es verschwindet sogar der Beschreibung Tab
Bekomme nur die Meldung „Ups da ist etwas schief gelaufen,…..“
Das ist ein etwas wuseliger Code und ich komme leider nicht dazu das zu bearbeiten. Klappt ist mit der Anleitung aus dem Link zu Hübert? Der Link ist ganz unten im Beitrag.
Also erst einmal TOP umgesetzt. Nur gibt es bei mir da ein kleines Problem und zwar, wenn man die zusätzlichen Tabs/Reiter nicht brauch bei manchen Artikel und man nichts in die Felder beim einstellen des Artikels eingibt wird alles verschoben beziehungsweise ist im Reiter Bewertungen dann die Beschreibung des Artikels und sonst kein weiterer Reiter zu sehen. Wenn man dann z.b nur einen Punkt in die Felder eingibt ist alles normal hoffe es war einigermaßen verständlich.
MFG
Ja war verständlich. Schauen wir uns bei Gelegenheit nochmal an. Danke für das Feedback.
Guten Tag Atilla
Ich habe mit einer ähnlichen oder genau dieser Anleitung im 2016 unseren Shop mit Tabs versehen, danke dafür.
Gibt es eventuell auch Anstrebungen eine ähnliche Beschreibung für shopware6 zu erstellen?
Gruss Chris
Kann passieren ;)
Hallo Attila,
ich habe die Version mit 2 Tabs installiert.
Im Backend erscheinen beide Eingabefelder
Inhaltsstoffe und Anwendungshinweise
Im Frontend erscheinen die Tabs sobald etwas im backend eingegeben wird.
Der Inhalt der Eingabe Inhaltsstoffe wird im frontend ausgegeben
Der Inhalt der Eingabe Anwendungshinweise wird allerdings nicht ausgegeben?
Woran könnte es liegen.
Beste Grüße und im voraus vielen Dank
Al
Puh, das läßt sich so gerade schwer sagen. Wenn du magst buch dir für 15-Min einen Schnupper-Termein dann kann ich über Zoom ma reinschauen.
Grüße,
Atilla