Magento Grundkurs (2012)

Interface und Themes

Testen Sie unsere 2014 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Ein Interface besteht aus mehreren kombinierten Themes. Diese Themes setzen sich aus Templates, Layout-, Locale- und Skin-Dateien zusammen.
07:10

Transkript

Wenn Sie von der Pflege von Magento nun bereits genug haben, und noch tiefer in die Materie einsteigen möchten, machen wir nun einen Ausflug in die eigentliche Gestaltung und die technische Umsetzung der Gestaltung in Magento, indem wir uns Interfaces und Themes ansehen. Wollen wir doch zuerst einmal darüber sprechen, aus was die Gestaltung in Magento eigentlich besteht. Und vor allem viel wichtiger, was die einzelnen Begriffe bedeuten. Gerade eben sprach ich von einem Theme. Ein Theme ist eine Sammlung von Layout-Dateien. Die Layout-Dateien in Magento sind XML-Dateien, und sie steuern die Verteilung einzelner Blöcke in vorgegebene Strukturen. Der zweite Teil eines Themes sind Templates. Die Templates sind PHTML-Dateien. Das heißt in erster Linie, kleine HTML-Blöcke mit ein bisschen PHP, deswegen PHTML. Zu einem Theme gehört auch ein Locale. Ein Locale besteht aus einer CSV-Datei. Eine CSV-Datei ist nichts anderes als eine Tabellendatei, die als reine Textdatei gespeichert wird. Sie können also eine CSV-Datei in einem beliebigen Editor Ihrer Wahl bearbeiten. Schließlich gehören auch Skin-Dateien zu unserem Theme. Skin-Dateien sind all die Dateien, die vom Browser direkt aufgerufen werden, also CSS, JavaScript, und auch Bilder. Wenn wir in Magento nun mehrere Themes kombinieren, dann bekommen wir ein Interface, oder auch Paket. Jedes Interface besitzt dabei mindestens ein Theme, und zwar das Default Theme. Wir werden später noch anhand der Ordnerstruktur sehen, welchen Namen dieses trägt und wie es aufgebaut ist. Kommen wir nun noch einmal zu den einzelnen Dateiarten. Ich möchte hier mit den Layout-Dateien beginnen. Die Layout-Dateien sind XML-Dateien, und XML-Dateien steuern in Magento die Struktur der Seite. Das bedeutet, es gibt eine XML-Datei, die die sichtbare Fläche im Frontend in Strukturblöcke aufteilt, und es gibt weitere XML-Dateien, die während der Ausführung von Magento einzelne Inhaltsblöcke, wie zum Beispiel unsere Navigation, unseren kleinen Warenkorb in der Sidebar, vielleicht auch die Tech-Cloud, und andere Elemente über die Seite verteilen. Diese Aufgabe kommt also den Layout-Dateien, den XML-Dateien zugute. Ein weiterer Dateityp sind die Template-Dateien. Beachten Sie bitte hier die Benennung. Wenn Sie Erfahrung mit anderen CMS- oder eCommerce-Systemen haben, kennen Sie vielleicht den Begriff Template. Der Begriff Template wird in Magento aber ausschließlich für PHTML-Dateien verwendet, und meint nicht die Gesamtheit aller Dateien, die die Gestaltung im Frontend steuert. Unsere PHTML-Dateien in Magento sind zum Einen unsere Seitenvorlagen, also die gesamten Rahmengerüste, in denen definiert wird, linke Spalte, rechte Spalte, Kopfzeile und Fußzeile, mit tatsächlich einem HTML-Code. Es gibt neben den Seitenvorlagen noch viele weitere PHTML-Dateien, die die Inhalte der einzelnen Elemente darstellen. Dabei kann eine PHTML-Datei durchaus sehr kurz, also nur fünf Zeilen lang sein, es gibt aber auch PHTML-Dateien, die deutlich länger sind, und deutlich unübersichtlicher. Wie Sie schon anhand der Dateiendung sehen können, enthalten PHTML-Dateien ganz wenig PHP, der ist auch nicht besonders schwierig, und dafür deutlich mehr HTML. Unsere Übersetzung in Magento wird von Locale-Dateien im Format CSV bewerkstelligt. Diese Dateien sind letztlich nichts Anderes als Tabellendateien, die in einem speziellen Textformat gespeichert worden sind. Das Problem ist aber, dass wir hier in Europa diese CSV-Dateien nicht mit Excel bearbeiten können. In Excel wird beim Speichern einer CSV-Datei das Format derart zerstört, dass es in Magento nicht mehr verwendet werden kann. Es gibt aktuell nur ein Programm, das die CSV-Dateien für Magento erfolgreich öffnen und schreiben kann. Es handelt sich dabei im OpenOffice 3. Ansonsten sind CSV-Dateien kein Hexenwerk, und Sie können sie auch bequem in einem Texteditor Ihrer Wahl bearbeiten. Achten Sie bitte darauf, dass die CSV-Dateien um UTF-8 Format gespeichert werden müssen. Schlussendlich kommen wir zum letzten Teil unserer Themes, das sind die Skin-Dateien. Skin-Dateien sind alles das, was für die eigentliche Optik in unserem Shop verantwortlich ist, also CSS-Grafik und JavaScript. Es gibt für die Skin-Dateien ein eigenes, separates Verzeichnis, und auf dieses haben wir für den direkten Browserzugriff. Wir werden im Verlauf dieser Präsentation noch kurz sehen, warum Magento zwei getrennte Ordnerstrukturen für unsere Gestaltung im Frontend benutzt. Wo befinden sich nun also diese ganzen einzelnen Teile eines Themes? Sie befinden sich in zwei getrennten Ordnern. Der erste Teil unserer Ordner enthält die Struktur, die Aufteilung und die Funktionalität unseres Themes. Der zweite Teil unserer Ordner, getrennt vom ersten, enthält die Gestaltung. Sie sehen hier, anhand des Ordnernamens "Skin", dass es sich bei dem zweiten Teil unserer Ordner um die Skin-Dateien handelt. Die Strukturdateien, die verantwortlich für die Funktionalität sind, liegen in Magento im Ordner "App Design". Alle Dateien, die direkt für den Browser aufzurufen sind, befinden sich im Ordner "Skin". Ab dem Ordner "Design" und "Skin" können Sie hier schon sehen, teilen sich die beiden Ordner die gleiche Struktur. Das heißt, innerhalb der Ordner finden Sie einen Ordner "Frontend". Der Ordner "'Frontend" ist für alles zuständig, was bei uns im Shop im Frontend tatsächlich auch passiert, der Name ist also selbstsprechend. Danach gibt es einen Ordner mit dem "Interface"-Namen. In der Magento Community Addition haben wir zwei Interfaces, einmal das Base, und einmal das Default Interface. Innerhalb eines solchen Interfaces gibt es wiederum die Themes. Dabei gibt es ein Theme, das immer vorhanden ist, und zwar das Default Theme. Deswegen haben wir hier einen Default-Ordner sowohl im Bereich "App Design Frontend", als auch ein Default Theme im Ordner "Skin Frontend". Neben dem Default Theme können auch weitere Themes in Magento installiert sein. In der Magento Community Addition beispielweise, haben wir neben dem Default Theme auch das Blanc, das Modern, sowie das Blue Theme. Warum haben wir nun zwei getrennte Ordner? Zum Einen geht es hier um die saubere Trennung von Programmen und Skin-Dateien, zum Anderen ist es aber auch so, dass diese Trennung die Sicherheit erhöht. Denn die meisten Dateien, die sich außerhalb des Skin-Ordners befinden, enthalten ausschließlich Programmcode und sind für den Browser eigentlich uninteressant. Sie werden von Magento direkt verarbeitet, und bei diesem Verarbeitungsprozess erst wird echtes HMTL erzeugt. Um also die Sicherheit Ihres Shops zu erhöhen, sind die meisten Dateien außerhalb des Skin-Ordners vom Browser gar nicht abrufbar, selbst wenn Sie den genauen Pfad zu einer Datei kennen. Sie erhalten von Magento dann automatisch eine 404-Fehlermeldung.

Magento Grundkurs (2012)

Lernen Sie als Einsteiger in die E-Commerce-Plattform Magento die Grundlagen kennen und lassen Sie sich als versierter Anwender neue Möglichkeiten und wichtige Tricks erklären.

10 Std. 14 min (135 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!