Share
In diesem Artikel werden die Grundlagen des XML-Layouts von Magento behandelt.
Wir gehen rüber local.xml und einige grundlegende Änderungen vornehmen. Dazu gehören das Hinzufügen und Entfernen von Skripts, das Entfernen von Blöcken und das Hinzufügen von Layoutänderungen.
Nun, da wir ein grundlegendes Verständnis der Themenhierarchie aus dem ersten Artikel dieser Serie haben, werden wir uns ein wenig tiefer mit den Vorlagen befassen.
Die Vorlagendateien bestehen aus zwei Unterverzeichnissen:
Accentsconagua
App / Design / Frontend ///Layout/ App / Design / Frontend ///Vorlage/ Es gibt viel zu berichten, aus diesem Grund werde ich sie in ihre eigenen Artikel aufteilen. Heute werden wir nur den Layout-Aspekt behandeln. Der Vorlagenaspekt wird im nächsten Artikel zum Tragen kommen.
Warten Sie, bevor wir loslegen können, müssen Sie unbedingt den Magento-Cache deaktivieren, falls Sie dies noch nicht getan haben. Auf diese Weise können wir unsere Änderungen sofort anzeigen, anstatt den Cache jedes Mal neu zu aktualisieren, wenn wir eine Änderung vornehmen. Idealerweise sollte es während der Entwicklung einer Website deaktiviert werden. Melden Sie sich dazu im Admin-Bereich an und gehen Sie zu System> Cache-Verwaltung und deaktivieren Sie alle.
Nun ist das sortiert, lass uns anfangen.
Der Layoutordner enthält die XML-Dateien, die weitgehend bestimmen, was am vorderen Ende des Speichers angezeigt wird. Die Layoutstruktur ist in Magento recht komplex, aber das ist einer der Gründe, warum es so mächtig und flexibel ist.
Sie werden Hunderte von XML-Dateien finden, die jeweils ihre eigene Sache, jede Ansicht oder jedes Modul in erledigen App / Code / erhält sein Layout durch eine eigene XML-Datei. Wenn Sie jemals ein Drittanbieter-Modul in Ihrem Geschäft installieren und es sich auf das Frontend auswirkt, hat es zweifellos eine eigene XML-Datei.
Woher weiß ich, welche Datei ich bearbeiten muss, wenn ich muss??
Nun, die Namenskonvention der Dateien erleichtert das Auffinden von Änderungen, wenn Sie Änderungen vornehmen müssen. Zum Beispiel Magento App / Code / Core / Mage / Seite / Das Modul hat eine eigene XML-Datei mit dem Namen app / design / frontend / base / default / layout / page.xml Wie Sie sehen, entsteht hier ein Muster! Wenn Sie sich erst einmal mit einigen Geschäften vertraut gemacht haben, werden Sie schnell Wiederholungen bemerken und sich erinnern, welche Dateien Sie bearbeiten müssen.
Hinweis:Bitte beachten Sie die Module von Drittanbietern, da der Entwickler die XML-Datei technisch beliebig benennen kann. In diesem Szenario müssen Sie den Namen der Datei innerhalb des Moduls selbst suchen, sofern dies nicht in der Dokumentation enthalten ist config.xml Datei. Beachten Sie auch, dass nicht alle Module über eine XML-Datei verfügen. Normalerweise ist die XML-Datei nur vorhanden, wenn sie sich auf das Front-End des Speichers auswirkt. Erwarten Sie also nicht immer eine!
Pfad zur Konfiguration: app / code / local /
Hinweis, auf den ich verwiesen habe Basis / Standard Denken Sie daran, dass sich hier die Kerndateien befinden. Wenn Sie Änderungen vornehmen müssen, kopieren Sie sie immer in Ihre eigenen Paket / Thema noch nie bearbeiten Basis / Standard Dateien.
So wie:
app / design / frontend / base / default / layout / page.xml
Kopieren nach:
App / Design / Frontend /
Das starke Ändern dieser Dateien erfordert Erfahrung und da dies ein Anfänger-Tutorial ist, liegt es außerhalb des Rahmens dieser Serie. Ich werde jedoch durchlaufen local.xml und wie dies mit der Themenentwicklung zusammenhängt und eine Handvoll grundlegender Modifikationen abdeckt, die meiner Meinung nach nützlich sein werden.
Einfach gesagt handelt es sich um eine Datei, die sich in unserem Themenlayoutordner befindet und einen großen Teil unserer Überschreibungen oder Aktualisierungen der XML-Verweise für dieses Thema enthält. Es gilt als gute Praxis und Magento empfiehlt es. Wir könnten es als Magento-Version von WordPress betrachten Functions.php Datei.
Warten Sie, ein "großer Teil", warum nicht "alle" unserer Überschreibungen oder Updates?
Es gibt eine Debatte zu diesem Thema und wenn wir etwas recherchiert haben, werden wir feststellen, dass jeder seine eigene Meinung hat. Einige sagen nur verwenden local.xml Nehmen Sie an keiner anderen Stelle Änderungen vor, während andere dies nicht akzeptieren werden. Nehmen Sie also nicht das folgende Set in Stein.
Ich persönlich denke, es ist ein großartiger Ort für kleine Modifikationen, wie das Hinzufügen von Blöcken, Entfernen von Blöcken oder das Ändern von Vorlagen. Es ist nicht der Ort, um Ihre Produktseite oder ähnliches vollständig zu gestalten. Wenn Sie dies tun möchten, tun Sie es in der entsprechenden Datei, z catalog.xml
Ja, es kann uns etwas Zeit sparen, wenn wir ein Upgrade von Magento durchführen, da alle Bearbeitungen in einer einzigen Datei gespeichert sind, aber alle Bearbeitungen in einer einzigen Datei abgelegt werden wird einfach aufgewogen.
Wenn Sie eine große Menge an Änderungen an einer Seite vornehmen, möchten wir im Idealfall auf das andere XML-Element dieser Seite verweisen, wir müssen ständig zwischen den beiden Dateien wechseln und letztendlich die Funktionalität zwischen zwei separaten Dateien aufteilen. nicht was wir wirklich wollen!
Also, wie man es aufstellt…
Erstellen Sie die local.xml Datei in unserem Theme-Layoutordner App / Design / Frontend / und fügen Sie einige grundlegende XML-Markup-Strukturen hinzu:
Nun, da wir unsere Akte bereit haben, zeige ich Ihnen eine Handvoll gängiger Techniken.
Eine sehr häufige Änderung ist das Hinzufügen oder Entfernen von JavaScript und CSS. Wenn Sie mit jQuery arbeiten, müssen Sie dies hinzufügen, da es von Magento nicht standardmäßig enthalten ist. Außerdem muss jedes benutzerdefinierte JavaScript hinzugefügt werden.
Wenn wir den Quellcode einer Magento-Installation anzeigen, wird eine ganze Reihe von JavaScript eingeblendet, von denen einige nicht verwendet werden. In diesem Fall muss das Entfernen als unnötig angesehen werden http Anfrage - Magento ist nicht schnell, also machen wir die Grundlagen richtig!
Um eine Datei einzufügen, müssen wir entscheiden, ob sie global sein soll, z. B. auf jeder Seite unseres Shops oder nur in bestimmten Bereichen. Hiermit können wir das richtige Layout-Handle auswählen.
Ich werde zwei Layout-Handles einführen,
Das
Nun zum Code.
skin_js js / libs / jquery.min.js ]]> skin_js js / libs / modernizr.min.js skin_js js / libs / html5shiv.min.js IE 9 skin_js js / libs / response.min.js IE 9 skin_js js / libs / selectivizr.min.js IE 9 skin_css css / widgets.css skin_css css / print.css skin_css css / styles-ie.css IE 8 skin_js js / ie6.js IE 7 js lib / ds-sleight.js IE 7 skin_js js / libs / home.min.js skin_css css / home.css
Hier ist ziemlich viel los, aber wenn es zusammengebrochen ist, ist es relativ einfach.
Art der Datei / Ort Pfad zur Datei
Folgend Punkt 2: Es gibt auch vor, wo sich die Datei in der Hierarchie befindet. Jeder Typ verweist auf eine andere Position in der Hierarchie, die der Eingaben in der Hierarchie vorangestellt wird
skin / frontend // default / name skin / frontend // default / name
js / name Beachten Sie, dass das Laden einer Datei von einer externen Quelle wie einem CDN eine etwas andere Syntax hat. Es ist auch wichtig, die jQuery.noConflict (); am Ende, um zu vermeiden, dass jQuery mit der in Prototype erstellten Magento-Bibliothek in Konflikt steht.
Magento wird mit mehreren Sidebar-Blöcken gebündelt geliefert, so dass wir nie in einer realen Situation wie der "Back to School" -Anzeige verwenden werden. Hier sind zwei Methoden, die wir verwenden können:
rechts.poll
Das Löschen Diese Methode ist ein guter Weg, um einen Block zu entfernen, unabhängig davon, welches Layout-Handle den Block geladen hat. Manchmal möchten wir, dass der Block global ist, egal wo er ist, und niemals zurückkehren!
Auf der anderen Seite unsetChild entfernt nur einen Block aus einem bestimmten Layout-Handle. Sie können sehen, ich rufe es in der Recht Layout-Handle, damit es nur von dort entfernt wird. Wenn die rechts.poll Der Block wird von einem beliebigen anderen Ort in einem anderen Layout-Handle aufgerufen.
Hier haben wir ein Beispiel für das Hinzufügen eines zusätzlichen Strukturblocks zur Homepage. Wir verweisen auf den Inhaltsblock und verwenden den nach dem Tag, um den Block anzugeben, der am Ende des Inhaltsblocks angezeigt werden soll.
Als letztes haben wir ein Beispiel für das Hinzufügen eines statischen CMS-Blocks. Zuerst müssen Sie jedoch einen erstellen, damit dies funktioniert.
Sobald Sie sich im Admin-Bereich angemeldet haben, gehen Sie zu CMS> Statische Blöcke und füge einen neuen Block hinzu. Beachten Sie den "Identifier", da wir im XML-Code darauf verweisen müssen.
home_static_block
Innerhalb des block_id Hier geben wir unsere Kennung ein.
Wir haben die Oberfläche kaum zerkratzt, und es gibt viele andere Verwendungsmöglichkeiten für XML. Weitere Layout-Handles und XML-Tags stehen uns zur Verfügung. Das Layout von Magento selbst ist eine Serie, da es viel zu behandeln gibt, denn jetzt halte ich es nur für die Grundlagen.
Wenn Sie mehr über XML lesen möchten, empfiehlt es sich, diesen Artikel zu lesen und auch eine Kopie des offiziellen Magento Design Design Guide herunterzuladen, in der ausführlicher auf die anderen XML-Tags eingegangen wird, die wir verwenden können.
Im nächsten Artikel werden wir die Vorlagendateien vorantreiben und untersuchen.
