Magento Grundkurs (2012)

Templates bearbeiten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Magento bietet ebenfalls die Gelegenheit, Templates zu bearbeiten und individuell anzupassen. Die Funktion Vorlagen Pfadhinweise zeigt den Pfad des zu verändernden Templates an.
06:58

Transkript

Wenn Sie neben dem Austauschen von Grafiken und dem Hinzufügen eigener CSS-Anweisungen etwas tiefer einsteigen möchten, um auch Template-Dateien in Magento zu bearbeiten, dann haben Sie vielleicht das Gefühl, dass Sie sich durch einige hundert Dateien hindurchkämpfen müssen ohne zu wissen, wo Sie jetzt welche Änderung durchführen müssen. Ich möchte nun am Beispiel dieser kleinen Zubehörbox hier drüben zeigen, wie Sie recht schnell herausfinden können, wie Sie an die jeweilige PHTML Datei kommen und was Sie dort für Änderungen vornehmen können. Um nun erst mal überhaupt herauszufinden, welche Datei für die Darstellung dieser Zubehörbox verantwortlich ist, gibt es einen kleinen Trick im Backend. Wir gehen dazu in den Bereich "System Konfiguration", und dort finden wir in der linken Menüleiste sehr weit unten, die " Entwickleroptionen". In den Entwickleroptionen gibt es die Möglichkeit im Bereich "Debug", die sogenannten Vorlagen-Pfadhinweise einzuschalten. Wie Sie jetzt aber sehen können, werden sie mir hier nicht angezeigt, und zwar liegt das daran, dass Sie zuerst auf einen Geltungsbereich einer Website wechseln müssen. Sie können also die Vorlagen-Pfadhinweise nicht standardmäßig für alle Websites aktivieren, sondern immer nur gezielt für einzelne Websites, oder, und das ist die bessere Variante, gezielt für einzelne Storeviews. Schauen wir jetzt noch mal in den Bereich Debug und sehen hier die Vorlagen Pfadhinweise. Ich ändere den Wert des Dropdowns auf "Ja", speichere die Konfiguration. Und wenn ich mir nun mein Frontend anschaue, sieht es aus, als ob es Masern bekommen hätte. Diese ganzen roten Kästen die wir jetzt hier sehen können, enthalten die Pfadangaben innerhalb der Ordnerstruktur "app/design". Schauen wir mal hier an die kleine Box für unsere Zubehörartikel, dann können wir im oberen Bereich den genauen Pfad zu dieser Datei ablesen. Ich mache das jetzt mal ein bisschen größer, damit wir das alles gut sehen können. Es handelt sich dabei um die Datei im Ordner "frontend/base/default/template"... denn es handelt sich ja um eine Templatedatei, ..."catalog/product/list" und dort finden wir eine "related.phtml". Suchen wir mal nach dieser Datei in unserer Magento Ordnerstruktur. Im Ordner "app/design" und nun einfach ablesen und nachfolgen, "frontend", "base", "default" Theme, "template" Ordner, "catalog", "product", "list" und hier ist die "related.phtml", ich werde nun nicht den Inhalt dieser Datei zeigen, damit Sie nicht gewillt sind gleich diese Datei zu öffnen und zu bearbeiten. Denn sie liegt im Base-Package, und in diesem Package werden wir keine Dateien verändern, oder löschen. Ich werde also in einem zweiten Fenster hier auf der rechten Seite, die gleiche Struktur öffnen, allerdings in meinem eigenen Interface mit meinem eigenen Theme. Ich habe mir dazu hier das "Training"-Theme angelegt. Dort gibt es eine "local.xml" die aktuell eine CSS-Datei lädt. Das können wir anhand dieses Quelltext sehen. Nun werden wir uns die gleiche Ordnerstruktur anlegen, die wir auch im linken Fenster gesehen haben. D.h. wir benötigen einen Unterordner "template", einen Unterordner "catalog", darin einen Ordner "product", mit einem Unterordner "list" und in diesen Ordner kopieren wir uns nun die "related.phtml" aus unserem Base-Package. Im nächsten Schritt passe ich meine Konfiguration im Backend an, damit Magento auch mein neues Trainings-Theme verwendet. Dazu wechsle ich in den Bereich "Design", ändere meinen Geltungsbereich auf die "Standardkonfiguration" und habe dann hier bei der Theme und Paket-Konfiguration die Möglichkeit, mein Standard-Theme "Training" festzulegen. Ich speichere jetzt die Konfiguration, und wenn ich mir dann im Frontend den Pfad hier noch mal genauer ansehe, stelle ich fest, dass die Datei nun im Frontend-Bereich aus dem Package "default/training" Theme und dann "template/catalog/products/list" und dort die "related.phtml" verwendet wird. D.h. durch Anlegen der Datei in meiner eigenen Ordnerstruktur, habe ich aufgrund des Fallback-Models Magento signalisiert, dass es bitte diese und nicht die anderen Dateien nehmen soll. Sie sehen hier auch, dass alle anderen Dateien weiterhin aus dem Base-Package gezogen werden. D.h. es ist nicht notwendig ein komplettes Theme, oder ein komplettes Interface zu kopieren, sondern Sie können ganz einfach durch Anlegen einer neuen Datei und der korrekten Konfiguration im Backend, ein neues Theme anlegen. Schauen wir uns mal die Inhalte der "related.phtml" Datei an. Wir sehen hier eine klassische PHTML-Datei. Das bedeutet, sehr viel HTML und ab und zu ein bisschen PHP. Den PHP-Code, den ich Ihnen jetzt hier markiert habe, dabei handelt es sich um die Ausgabe eines Textes, und zwar des Textes "Related Products". Das ist unsere Überschrift und "Related Products" wird übersetzt zu Zubehör. Warum wird das übersetzt? Das liegt an diesem PHP-Aufruf. Es gibt da eine magische Funktion, die in den CSV-Dateien, also in den Locales nach der korrekten Übersetzung zu diesem englischen Text sucht. Nachdem wir nun die richtige Datei im Frontend gefunden haben, können wir Vorlagenpfadhinweise wieder ausschalten im Bereich "Entwickleroptionen", wechseln dann auf den Website-Level, in dem wir das konfiguriert haben, und schalten die Vorlagenpfadhinweise wieder aus. Von den Masern ist unser Frontend nun geheilt, und wir können anfangen diese Datei zu bearbeiten, indem wir hier anhand der HTML-Struktur Änderungen vornehmen. Sind wir mal etwas rabiat, und tauschen einfach mal Kopf und Fuß aus, und so einfach ist die Anpassung einer PHTML-Datei in Magento. Sie haben also gesehen, wie einfach es ist, eine PHTML-Datei, also eine Template-Datei, in Magento anzupassen und mit welchem Hilfsmittel Sie den genauen Pfad und den Dateinamen dieser Datei herausfinden können. Sie müssen sich also nicht durch eine undefinierbare Menge an einzelnen PHTML-Dateien kämpfen, sondern Sie können ganz gezielt die eine Datei, die Sie bearbeiten möchten, kopieren und in derselben Ordnerstruktur anlegen, die sie auch im Original-Basepaket hatte. Beachten Sie bitte, dass Sie keine Änderungen im Base-Package vornehmen. Wenn Sie im Base-Package Änderungen vornehmen, werden diese bei einem Update überschrieben, und wenn Sie kein Backup angelegt haben, beginnt die Arbeit von vorne. Vermeiden Sie es bitte auch, komplette Ordner zu kopieren. Sie haben in unserem Beispiel nun gesehen, dass es vollkommen ausreichend ist die Ordnerstruktur entsprechend nachzubauen und nur wirklich die Dateien zu übernehmen, die wir wirklich brauchen. Wenn wir das mit der Originalstruktur auf der linken Seite vergleichen, sehen wir, dass wie etliche Dateien und Unterordner ausgelassen haben und trotzdem funktioniert das Frontend, wie erwartet. Das Anpassen von Template-Dateien in Magento ist also sehr, sehr einfach.

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!