Magento: Modern Tabs im default theme

modern-tabs-defaultImmer wieder erfolgt die Frage ob es möglich ist die Tabs des modern theme auch in das default theme einzubinden.
Ja, es ist möglich. Es ist sogar ziemlich einfach und schnell umzusetzen. Folgen Sie meinem Step-by-Step Tutorial für das Einbinden der modern tabs in das default theme.

Demo: mageintern-demoshop.de

1. calatog.xml anpassen
2. tabs.phtml kopieren
3. View.phtml modifizieren
4. boxes.css modifizieren

1. Die catalog.xml anpassen

Als ersten Schritt muss die catalog.xml angepasst werden. Hier sollen die Standardausgaben der Produktbeschreibung, die Zusatzinformationen, die upsell Produkte (Sie könnten auch an folgende Produkte interessiert sein) ausgeblendet werden.
Dann folgt das Einbinden der entsprechenden Tabs. Zusätzlich sollen auch die Zubehörprodukte in einem Tab erscheinen.

Öffnen Sie die catalog.xml

app/design/frontend/default/IhrTheme/layout/catalog.xml

Die Änderungen erfolgen im Abschnitt
<!– Product view –>
<catalog_product_view>

Der Abschnitt beginnt ab ca. Zeile 168.
Die erste Änderung erfolgt ab ca. Zeile 197:
Die 3 Blöcke für product_additional_data, description.phtml und attributes.phtml werden mit <!–  –> auskommentieren.

Dies sieht dann so aus:

<!--<block type="catalog/product_view_additional" name="product.info.additional" as="product_additional_data" />-->
<!--<block type="catalog/product_view_description" name="product.description" as="description"
template="catalog/product/view/description.phtml"/>-->
<!--<block type="catalog/product_view_attributes" name="product.attributes" as="additional" template="catalog/product/view/attributes.phtml"/>-->

Nun erfolgt das Einbinden der entsprechenden Tabs:

Ab ca. Zeile 217 endet der Block product.clone_prices mit </block>

Darunter werden die neuen Tabs eingefügt.

<block type="catalog/product_view_tabs" name="product.info.tabs" as="info_tabs" template="catalog/product/view/tabs.phtml" >
<action method="addTab" translate="title" module="catalog"><alias>description</alias><title>Product Description</title><block>catalog/product_view_description</block><template>catalog/product/view/description.phtml</template></action>
<action method="addTab" translate="title" module="catalog"><alias>upsell_products</alias><title>We Also Recommend</title><block>catalog/product_list_upsell</block><template>catalog/product/list/upsell.phtml</template>
<action method="setColumnCount"><columns>4</columns></action>
<action method="setItemLimit"><type>upsell</type><limit>4</limit></action>
</action>
<action method="addTab" translate="title" module="catalog"><alias>additional</alias><title>Additional Information</title><block>catalog/product_view_attributes</block><template>catalog/product/view/attributes.phtml</template></action>
<action method="addTab" translate="title" module="catalog"><alias>related_products</alias><title>Related Products</title><block>catalog/product_list_related</block><template>catalog/product/list/related.phtml</template></action>
</block>

Einfach diesen Abschnitt kopieren und einfügen.
Die neuen Tabs Zeilen stehen nun zwischen dem Ende Block </block> von product.clone_prices
und dem block Anfang von <block type=”core/template_facade” name=”product.info.container1″ as=”container1″>.

Nun die catalog.xml speichern und schließen.

So das war der schwierige Teil.


2. tabs.phtml kopieren

Die in den modern theme verwendete tabs.phtml wird nun auch im default theme benötigt.
Die Datei steht am Ende dieses Tutorial als Download zur Verfügung.
Die Datei entzippen und die tabs.phtml in folgendes Verzeichnis kopieren:
app/design/frontend/default/IhrTheme/template/catalog/product/view/tabs.phtml

Edit: Hier war leider ein Fehler.
Die tabs.phtml gehört nicht in das Verzeichnis
app/design/frontend/default/IhrTheme/template/catalog/product/tabs.phtml
sondern in
app/design/frontend/default/IhrTheme/template/catalog/product/view/tabs.phtml
Vielen Dank an Armin für den Hinweis!


3. view.phtml anpassen

Die view.phtml ist zuständig für die Produktdetailausgabe. Hier werden die “alten” Ausgaben wie Beschreibung, usw. unterdrückt und die Ausgabe der Tabs eingefügt.

Ca. Zeile 111 steht ein nach dem Javascript ein schließendes </div>.

if (this.validator.validate()) {
this.form.submit();
}
}.bind(productAddToCartForm);
</script>
</div>


Nach diesem </div> alles bis zum Ende löschen und dafür folgendes einfügen:

</div>
<?php echo $this->getChildHtml('info_tabs') ?>

Das sieht dann so aus:



if (this.validator.validate()) {
this.form.submit();
}
}.bind(productAddToCartForm);
</script>
</div>
</div>
<?php echo $this->getChildHtml(‘info_tabs’) ?>

Die view.phtml speichern und schließen.

4. Die boxes.css anpassen

Als letzter Schritt erfolgt die css Modifizierung. Da es im default theme keine css Anweisungen für die Tabs gibt müssen diese als erstes eingefügt werden.
Öffnen Sie die boxes.css im Verzeichnis skin/IhrTheme/css.

Kopieren Sie folgende Zeilen in die css Datei. Wo ist egal, z.B. an das Ende.

/********************** Tabs */
.tabs { margin-bottom:10px;    border-bottom:1px solid #666; background-image: url(../images/tabs_bg.gif); background-repeat: repeat-x;

background-position: 0 100%; float: left; margin-top: 10px; }
.tabs li { float:left; border-right:1px solid #a4a4a4; border-left:1px solid #fff; font-size:1.1em; line-height:1em; }
.tabs li.first { border-left:0; }
.tabs li.last { border-right:0; }
.tabs a  {display:block; padding:6px 15px; color:#444; text-decoration: none; }
.tabs a:hover { background-color:#ddd; text-decoration:none; color:#444; }
.tabs li.active a, .tabs li.active a:hover { background-color:#666; font-weight:bold; color:#fff; }
.col-main .padder{ clear: left;    padding: 10px; background-color: #FFFFFF; border: 1px solid #CCCCCC; }
.layout-3columns .padder { padding:0; }

Die boxes-css speichern und schließen.

Nun noch das Hintergrundbild tabs_bg.gif der Tabs in das Verzeichnis skin/IhrTheme/images kopieren.
Die Grafik ist in der Zip-Datei mit enthalten.

Das war auch schon alles.
Viel Spaß mit den modern Tabs im default theme.
modern-tabs-default downloaden (zip)
Stefan Pröhl – robin2160
mageintern.de

10 Gedanken zu „Magento: Modern Tabs im default theme

  1. DerZyklop

    Noch ein:

    .tabs {
    width: 100%;
    }
    .product-tabs:after {
    display:block; content:”.”; clear:both; font-size:0; line-height:0; height:0; overflow:hidden;
    }

    hinzufügen, dann passt es sich auch der Breite an.

    [Antwort]

  2. JoeBlanc

    Hallo Stefan
    Dein Tutorial ist genau das was ich gesucht habe, leider komme ich nicht zum Ziel.
    Benutze ein eigenes Theme mit MAG 1.4.1.1

    Habe alles gefühlte 250000 Mal kontrolliert und nochmal gemacht, aber die Tabs werden einfach nicht angezeigt.

    Folgendes habe ich nach Anleitung abgearbeitet:
    1. app/design/frontend/default/meinTheme/layout/catalog.xml nach deinen Angaben geändert. Habe es osgar mit der catalog.xml im modern Them verglichen da ist es genau so. Der einzige Unterschied besteht aus dem bei dir eingetragenen upsell Limit.

    2. app/design/frontend/default/meinTheme/template/catalog/product/view/tabs.phtml
    reinkopiert. Den Ordner view habe ich auch angelegt damit der Pfad genau so ist wie im modern Theme. Habe auch die tabs.phtml aus dem modern Theme probiert, weil ich dachte evtl. ist was beim kopieren falsch gelaufen.

    3. app/design/frontend/default/meinTheme/template/catalog/product/view.phtml am Ende angepasst.

    4. In skin/meinTheme/css liegt keine boxes.css sondern die liegt hier skin/adminhtml/default/default/css/boxes.css Aber das ist erst mal so ziemlich Egal, selbst wenn man da nichts machen würde müssten Platzhalter erscheinen.

    Kannst Du irgend etwas erkennen was falsch gelaufen sein könnte?

    Habe auch die Extension Magento Easy Tab probiert. Lässt sich problemlos installieren und funktioniert soweit auch, aber ich habe dort das Problem mit meiner Farb switcher Extension. Das sind nur ein paar Zeilen Code in der view.phtml (steht nicht in Verbindung mit der Änderung am Ende der view.html). Ich habe dann zwar die Tabs drinn aber der Switcher taucht nicht mehr auf. Ist auch jetzt nicht Gegenstand meines Problems. Wollte es nur erwähnen weil das doch beweißt das es funktionieren muss.

    [Antwort]

  3. FashionFux

    Hi.

    Ich habe die Tabs in mein Template eingefügt. Klappt grundsätzlich wunderbar. Habe anschliessend die Reiter-Reihenfolge im catalog.xml geändert. Nun steht Up-Sell an erster Stelle. Dies klappt ebenfalls ganz gut.

    Verfügt ein Produkt allerdings über keine Up-Sells, so werden gleich alle Inhalte sämtlicher Reiter aufgelistet. Dies ist auch im Modern Theme von Magento so. Kann mir jemand einen Tipp geben wie die Tabs trotzdem einwandfrei funktionieren auch wenn kein Inhalt (keine Up-Sell-Produkte) verfügbar ist?

    Danke.

    [Antwort]

  4. Tobi

    Zu beachten wäre natürlich noch, dass wenn man nicht im default Theme arbeitet, die view.phtml im Order app/design/frontend/base/default/template/product liegt.

    Danke für die Anleitung, ich bau da jetzt mal Produktvideos ein..

    tobi.

    [Antwort]

  5. romestylez

    Okay also die Klasse

    .product-tabs li.active a, .tabs li.active a:hover

    Habe ich enfernt, nun steht aber beides direkt untereinander und leider nicht wie gewüntscht nebeneinander :(

    Kann da wer helfen ? Ich will einfach roten Hintergrund und dann

    Produktbeschreibung Zusatzinfos Druckansicht

    Es steht aber alles untereinander :(

    [Antwort]

  6. romestylez

    Ich habe eine Frage,
    ich habe die Tabs in eine neue Klasse eingefügt, klappt wunderbar, wenn ich jetzt auf einen klicke schiebt er sich aber über den anderen, weil er ja eine neue Klasse bekommt

    .product-tabs li.active a, .tabs li.active a:hover

    Der andere hat dann

    .product-tabs a

    Ist es irgendwie möglich das die als Menü nebeneinander funktionieren ? Weil diese hin und her geschiebe nervt und geht einfach garnicht.

    [Antwort]

  7. david74

    Hi,
    die Tabs sind super aber nachher wird das Product Review Form nicht mehr angezeigt.
    Gibt es dafür eine Lösung?

    [Antwort]

    mageintern - robin2160

    mageintern - robin2160 Antwort vom September 22nd, 2009 19:19:

    Hi david74,
    das sollte nicht passieren, da dieser Bereich nicht von den Modifikationen betroffen ist. Welches theme verwendest du denn ?

    Viele Grüße
    Stefan Pröhl

    [Antwort]

    david74 Antwort vom September 22nd, 2009 20:18:

    Das Default.
    Hier http://www.magentocommerce.com/boards/viewthread/31712/ hat Paul-xib genau dasselbe Problem beschrieben.

    [Antwort]

    mageintern - robin2160

    mageintern - robin2160 Antwort vom September 22nd, 2009 21:29:

    Das ist richtig.
    Produktbewertungen können leider nicht in den Tabs standardmäßig angzeigt werden.
    Weder im default noch im modern theme.

    VG Stefan

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>