Eigenes Magento-Template basierend auf „Modern Theme“

Ein Shop wie Magento mit vielen Ideeen und Funktionen ist was tolles. Ein eigenes Template dazu aber noch besser. Um das Rad nicht neu erfinden zu müssen, gibt es hier ein paar Tipps wie man die vorhandenen Themes als Basis für eigene Kreationen nutzen kann.

Als Voraussetzung dafür sollte man sich auch jeden Fall den Designer’s Guide 3-4 Mal durchgelesen haben. Bei wem dann – wie bei mir – immer noch Fragen aufgekommen sind sollte hier weiterlesen.

Niemand wird ernsthaft ein neues Magento Theme erstellen wollen ohne auf ein bestehendes Theme zurückgreifen. Das Basis-Theme (default) besteht aus knapp 500 Dateien und Ordnern. Dazu kommen noch die CSS- und Grafik-Dateien.

Wenn man das Basis-Theme als Ausgangspunkt nimmt sind Änderungen am Layout recht einfach. Auf keinen Fall sollte man in den Original-Dateien arbeiten. Sonst sind beim nächsten Update des Themes alle Modifikationen weg. Angenommen unser neues (abgeleitetes) Theme soll my_theme heißen, so legt man in den Verzeichnissen app/design/frontend/default/ und skin/frontend/default/ jeweils das neue Unterverzeichnis my_theme an.

Unterverzeichnis my_theme

Dateien die man ändern möchte kopiert man nun aus default nach my_theme. Den Pfad zur gewünschten Datei im default Zweig verrät Magento, wenn man im Backend unter System/Konfiguration/Erweitert/Entwickleroptionen/ den Debug-Modus aktiviert (Aktueller Konfig.-Bereich auf die Website einstellen!!!).

Debug aktivieren

Um dann auch die Änderungen im Shop zu sehen, muss man Magento noch mitteilen das neue Theme zu benutzen. Hierzu setzt man in System/Konfiguration/Allgemein/Gestaltung bei Themes/Standard das neue Theme my_theme ein.

Neues Theme registrieren

Wenn man nun den Cache löscht oder ihn in der Cache-Verwaltung direkt deaktiviert hat, werden im im Shop die Änderungen angezeigt. Hier zeigt sich die Stärke des Template-Systems von Magento. Statt die Templates direkt zu ändern arbeitet man in einem eigenen Bereich. Magento schaut beim Rendern einer Seite immer zuerst in den Ordner my_theme. Wenn es dort das benötigte Element nicht findet wird das aus default genommen.

Bis hierhin konnte man die Informationen auch im Designer’s Guide finden. Ich habe dann versucht das Modern Theme als Basis für ein eigenes Theme zu nehmen. Hierbei muss man wissen, das dieses Theme auch nur von default abgeleitet ist. Es kann also nicht als Eigenständiges Theme ohne default arbeiten. Wenn man es versucht funktionieren einige Seiten nicht mehr. So zum Beispiel die Kommentarseite zu einem Produkt.

Man muss also eine Hierarchie in der Form default -> modern -> my_theme aufbauen. Auch das ist in Magento kein Problem. Die Konfiguration im Backend sieht dann wie folgt aus:

Theme Hierarchie

Magento nimmt zunächst immer die Bausteine aus my_theme. Dann kommt modern an die Reihe und zuletzt default.

Ein so abgeändertes Modern Theme kann man zum Beispiel im Vitalityshop ansehen.

14 Responses to Eigenes Magento-Template basierend auf „Modern Theme“

  1. Alexandre sagt:

    Vielen Dank für diese kurze weiterführende Anleitung.
    Der Vitalityshop sieht echt klasse aus.
    Eine Frage hätte ich:
    Wir kann ich die Bilder auf der Startseite zu den jeweiligen Produkten verlinken?
    Gruß
    Alex

    • ducrot sagt:

      Da ich als Basis mit dem Modern-Template arbeite, wird als Startseite das Template sample/home.phtml geladen. Innerhalb eines Templates kann man mit <a href="<?php echo $this->getUrl(‚gesichtspflege‘) ?>">Zur Gesichtspflege</a> eine Kategorie verlinken und zum Beispiel über <a href="<?php echo $this->getUrl(‚blue-lagoon-silica-mud-mask.html‘) ?>">Zum Produkt Silica Mud Mask</a> ein Produkt verlinken.

      Der String für die Funktion getUrl ergibt sich aus dem Eintrag in der Kategorie bzw. im Produkt aus dem Feld "URL key".

      Innerhalb des CMS kann man aber auch direkt mit Magento-Tags arbeiten. Ein Link würde dann so aussehen: <a href="{{store url=""}}blue-lagoon-silica-mud-mask.html">Link zum Produkt</a>

  2. Der Tipp mit dem my-theme ist schon mal gold wert … da hab ich garnicht dran gedacht, dass es beim update überschrieben werden konnte …

    noch mal glück gehabt 🙂

  3. Troy sagt:

    Dazu mal eine Frage, ich habe hier ein Theme von Monster Templates installiert. Das ganze liegt im Vz. „/skin/frontend/blank/theme032“ und „/app/design/frontend/blank/theme032“. Im Menüpunkt System -> Gestaltung ist das Theme wohl auch korrekt installiert und es schaut auch alles prima aus.

    Trotzdem werden von mir hinzugefügte Erweiterungen immer ins Vz. „/skin/frontend/default/default“ und „/app/design/frontend/default/default“ kopiert. Dort werden sie aber nicht gefunden und ich muß umständlich von Hand korrigieren, was nicht immer klappt.

    Was müßte ich wo genau eintragen damit das richtig funktioniert? … bin dankbar für jeden Tip.

  4. Sendner sagt:

    Wie hast du deinen Magento Shop so schnell bekommen?
    Bei meinem Hoster ist der extrem lahm.
    Und gibt es dein Theme auch zum download?

    Viele Grüße aus Würzburg

    Franz

    • Websolutions sagt:

      Welche Magento Version? Setzt der Hoster einen Bytecode-Cache wie APC ein? Und natürlich: wie sieht die Hardeware aus, wieviele Kunden sind noch auf dem Server? Wenn Du wirklich Geld mit Deinem Shop verdienen möchtest, empfehle ich zumindest einen eigenen Managed-Server bei einem Hoster der etwas von Magento versteht.

      • Andreas B sagt:

        Das musste ich leider auch schon merken. Die Hoster bieten Magento in kleineren Paketen mit an, es läuft aber dann wirklich nicht toll. Bin dann mit einem anderen Projekt auf xtc hängengeblieben, obwohl ich mir die nächste magento nochmal anschauen werde.

  5. Troy sagt:

    hmmm ok, das scheint wohl eher ein Problem mancher Plugins zu sein… einige gehen, einige nicht.

    • Websolutions sagt:

      Wie sieht denn Deine Themes-Konfiguration unter System -> Gestaltung aus? Meine Anleitung bezieht sich auf Templates die vom Default-Theme abgeleitet sind. Kann es sein das dieses Monster-Templates Theme eigenständig ist?

      • Troy sagt:

        Jap, glaub auch das man da nix weiter einstellen muß, liegt wohl in dem Fall wirklich an einigen Plugins, die von sich aus alles unter default/default installieren.

  6. Marco sagt:

    Vielen Dank, auch wenn der Artikel schon älter ist, so hat er doch noch einen enormen Mehrwert. Hat mir sehr geholfen. Vielen Dank!

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: