Share
In dieser Serie werfen wir einen Blick auf die Grundlagen der Magento Theme-Entwicklung.
Magento hat sich den Ruf erworben, eine der flexibelsten und leistungsfähigsten E-Commerce-Plattformen zu sein.
Die Dokumentation dafür ist knapp, so dass Entwickler ein Rätsel lösen müssen. Das heißt, es ist relativ einfach, sobald Sie sich mit den Grundlagen vertraut gemacht haben insbesondere Wenn Sie jemand sind, der sich mit der Front-End-Entwicklung auskennt.
Bevor wir fortfahren, ist es wichtig, den Zweck dieser Serie zu verstehen und wohin wir uns in den nächsten Wochen bewegen.
Diese Serie richtet sich an Anfänger und behandelt die Grundlagen der Front-End-Entwicklung. Wenn Sie ein fortgeschrittener Magento-Entwickler sind, ist dies möglicherweise nicht die Serie für Sie.
In dieser Serie behandeln wir folgende Themen:
Am Ende der Serie sind Sie gut gerüstet, um zumindest ein solides Verständnis der Magento-Themengrundsätze zu haben und in der Lage zu sein, Ihre eigenen Themen wie ein Profi zu erstellen und zu modifizieren!
Nachdem dies gesagt ist, können wir loslegen.
Zunächst müssen wir die Magento-Hierarchie verstehen und wissen, wo sich unser Thema befindet. Es gibt Hunderte von Ordnern und Tausende von Dateien, viel zu viele, um sie aufzulisten. Ich werde mich nur auf die konzentrieren, mit denen wir arbeiten müssen.
App / Design / Frontend / Basis / Standard / App / Design / Frontend / Standard / Standard / App / Design / Frontend // / skin / frontend / base / default / skin / frontend / default / default / skin / frontend / / /
Magento hat im Kern zwei Ordner App und Haut die miteinander korrespondieren. Das App Verzeichnis enthält Dateien, die steuern, wie die Seitenvorlagen gerendert werden, die Struktur. Das Haut Das Verzeichnis enthält Dateien, die das Erscheinungsbild der Website steuern, z. B. CSS, JavaScript und Bilder.
Innerhalb eines Unterordners von App und Haut Hier finden Sie unsere Pakete und Designs. Eine typische Installation von Magento wird mit zwei Paketen geliefert Base und Standard.
Bevor wir weiter gehen, ist es wichtig, dass wir verstehen, was Pakete und Themen sind. Wenn wir das richtig machen, wird alles andere zusammenpassenschön.
EIN Paket ist eine Sammlung verwandter Themen. Es gibt keine Einschränkung, wie viele Pakete wir haben können, und wir müssen mindestens ein Paket haben. Magento kommt mit einem Besondere Paket, wenn Sie wollen, angerufen Base. Es ist ein Repository, um Magento-Kerndateien für das Frontend verfügbar zu machen. Du musst noch nie bearbeiten Sie die Base Paketdateien auf eigene Gefahr - dazu später mehr!
EIN Thema Auf der anderen Seite befindet sich ein direkter Unterordner eines Pakets, das die Dateien enthält, aus denen sich Ihr Geschäft zusammensetzt. Auch hier gibt es keine Einschränkungen hinsichtlich der Anzahl der Designs, die wir in einem Paket haben können. Ein Design kann nur zu einem Paket gehören. Jedes Paket muss standardmäßig ein Design mit dem Namen "default" enthalten, das das Hauptdesign für dieses Paket darstellt.
Das Base Das Paket enthält nur ein Design namens Standard. Es wird mit jeder Magento-Installation mitgeliefert und enthält die Front-End-Dateien, die unseren Store zum Laufen bringen. Es gibt ein paar Regeln, die wir mit dem Basispaket akzeptieren müssen.
Die erste Regel lautet, wie bereits erwähnt, diese Dateien nicht zu bearbeiten. Dies bedeutet beides in App / Design / Frontend / Basis / und skin / frontend / base / Sie sollten nur als Referenz verwendet werden. Dateien, die bearbeitet werden müssen, sollten kopiert werden Base zu deinem Paket / Thema. Dafür gibt es einige Gründe, die ich erläutern werde.
Diese Dateien machen Magento-Kerndateien aus app / code / core / an der Frontseite verfügbar. Wir sollten einfach keine Kerndateien bearbeiten. Diese Theorie gilt nicht nur für Magento, sondern auch für andere Plattformen, einschließlich WordPress.
Der zweite Grund ist, dass beim Upgrade von Magento wahrscheinlich die Option überschrieben wird Base Paketdateien. Alle Ihre harte Arbeit und Änderungen, damit Ihre Website nach einem Top aussehen kann, sind weg. Wenn Sie kein Backup erstellt haben, haben Sie es ziemlich oft!
Die zweite Regel sind die Dateien in der Base Paket sind Teil des Rückfallsystems, das ich als nächstes erläutern werde. Kurz gesagt, Magento greift auf die Kerndateien zurück, die in gefunden werden Base nachdem es Ihr Paket und Thema verwendet. Wenn es zurückfällt, sollte es sich bei der ursprünglichen intakten Datei nicht um eine bearbeitete Version handeln.
Die dritte Regel lautet: Erstellen Sie keine Themen in der Base Paket.
Zusammenfassend nur verwenden Base als Referenz und wenn Sie eine Datei bearbeiten möchten, kopieren Sie sie auf Ihre eigene Paket / Thema. Wenn Sie jemals bearbeiten müssen Base tun Sie dies auf eigene Gefahr Verfolgen Sie Ihre Änderungen, da Sie sie möglicherweise nach Upgrades manuell wiederherstellen müssen. Andernfalls lassen Sie sie in Ruhe!
Das Standard Das Paket wird wieder mit jeder Magento-Installation geliefert, diesmal sind jedoch mehrere Designs zugewiesen. Ab der Community Edition 1.8.1.0 gibt es vier verschiedene Themen, darunter:
Genau wie das Base hier gelten genau die gleichen Regeln. Die Themen in der Standard Das Paket dient im Wesentlichen nur zu Demonstrationszwecken. Ideal für Demo-Stores oder wenn Sie Ihren Kunden die Möglichkeiten von Magento vorstellen möchten, ist dies eine schnelle Einrichtung.
Magento setzt auf eine Fallback-Logik, um die Wartung der Themen und das Upgrade zu erleichtern. Es erlaubt uns, nur die Dateien zu bearbeiten und zu pflegen, die wir innerhalb unseres Designs benötigen. Wenn wir die Datei nicht bearbeiten müssen, brauchen wir sie nicht in unserem Theme. Die Datei wird von woanders abgerufen. Um dies detailliert zu erklären, brauchen wir ein reales Beispiel.
Nehmen wir an, wir haben unsere eigene Website, die so eingerichtet ist, dass sie unser eigenes Paket und Thema wie folgt verwendet:
app / design / frontend / unser_paket / unser_theme / skin / frontend / unser_paket / unser_theme /
Unsere Website fordert eine Vorlagendatei mit dem Namen 1 column.phtml und eine CSS-Datei mit dem Namen styles.css Magento kann diese Dateien jedoch nicht innerhalb unseres Designs finden. Die Magento-Fallback-Logik durchsucht nun das nächste Thema in der Hierarchie nach den Dateien und fährt mit der Suche fort, bis die angeforderten Dateien gefunden werden.
Die folgende Reihenfolge veranschaulicht die Fallback-Logik, die Magento bei der Suche nach unseren Dateien durchläuft:
app / design / frontend / unser_paket / unser_theme / template / page / 1column.phtml app / design / frontend / unser_paket / default / template / page / 1column.phtml app / design / frontend / base / default / template / page / 1column. phtml skin / frontend / unser_paket / unser_theme / css / styles.css skin / frontend / unser_paket / default / css / styles.css skin / frontend / base / default / css / styles.css
Mit dieser Fallback-Logik können wir eine saubere Codebasis haben, indem wir unsere Themen auf das Nötigste halten. Kopieren Sie nur die Dateien von Base dass wir Änderungen vornehmen müssen, um die Dateien sonst aus unserem Thema herauszulassen. Wenn unsere Website die Datei anfordert und wir sie nicht in unserem Thema haben, wird sie anhand der obigen Logik gefunden.
Hinweis:Wenn danach Magento die Fallback-Logik und die Datei durchlaufen hat immer noch kann nicht gefunden werden, es wird entweder ein Rendering-Fehler ausgegeben, wenn es sich im App-Verzeichnis befindet oder wenn es sich im Skin-Verzeichnis befindet, wird wahrscheinlich eine 404-Datei nicht gefunden.
Richtig, genug geredet, wir müssen es erst einmal einrichten.
Als Erstes werden wir unser Paket / Theme-Setup erstellen. Wir beginnen mit dem Erstellen der folgenden Ordner:
app / design / frontend / jasonalvis / default / skin / frontend / jasonalvis / default /
Jetzt haben wir ein Paket namens Jasonalvis und ein Thema namens Standard, Umbenennen Sie Ihr Paket nach Ihren Bedürfnissen. Wir werden den Namen des Themes beibehalten Standard da sollte jedes paket immer eine Standard Thema, erinnere mich auch daran Standard ist automatisch Teil der Rückfalllogik.
Jetzt müssen Sie nur noch das Paket über den Magento-Admin-Bereich aktivieren. Einmal eingeloggt, vorbei an System> Konfiguration. Von hier aus klicken Sie auf Design aus dem Menü links und geben Sie Ihren Paketnamen in das Feld ein Aktueller Paketname Feld.
Während wir hier unten sind, gibt es eine themen Sektion. Hier würden wir unseren Themennamen eingeben, aber weil wir nur verwenden Standard Wir müssen hier nichts eingeben, da Magento automatisch nach diesem Namen sucht.
Zu Demonstrationszwecken sagen wir, wir hätten zum Beispiel ein Thema, das wir während eines Verkaufs verwenden wollten, würden das Thema so erstellen:
app / design / frontend / jasonalvis / sale / skin / frontend / jasonalvis / sale /
Dann müssen wir nur noch das Theme im Admin-Bereich aktivieren, genau wie bei unserem Paket:
Jetzt wissen Sie, wie Sie Ihr Paket / Thema einrichten, aber was ist für welches Szenario am besten??
Es gibt unzählige Szenarien und ich bin sicher, jeder von Ihnen hat ein anderes. Es wird auch etwas komplizierter, wenn Sie eine Magento-Installation mit einem Multi-Store-Setup haben. In der Regel sollten die Themen, die das Paket enthält, ähnlich sein, andernfalls sollten sie in Pakete aufgeteilt werden.
Das Standard Das Thema sollte der Site-Hub sein, und die zusätzlichen Themen sollten lediglich Anpassungen am Hub sein. Wenn Sie jeden Aspekt der Website eines Themas drastisch ändern, ist dies wahrscheinlich vollständig in einem separaten Paket enthalten.
Hinweis: Wenn Sie zusätzliche Designs in unserem Paket erstellen, müssen Sie sie nicht sowohl im App- als auch im Skin-Verzeichnis erstellen, sondern nur dort, wo es relevant ist. Nehmen Sie zum Beispiel unser Verkaufsthema. Es werden nur Änderungen vorgenommen, anderes Farbschema usw. Die eigentlichen Schablonendateien werden nicht geändert. Erstellen Sie das Design daher nur im Skin-Verzeichnis und bearbeiten Sie die entsprechenden Dateien nach Bedarf.
Wenn wir das gesagt haben, nennen wir es einen Tag. Sie sollten jetzt über ein solides Verständnis der Magento-Hierarchie verfügen, das Sie für den Rest der Serie verwenden müssen. Wie immer hinterlassen alle Fragen eine Nachricht in den Kommentaren.
Im nächsten Artikel werden wir uns mit den Grundlagen von Layout-XML beschäftigen. Zögern Sie nicht, uns in der Zwischenzeit Fragen, Kommentare oder Feedback zu schießen!
Accentsconagua