Home > Allgemeines, Themes > Magento-Theming in 5 Minuten erklärt.

Magento-Theming in 5 Minuten erklärt.

Die vielfältigen Möglichkeiten, die Magento hat, sind auf der einen Seite natürlich super, aber auf der anderen Seite kann die Vielfalt einen auch erschlagen. Ich versuche mal in kurzen, knappen Worten das Wichtigste herauszufiltern.


Magento Theming:
Magento hat die Möglichkeit unter verschiedenen Gesichtspunkten den Shop komplett unterschiedlich aussehen zu lassen. Das “Layout” kann dabei zeitgesteuert oder sprachabhängig sein. Es können auch Multishops unter einem “Dach” geführt werden. Das ist aber erstmal für das Verständnis nicht so wichtig. Dann gibt es noch eine Unterscheidung der Themes nach “Default” und “Non-Default”. Also bei dem “Non-default” – Theme kann z.B. nur eine einzige Datei hinterlegt werden, und dann wird bei den restlichen, fehlenden Dateien auf das Default- Theme zurückgegriffen.

Die beiden wichtigsten Ordner für die ersten Theming – Versuche:
Das folgende Verzeichnis enthält den in Magento geschützen Bereich, auf den der öffentliche Besucher keinen Zugriff hat.
/app/design/frontend/default/default/

Darin sind enthalten:
layout/ –>XML-Dateien, die die Funktionalität eines Themas z.B. Newsletter abbildet.

locale/ –>Hier finden wir die Sprachdateien von Magento

template/ –>Ein modernes “Framework”, wie es Magento ist, arbeitet mit Templates (hier mit der Endung “phtml”). Das sind “Vorlagen”-Dateien. Hier wird der eigentliche HTML-Code hinterlegt. Eine Vorlagendatei ist gespickt mit eingebetteten PHP-Tags. Durch Template – Dateien errreicht man die strikte Trennung von HTML-Code zum eigentlichen Inhalt der Seiten. Der Inhalt der Seiten wird in unserem Fall aus der Datenbank heraus generiert. Ein wichtiges Verzeichnis ist hier wiederum unter “page” zu finden. Hier sind die Vorlagen für ein-, zwei-, oder dreispaltige Seiten hinterlegt. In einer Template-Datei kann der Aufruf weiterer Templates erfolgen. Z.B kann aus dem Template einer dreispaltigen Seite das Template für die “Suche” und Newsletter etc. eingebettet werden. Die Template-Dateien sind der eigentliche Ansatzpunkt für Layoutveränderungen mit CSS. Bevor der Browser die Seiten komplett auf dem Bildschirm anzeigen kann, werden die Templates sozusagen durch die “Mühle” gedreht. Die Platzhalter in den Templates werden durch Abarbeiten der Magento-Prozeduren (Mage_) durch den realen Inhalt der Prozeduren, Variablen ersetzt. Die serseitigen-Skripte (PHP) werden ausgeführt. Die Templates werden durch PHP im Prinzip zusammengeklebt, so dass die Seiten fertig auf dem Bildschirm angezeigt werden können.

Unter “Skin” – Oberfläche verbirgt sich in Magento der nicht geschützte Bereich. Das ist der Bereich, auf den der Browser uneingeschränkt Zugriff haben muß.
/www/skin/frontend/default/default/

css/ –>hier werden die ausgelagerten CSS-Dateien abgelegt. Dabei ist die styles.css Datei die Datei mit der die anderen Styles aufgerufen werden. Tipp: bei Zufügen von neuen Styles am besten die bestehenden Styles so lassen und die neuen Styles mit @import die neuen css – Dateien hinzufügen.

images/ –>hier werden sinnvollerweise die Bilder für den Seitenaufruf abgelegt
js/ –>Ablage für Javascriptdateien

Das wars.
Mit diesem Wissen ist es möglich, breadcrumbs, Navigation, Boxen etc so zu verändern, dass sie auch im Shop an der richtigen Stelle und mit dem gewünschten Aussehen erscheinen. Um das zu bewerkstelligen, muß man nur noch wissen, welche Templates “angefaßt” werden müssen und welche Layout (XML) Dateien. Dazu sei verwiesen auf den anderen Artikel:
Aktivieren von Magento Path Hints

Beispiele für Eingriffe in die Templates (phtml) bzw. in die Layout-Dateien (XML) werden demnächst folgen.

  1. Bisher keine Kommentare
  1. Bisher keine Trackbacks