Vielleicht haben Sie auch schon einmal mit dem Gedanken gespielt Ihren Shopware Shop auf den Artikel-Detailseiten um zusätzliche Reiter zu erweitern. Einer unserer Kunden hatte vor einiger Zeit genau diesen Wunsch – die Aufgabe: Entferne den Reiter mit „Bewertungen“ und ersetze diesen durch Inhaltsstoffe.

Übersicht:

1. Individuelle Reiter auf Shopware Artikel-Detailseiten – Vorschau

Hier seht ihr vorab schonmal das Ergebnis. Links unten im Bild sieht man den neuen „Inhaltsstoffe“ Reiter:

shopware-shop-neue-reiter-bei-artikeln

So soll es also am Ende aussehen. Nun schauen wir uns einmal genauer an wie wir den Umbau jetzt am besten realisieren.

2. Individuelle Reiter auf Shopware Artikel-Detailseiten – Neue Dateien

Bei diesem Umbau setze ich voraus, dass bereits ein eigenes Template vorhanden ist. Wer das noch nicht gemacht hat kann hier nachlesen wie das geht (super easy…): Eigenes Shopware Template anlegen.

In diesem Fall nennt sich das Template emotion_cosmadermgreen und was für uns nun wichtig ist sind der zusätzliche Ordner detail und die darin enthaltenen Dateien index.tpl und tabs.tpl – legen Sie diese Dateien an und öffnen Sie beide in Ihrem Editor.

shopware-shop-neue-reiter-bei-artikeln-dateien

Hier ist der Inhalt der index.tpl:


{* Hier wird das Design des Mastertemplates vererbt *}
{extends file="parent:frontend/detail/index.tpl"}

{* Jetzt kommt der Inhalt des neuen Tabs - INHALTSSTOFFE *}
{block name="frontend_detail_index_tabs_related" append}
<div id="extra_tab_1">

{* Ueberschrift fuer den Reiter, falls Inhalt vorhanden in attr4, Inhaltsstoffe Tab *}
{if $sArticle.attr4}
<h2>{se name='ExtraTab1_header'}Inhaltsstoffe{/se}</h2> <!-- Überschrift anpassbra - Txtbausteine -->
{/if}

{* Hier wird der individuelle Inhalt des attr4 Feldes eingefügt *}
<p>{$sArticle.attr4}</p>
</div>
{/block}

Und hier seht ihr wie die tabs.tpl aussieht.


{* Hier wird das Design des Mastertemplates vererbt *}
{extends file='parent:frontend/detail/tabs.tpl'}

{* Hier wird der erste Extra Tab hinzugefügt *}
{block name="frontend_detail_tabs_related" append}
{* Tab wird nur angezeigt wenn attr 4 ausgefüllt wurde *}
{if $sArticle.attr4}
<li>
<!--
extra_tab_1 muss identisch sein zum div Namen in der detail/index.tpl, ca. Zeile 6
der se Name: ExtraTab1 kann im Backend im Bereich Textbausteine angepasst werden
-->
<a href="#extra_tab_1">{se name='ExtraTab1'}Inhaltsstoffe{/se}</a>
</li>
{/if}
{/block}

Zur näheren Erklärungen könnt ihr auf den Link bei Punkt 5 klicken und die Anmerkungen im Code beachten. Wer es sich ganz einfach machen will lädt sich einfach diese Zip Datei hier runter und legt den Ordner detail in den frontend Ordner rein:

Fertige Dateien zum erweitern individueller Reiter auf Shopware Detailseiten jetzt laden

3. Individuelle Reiter auf Shopware Artikel-Detailseiten – Neues Freitextfeld

Jetzt gehen wir ins Backend und legen ein neues Freitextfeld an um den Reiter bei jedem Produkt mit individuellen Inhalten zu füllen. Hierfür müssen Sie in den Bereich: Einstellungen > Grundeinstellungen > Artikel > Artikel-Freitextfelder.

shopware-shop-neue-reiter-bei-artikeln-freitextfeld

Dort legen Sie nun ein neues Freitextfeld an. Für unser Beispiel haben wir dort folgende Inhalte eingetragen, aus dem Textfeld habe ich aber später doch HTML gemacht da man dann bei der Artikel Bearbeitung ein größeres Fenster angezeigt bekommt und die Texte besser bearbeiten kann:

shopware-shop-neue-reiter-bei-artikeln-attribut

4. Individuelle Reiter auf Shopware Artikel-Detailseiten – Datenbank-Anpassung

Für diejenigen, die in Ihrem neuen Reiter Texte oder HTML Codes einfügen möchten, deren Länge 255 Zeichen überschreitet muss noch ein weiterer Schritt durchgeführt werden.

Öffnen Sie bei Ihrem Webhoster die phpmyadmin Maske und suchen Sie in der Datenbank Ihres Shopware Shops links auf der Seite den Link zu s_articles_attributes. Wenn Sie wie in diesem Beispiel attr4 bearbeiten möchten klicken Sie zuerst auf Structure und sehen alle Attribute.

Shopware - Individuelle Reiter - Attribute in der Datenbank bearbeiten

Shopware – Individuelle Reiter – Attribute in der Datenbank bearbeiten

Klicken bei attr4 auf den Bearbeiten Stift und tauschen Sie VARCHAR aus gegen MEDIUMTEXT. Nun können Sie statt 255 Zeichen bis zu 4294967295 verwenden. Wem weniger reicht, der kann natürlich auch TIYBLOB / TINYTEXT verwenden (bis zu 65535 Zeichen, reicht auch dicke für jede Inhaltsstoffeangabe…). Irgendwie hat es aber mit TINYTEXT nicht geklappt, daher habe ich am Ende wieder MEDIUM TEXT verwendet.

5. Individuelle Reiter auf Shopware Artikel-Detailseiten – Artikel bearbeiten

Ob es funktioniert sehen Sie nun im Bereich Artikel bearbeiten. Wenn man nun einen Artikel bearbeitet sollte weit unten auf der Seite nun unser neues Freitextfeld angezeigt werden. Auf diesem Screenshot sehen Sie wie es aussehen sollte:

shopware-shop-neue-reiter-bei-artikeln-bearbeiten

Geben Sie dort den gewünschten Inhalt ein und speichern Sie ab. Gehen Sie nun ins Frontend des entsprechenden Produkts und schauen Sie sich das Ergebnis an. Hat es geklappt? Herzlichen Glückwunsch!

Wenn Sie den Reiter und die Überschrift im Reiter anpassen möchten gehen Sie in das Shopware Backend in den Bereich Einstellungen > Textbausteine une geben Sie „ExtraTab“ ein. Nun können Sie das Wort Inhaltsstoffe gegen etwas anderes austauschen.

shopware-shop-neue-reiter-bei-artikeln-textbausteine

P.S.: Falls Sie einen Reiter anlegen möchten, dessen Inhalt immer der gleiche ist kann in der index.tpl den Inhalt von

<p>{$sArticle.attr4}</p>

in Zeile 14 austauschen und braucht sich nicht um das Freitextfeld zu kümmern. Ein Beispiel:

<p>Hier steht immer das gleiche</p>

Des Weiteren müssen in beiden Dateien die if Anweisungen entfernt werden. index: Zeile 9 & 11, tabs.tpl Zeile 7 & 15.

6. Individuelle Reiter auf Shopware Artikel-Detailseiten – Quellen

Bei der Erstellung der Dateien war ein Beitrag vom Shopware Team mehr als hilfreich. In diesem Beitrag wird Schritt für Schritt erklärt wie die Dateien aufgebaut sind und welche Auswirkungen der Code hat.
http://wiki.shopware.com/Neuer-Reiter-auf-der-Detailseite-Shopware-4_detail_956.html

Bei der Datenbank Bearbeitung war dieser Beitrag hilfreich:
http://www.hostnexus.com/support/tutorials/phpmyadmin/mysql-field-types.php

7. Individuelle Reiter auf Shopware Artikel-Detailseiten – Weiterführende Links

3 weiterführende Links zum Thema „Shopware Tutorial – Individuelle Reiter auf Artikel-Detailseiten“

    1. Shopware Design / Template Anpassungen
    2. Logos im Footer einbinden
    3. Shopware Anfrage / Kontaktbereich

8. Individuelle Reiter auf Shopware Artikel-Detailseiten – Bewertung ausschalten

Jaaa… und was hatte ich jetzt vergessen zu erwähnen? Genau! Wie man die Bewertungen ausschaltet. Das ist auch nicht wirklich un-einfach: Gehen Sie hierfür in den Bereich: Einstellungen > Grundeinstellungen > Storefront > Artikelbewertungen. Im folgenden Screenshot wird der Rest ersichtlich:

bewertungen aus

Wenn Ihnen dieser Beitrag gefallen hat würden wir uns über Likes & Feedback freuen!