Eine Einführung in die Magento Design Terminologie und Konzepte

Bist du ein Anfänger in Magento? Möchten Sie ein eigenes Thema erstellen? Wenn ja, ist dieser Artikel speziell für Sie geschrieben. 

Um mit dem Design und der Anpassung des Magento-Themas zu beginnen, ist es sehr wichtig, dass Sie über ein umfassendes Verständnis der Magento-Design-Terminologie und der grundlegenden Konzepte des Magento-Steuerungsflusses verfügen.

Bevor wir beginnen, sollten Sie ein paar Dinge über die Magento-Versionen klären, da die Anwendung in zwei verschiedenen Ausführungen erhältlich ist: Gemeinschaftsausgabeund Enterprise Edition. Dieser Artikel unterstützt die folgenden Versionen von Magento:

  • Community Version 1.4+
  • Enterprise Edition Version 1.8+    

Um alles zu verstehen, was wir behandeln, müssen Sie bereits eine Arbeitskopie von Magento installiert haben (die Sie hier herunterladen können). Wenn Sie bereits mit dem Magento-Dashboard vertraut sind, ist es wahrscheinlich einfacher, diesem Tutorial zu folgen.

Wenn nicht, kein Problem. Wir werden im gesamten Artikel auf alle Details eingehen.

Ein Überblick über die Magento-Hierarchie

Bevor Sie sich eingehend mit der tatsächlichen Design-Terminologie beschäftigen, ist es wichtig, das Konzept der Shop-Hierarchie zu verstehen. Eine der Hauptfunktionen von Magento ist, dass es die Erstellung und Manipulation mehrerer Speicher und Speicheransichten in einem einzigen Setup unterstützt. 

Schauen wir uns diese grundlegenden Begriffe an und gehen wir im Detail weiter:

  • Global bezieht sich auf Ihre gesamte Magento-Installation.
  • Webseite bezieht sich auf eine Gruppe von Geschäften oder nur auf ein Geschäft, das Kundeninformationen, Bestellinformationen und Einkaufswageninformationen oder keine Informationen teilen kann.
  • Shops sind Kinder der Website und Sammlung von Geschäftsansichten. Der Hauptzweck von Stores besteht darin, logisch zusammenhängende Store-Ansichten zu verwalten, mehrere Stores unter einer einzigen Website zuzulassen und eine individuelle Katalogstruktur einzurichten.
  • Ansichten speichern sind Kinder von Geschäften. Jeder Store hat eine Store-Ansicht oder mehrere Store-Ansichten. Speicheransichten werden hauptsächlich für die mehrfache Darstellung derselben Daten verwendet. Meistens werden sie für die Darstellung von Geschäften verwendet, die mehrere Sprachen unterstützen. 

Hier können Sie sehen, dass eine Website über ein Geschäft oder mehrere Geschäfte verfügen kann und ein Geschäft über eine Geschäftsansicht oder mehrere Geschäftsansichten verfügen kann. Ein Standardszenario wäre die Hauptwebsite, der Hauptwebsite-Store und die Standardspeicheransicht. 

Wenn Sie Magento bereits installiert und eingerichtet haben, navigieren Sie zum Magento-Verwaltungsbereich und zeigen Sie auf System Tab. Auf dieser Seite sehen Sie im oberen linken Bereich des oberen Menüs das Aktueller KonfigurationsbereichDropdown - Hier wird das Standardszenario Ihres Magento Stores angezeigt.

                                               

Lassen Sie uns einen Blick auf verschiedene Szenarien werfen, um ein besseres Verständnis von Website, Geschäften und Ansichten zu erhalten.

Erstes Szenario: Ein Geschäft

Angenommen, Sie möchten Kleidung für Männer und Frauen verkaufen. Als Startup möchten Sie Ihrem Shop keine separaten Kataloge oder Unterstützung für mehrere Sprachen anbieten. In diesem Fall würde das Szenario eine Website, ein Geschäft und eine Standardgeschäftsansicht enthalten.

Zweites Szenario: Mehrere Stores

Sagen Sie jetzt, dass Sie Kleidung für Männer und Frauen in separaten Läden verkaufen möchten und Kundenbestellungen und Warenkorbinformationen teilen möchten. Auf diese Weise können Kunden in jedem Geschäft ein Konto erstellen und haben trotzdem Zugriff auf alle ihre Informationen an einem einzigen Ort.

Beachten Sie, dass Sie immer noch nicht mehrere Sprachen unterstützen möchten. In diesem Fall handelt es sich bei diesem Szenario um eine Website: Ein Geschäft für Herrenbekleidung, ein Geschäft für Damenbekleidung und eine Standardgeschäftssicht.

Drittes Szenario: Mehrere Websites, mehrere Store Views

Wenn Ihr Unternehmen wächst, möchten Sie es möglicherweise so ausbauen, dass es einen Accessoires-Store anbietet, der Ihren Bekleidungsladen ergänzt. 

Darüber hinaus möchten Sie in jedem Geschäft Kundendaten freigeben und mehrere Sprachen unterstützen. Dieses Szenario umfasst zwei Websites und zwei Stores: 

  1. Bekleidung
  2. Zubehör

Daraus ergeben sich zwei Geschäftsansichten: eine englische Geschäftsansicht und eine spanische Geschäftsansicht.

Möglichkeiten

Die Möglichkeiten zum Erstellen der Instanz einer Website, eines Geschäfts und von Geschäftsansichten hängen von Ihren Anforderungen ab. Sie können beliebig viele oder wenige Websites, Geschäfte und Ansichten einrichten, von denen Sie möchten Magento-Admin-Panel> System> Stores verwalten.

Magento Design: Schnittstellen & Themen

Wir haben gesehen, dass wir mit Magento mehrere Stores in einem einzigen Magento-Setup einrichten können. Auf dieser Grundlage können wir auch verschiedenen Websites, Stores und Store-Ansichten ein anderes Aussehen und Verhalten verleihen. Dies ist durch möglich Themes. Wir können so viele Themen erstellen, wie wir möchten, und wir können auch verschiedene Themen auf verschiedene Geschäfte anwenden.

EIN Design-Paket bezieht sich auf eine Sammlung verschiedener Themen. Wechseln Sie in Ihr Magento-Verzeichnis App / Design / Frontend.Hier sehen Sie das "Base" -Paket. Dies ist das Standardpaket, das mit Magento geliefert wird. Dieses Paket wird in jeder Magento-Version unterschiedlich benannt. In der Community Edition ist dieses Paket beispielsweise "Base", in der Pro Edition ist dieses Paket "Pro" und in der Enterprise Edition ist es "Enterprise".. 

Zusätzlich können Sie Ihr eigenes Paket unter hinzufügen Vorderes EndeVerzeichnis. In früheren Versionen von Magento beziehen sich Design-Pakete auf Schnittstellen.

Themes sind eine Sammlung von Dateien - also Vorlagen und Skins -, die das tatsächliche Layout am Frontend darstellen. Abhängig von unseren Anforderungen können wir das Layout ändern, indem Sie in bestimmten Themes neue Vorlagendateien bearbeiten und erstellen. 

Ein Designpaket kann mehrere verwandte Themen haben, es wird jedoch empfohlen, dass jedes Paket ein StandardthemaWird standardmäßig gerendert, wenn Magento kein anderes Design findet.

Mehr zu Themen

Jedes Thema in Magento verfügt über zwei Arten von Verzeichnissen:

  1. Das Vorlagenverzeichnis enthält Layout, Vorlage und lokales Unterverzeichnis unter App> Design> Frontend> Dein Theme-Paket> Dein Theme.
           
    Das Layout
     Das Verzeichnis enthält die XML-Dateien, die zum Erstellen der grundlegenden Blockstruktur von Designs verwendet werden.

    Die Vorlage
     Das Verzeichnis enthält alle PHTML-Dateien (PHP + HTML), mit denen der eigentliche HTML-Code von Designs erstellt wird. Vorlagendateien lassen auch PHP-Code zu, sodass dynamische HTML-Seiten erstellt werden können
    Das Gebietsschema Das Verzeichnis enthält CSV-Dateien, die hauptsächlich zum Speichern mehrsprachiger Zeichenfolgen verwendet werden, um das Speichern mehrerer Sprachen zu unterstützen.
  2. Das Skin-Verzeichnis Enthält CSS, JavaScript und Bilder-Unterverzeichnisse unter Skin> Frontend> Dein Theme-Paket> Dein Theme.

    CSS enthält alles css Dateien zu diesem Thema.

    JS enthält alles js Dateien zu diesem Thema.
    Bilder enthält alle Bilder, die sich auf ein bestimmtes Thema beziehen.                                                     

Theme Variationen

Mit Magento können wir beliebig viele Motivvariationen erstellen. Wenn Sie mit mehreren Stores arbeiten, können Sie verschiedenen Stores unterschiedliche Designvariationen zuweisen. Sie können Designvariationen erstellen, indem Sie das Standarddesign in ein neues Design kopieren und kleinere CSS-Variationen auf das neue Design anwenden.

Angenommen, Sie haben zwei Geschäfte erstellt, die dieselben Informationen verwenden, Sie möchten jedoch, dass der Kunde einen Unterschied in Bezug auf Farbe und Layout beider Geschäfte empfindet. In diesem Fall können Sie zwei Designvariationen erstellen und diese jeweils unterschiedlich angeben css, js, und Bilder und wenden Sie sie dann auf einzelne Geschäfte an.

Ein Hinweis zum Standarddesign

Wie bereits erwähnt, wird empfohlen, dass Sie in jedem Designpaket ein Standarddesign verwenden. Wenn Sie Ihrem Geschäft kein Design zugewiesen haben, sucht Magento das Standarddesign entsprechend dem Rückfallsystem des Designs(was wir im nächsten Abschnitt behandeln werden). Wenn das Standarddesign nicht gefunden wird, wird ein Fehler 404 ausgegeben.
Wenn Sie mit einer neuen Magento-Installation arbeiten, wird das "Base" -Paket verwendet, das auch das Standarddesign enthält. Für erforderliche Dateien, die nicht in Ihrem Standarddesign enthalten sind, wird das Standarddesign des Basispakets angezeigt. 

Es ist sehr wichtig, dass Ihr Standarddesign alle erforderlichen Dateien enthält.

Theme Fallback System

Wenn Sie mit Magento-Themes arbeiten, ist es wichtig, das Rückfallsystem des Magento-Themes zu verstehen. Andernfalls können Sie sich innerhalb des Magento-Themeverzeichnisses verlieren, wenn Sie versuchen herauszufinden, welche Blöcke die Dateien dieses Themas rendern.

Zum Beispiel, wenn für Ihr benutzerdefiniertes Design eine Datei erforderlich ist header.phtml, Wenn Sie den Header rendern, sucht Magento die Datei anhand des folgenden Diagramms:

Das Diagramm sieht vor, dass das Fallback-System zuerst in Ihrem benutzerdefinierten Designverzeichnis nachschaut. Wenn es nicht gefunden wird, wird nach dem Standarddesign gesucht, das sich im selben Paket wie das benutzerdefinierte Design befindet. Wenn es auch nicht im Standarddesign des Designpakets enthalten ist, wird das Standarddesign des Basispakets berücksichtigt. Wenn Magento die bestimmte Datei durch diesen Vorgang nicht finden kann, wird eine Fehlermeldung ausgegeben.

In früheren Versionen von Magento enthielt das Design-Fallback-System das Basis-Paket nicht als letzten Teil des Fallback-Systems. In früheren Versionen suchte das Rückfallsystem nur nach einem bestimmten Designpaket.

Durch die Einbindung des Base-Pakets in das Fallback-System können wir unser Theme mit nur den erforderlichen Dateien einfacher verwalten. Angenommen, Sie möchten ein völlig anderes Aussehen und Verhalten Ihrer beiden Filialen mit Ausnahme der Kundenkontoseiten anwenden. Dies ist möglich, indem zwei Themenvariationen erstellt und das Rückfallsystem genutzt wird.

Um dies zu erreichen, müssen Sie zwei Designvariationen und ein Standarddesign erstellen, das alle erforderlichen Dateien enthält. Dabei enthält Ihr Designpaket ein Standarddesign und zwei Designvariationen. 

Ihre beiden Designvarianten sollten alle Dateien enthalten, die Sie für die Kundenseiten angepasst haben (da sie für beide Designs gleich sind). Wenn Magento damit beginnt, die Dateien aus Ihrem bestimmten Design zu rendern, wird auf die Kundenkontoseiten des Standardthemas zurückgegriffen, da sie nicht in unserem benutzerdefinierten Design definiert wurden.

Blöcke und Layouts

Blöcke und Layouts sind vielleicht neue Begriffe für Sie, aber um ein erfolgreicher Magento-Designer zu sein, sollten Sie diese Konzepte verstehen.

Blöcke

Blöcke sind die Hauptentität, durch die Magento das Front-End-Layout darstellt. Durch die Verwendung von Blöcken unterscheidet Magento verschiedene Teile des Layouts. Grundsätzlich gibt es zwei Arten von Blöcken.

Strukturblöckesind die Grundzüge eines Frontend-Layouts in Magento.Normalerweise enthalten sie den Abschnitt Header, Left, Right, Main und Footer eines Layouts.

                                           

Inhaltsblöcke sind die eigentlichen Blöcke, die sich innerhalb der Strukturblöcke befinden, um die endgültige visuelle Ausgabe zu erzeugen. Diese Blöcke stellen die blockspezifische Funktionalität über HTML bereit. Die Kategorienliste, Produktliste, Unterkategorienliste, Produkt-Tags, Homepage-Produktabschnitte usw. sind die Inhaltsblöcke innerhalb des Strukturblocks.

                                          

Layouts

Schließlich sind Layouts die XML-Dateien, die Ihre Seite mit Strukturblöcken und Inhaltsblöcken zuordnen. Jede Layoutdatei enthält die Tags, über die Sie bestimmte Blöcke steuern können. 

Jedes Magento-Modul verfügt über separate Layout-Dateien, sodass Sie die modulspezifischen Layouts problemlos verwalten können.

Fazit

Dieser Artikel soll einen umfassenden Einstieg in die Entwicklung des Magento-Themas geben.

Noch Fragen? Zögern Sie nicht, Kommentare, Fragen oder andere allgemeine Rückmeldungen in den Kommentaren zu hinterlassen!