Magento Grundkurs (2012)

Gestaltung

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Themes realisieren die Gestaltung des Designs in Magento. Themes sind eine Sammlung mehrerer verschiedener Dateiarten, welche die Gestaltung im Frontend beeinflussen. Mehrere Themes werden zu einem Paket zusammengefasst.
12:34

Transkript

Ein ausgesprochen wichtiger Punkt in der Konfiguration unseres Magento-Shops ist natürlich die Gestaltung. Die Gestaltung können wir an unterschiedlichen Stellen des Shops beeinflussen. Die Hauptkonfiguration jedoch finden wir im Menüpunkt "Systemkonfiguration" unter der Rubrik "Design". Die Einstellungen in dieser Rubrik führen uns zu verschiedenen Teilbereichen der Designkonfiguration in Magento. Die größten Änderungen können wir direkt im Menüpunkt "Paket" und "Themes" vornehmen. In Magento wird die Gestaltung über sogenannte Themes realisiert. Ein Theme ist eine Sammlung mehrerer verschiedener Dateiarten, die die Gestaltung im Frontend deutlich beeinflusst. Mehrere Themes in Magento werden zu einem Paket, oder auch Interface zusammengefasst. Die Grundausstattung von Magento umfasst das Default Paket. Im Default Paket finden sich mehrere Themes, die wir uns über den FTP-Browser angucken können. In unserem Magento Hauptverzeichnis befinden sich alle Dateien, und Ordner die zur Ausführung von Magento notwendig sind. Im Ordner "app/design/frontend" finden wir die Pakete, die in der Grundausstattung von Magento mit enthalten sind. Das Base-Paket hat eine besondere und wichtige Bedeutung. Das Wichtigste, was Sie an dieser Stelle über das Base-Paket wissen sollten, ist: Bitte löschen oder verändern Sie keinerlei Dateien im Base-Paket! Das Base-Paket gehört zur Kernausstattung von Magento und ist unbedingt für den reibungslosen Betrieb notwendig. Veränderungen in diesem Paket wirken sich direkt auf die Stabilität und die Funktionalität im Frontend aus. Das Default Paket entspricht dem Paketnamen, den wir auch in unserer Backend-Konfiguration sehen. Paketname "default" hier entspricht dem Ordnernamen "default" hier. Innerhalb dieses Pakets finden wir verschiedene Themes, die in Magentos Grundkonfiguration bereits enthalten sind. In der Theme-Konfiguration, im Hintergrund, sehen wir nun die Möglichkeit für die Übersetzungen, die Vorlagendateien, für die Bilder und CSS-Dateien, sowie für die Layout-Konfiguration, eigene Themes zu definieren, oder wir können für alle diese Einstellungen hier, einen Standard festlegen. Aktuell verwendet Magento das sogenannte Default Theme im Default Paket. Das ist die Standardeinstellung, die Magento bei einer Grundkonfiguration nach der Installation verwendet. Diese Standardeinstellung wird automatisch vom Programmcode verwendet, weswegen eine spezielle Konfiguration im Themes Bereich hier nicht notwendig ist. Sehen wir uns einmal an was passiert, wenn wir Magento konfigurieren, das "modern" Theme zu benutzen. Ich trage den Ordnernamen in der Theme-Konfiguration für den Standard ein. Das bedeutet, Magento verwendet das "modern" Theme sowohl für die Layout-Dateien, für die Bilder und CSS-Dateien, also für die Vorlagen und die Übersetzungen. Ich speichere die Konfiguration, und sehe mir in einem neuen Fenster das Magento-Frontend an. Wie wir sehen können, hat sich die Gestaltung maßgeblich geändert. Elemente sitzen nun an neuen Positionen, haben eine komplett andere Gestaltung und Ausrichtung. Beispielsweise die Sprachumschaltung, die sich vorher im rechten Bereich befand, ist nun in eine Menüzeile gewandert und hat dort eine andere Ausrichtung, nämlich links. Wir sehen anhand der Konfiguration auch, dass diese Eigenschaft bis auf Storeview-Ebene herunter modifiziert werden kann. Nutzen wir dieses Beispiel und stellen unsere Standardkonfiguration zurück, auf den Ursprungswert und ändern nur die englische Sprachansicht. Um in die englische Sprachansicht zu wechseln, aktiviere ich mein Dropdown für den aktuellen Konfigurationsbereich und wähle die englische Sprachansicht aus, und ich sehe dann die gleichen Konfigurationswerte wie eben, nur mit dem Unterschied, dass ich hier ausgegraute Eingabefelder habe. Ich aktiviere das Eingabefeld für das Standard-Theme, indem ich den Haken von "Website verwenden" entferne und trage dort den Ordnernamen "modern" ein. Magento verwendet nun also ausschließlich, für die englische Sprachansicht im Frontend das Modern-Theme. Ich befinde mich jetzt auf der Sprache Deutsch und lade die Seite einmal neu, dann sehen wir das alte Default-Theme. Wechsle ich nun auf die Sprache Englisch, sehen wir das Modern-Theme. Es ist also sehr einfach mit den Geltungsbereichen und der Gestaltungskonfiguration, jedem Storeview ein völlig individuelles Erscheinungsbild im Frontend zu geben. Ändern wir nun diese Einstellungen wieder auf die Standardwerte, und sehen uns dann in der Grundkonfiguration die weiteren Möglichkeiten an, wie wir die Gestaltung im Frontend beeinflussen können. Im weiteren Verlauf dieser Seite können wir sowohl den HTML-Kopf, also den unsichtbaren HTML-Bereich unserer Website beeinflussen, indem wir eine Favicon-Grafik vorgeben, die hier vorne anstatt der bei Firefox üblichen grauen Weltkugel angezeigt wird und wir haben auch die Möglichkeit, unseren Standardtitel, der in der Tab-Zeile oder in der Fenster-Titelzeile angezeigt wird. Der Standardtitel sollte ein eigener Titel für CMS-Seiten oder Artikel- und Kategorieseiten festgelegt werden, lautet in unserem Fall "Magento Commerce" und diesen können wir in unseren Shopnamen ändern: V2B Shop mit tollen Artikel. Wenn Sie es wünschen, können Sie auch jedem Titel einen Präfix vor-, oder ein Suffix nachsetzen. Das bedeutet, den Text den ich hier eingebe, werde ich später vor oder nach meinem Titel sehen, egal, auf welcher Seite in Magento ich mich befinde. Die Standardbeschreibung bezieht sich auf die Meta-Description, die, sollte sie nicht bei Artikeln- und CMS-Seiten individuell gesetzt werden, mit dieser Description gefüllt wird. Ebenso verhält es sich mit den Standard Keywords, die ebenfalls, sollten sie nicht gesetzt werden, aus diesem Eingabefeld gefüllt werden. Als letzte Eingabemöglichkeit kann ich noch bestimmte Javascript-Verknüpfungen und Javascripte in meinem Head-Bereich, also dem unsichtbaren Kopfbereich meiner Seite platzieren. Das ist dann sinnvoll, wenn Sie eine eigene Trackingsoftware verwenden und diese bereits im Kopfbereich der Seite einbinden möchten. Die Einstellungen des sichtbaren Kopfbereichs beziehen sich tatsächlich auf den hier sichtbaren Header unserer Seite. Wir können den Namen des Logos hier ändern, müssen dann aber auch eine entsprechende Datei auf unseren Server hinaufladen. Beispielsweise "images/v2b-logo.gif" ist jetzt die neue Grafik, die Magento versucht, für diesen Bereich hier aufzurufen. Natürlich müssen wir sicherstellen, dass in unserem FTP-Programm an der passenden Stelle auch eine Datei vorhanden ist. Wo finden wir diese Datei? Dies Datei befindet sich im Ordner "skin". Unter "skin" haben wir ebenfalls, in unserem Fall das Default Paket und das Default Theme. Und innerhalb dieses Default Themes finden wir den Ordner "images", der hier auch im Eingabefeld genannt ist. Und innerhalb des Ordner "images" sollte es eine "logo.gif" geben. Wie wir sehen, ist das das aktuelle Logo, was Magento im Frontend verwendet. Wir können diese Datei durch eine eigene ersetzen oder eine neue unter eigenem Namen auf den Server laden und dann entsprechend über den sichtbaren Kopfbereich in der Konfiguration im Backend verwenden. Ebenso haben wir die Möglichkeit im Backend, den Alt-Text, also den alternativen Text, sollte die Grafik nicht geladen werden können, in unserer Konfiguration zu hinterlegen. Das letzte Eingabefeld des sichtbaren Kopfbereichs betrifft den Begrüßungstext, den wir auf unserer Seite hier, bzw. in der anderen Ansicht, hier finden. Nun sehen Sie, wir sind hier in der deutschen Sprachansicht, haben aber einen englischen Text, und die Konfiguration dafür kann bis auf Storeview-Ebene angepasst werden. Somit können wir den Begrüßungstext auch für jede Sprache individuell in Magento hinterlegen. In der nächsten Sektion können wir die Fußzeile in Magento anpassen. Die Urheberrechtsangabe finden wir am Fuß jeder Seite. Und genauso wie im HTML-Kopf, also dem unsichtbaren Bereich unserer Seite, können wir auch hier noch zusätzlichen HTML-Code einfügen, der ungefiltert ins Frontend einfliesst. Auch damit können wir eigene Trackingsoftware, oder andere Elemente in unsere Seite einbinden, die auf jeder Seite, kurz vor Ende des Body-Tags ausgegeben werden sollen. Ein weiterer wichtiger Aspekt der Gestaltung sind unsere Wasserzeichen. Ein Wasserzeichen ist ein durchsichtiges Bild, was über ein Artikelbild gelegt wird. Sie verhindern damit, dass die Grafiken, die Sie in Ihrem Shop verwendet haben und für die Sie vielleicht viel Geld oder viel Zeit aufgewendet haben, von anderen einfach kopiert werden können. Magento legt dieses Wasserzeichen nicht einfach als zusätzliche Grafik im HTML-Code über dieses Bild, sondern verbindet tatsächlich die beiden Bilddateien zu einer neuen Datei. In Magento haben wir drei verschiedene Bildgrössen. Es gibt zum einen das "Base Image". Das "Base Image" finden wir auf den Artikeldetailseiten und es ist das größte Bild, was von einem Artikel in Magento gezeigt wird. Zusätzlich zum "Base Image" gibt es das "Small Image". Das "Small Image" finden wir auf den Kategorieseiten und es ist das mittelgroße Bild in Magento. Das Miniaturbild oder auch "Thumbnail" finden wir in den Sidebars, d.h. in den Seitenspalten unseres Shops, wenn wir einen Artikel z.B. in den Warenkorb legen, oder auch auf der Warenkorbansicht, wenn wir Artikel in den Warenkorb gelegt haben. Das Miniaturbild oder Thumbnail ist auch damit das kleinste Bild in Magento. Wir können für alle drei Bildgrößen ein individuelles Wasserzeichen festlegen, und wir können ebenso definieren, in welcher Größe und welchem Format dieses Wasserzeichen auf unsere Bilder multipliziert wird. Die Größe geben wir hier in einer Pixel mal Pixel Anzahl an und definieren anschließend die Deckkraft in Prozent. Wir wählen dann eine Grafik aus und bestimmen, wie diese Grafik auf unserem Bild platziert werden soll. Dabei stehen uns verschieden Möglichkeiten zur Verfügung: "Dehnen" bedeutet, das Bild wird komplett über die gesamte Grafik gezogen. Beim "Kacheln" ist eine kleinere Grafik als Wasserzeichen möglich, die mehrfach, immer wieder wiederholt, über das Bild gelegt wird. Wir können ebenso definieren, dass eine kleine Grafik nur oben links, oben rechts, unten links, unten rechts oder mittig platziert werden soll. Dies Einstellungsmöglichkeiten finden wir sowohl für das "Base Image", als auch für das "Small Image" und das "Thumbnail". Wenn Sie die Einstellungen hier vorgenommen haben, vergessen Sie bitte nicht, über die Aktionsschaltfläche "Konfiguration speichern" Magento mitzuteilen, dass die Eingaben fertig sind und in die Datenbank geschrieben werden können. Ein wichtiger Aspekt, auf den ich unbedingt hinweisen möchte, ist die Funktion "System Design". Die Design-Konfiguration von Magento wird in diesem Menüpunkt nicht festgelegt. Sie können über den Menüpunkt "System Design" ausschließlich systemweite, also alle Website betreffenden Gestaltungsänderungen, zu einem ganz bestimmten Zeitpunkt festlegen. Diese Art der Design-Konfiguration ermöglicht Ihnen also ganz gezielt, beispielsweise zu Weihnachten, eine Gestaltungsänderung auf alle Ihre Shops auf einmal auszuweiten. Jedoch können Sie hier drüber keinerlei Grundkonfiguration vornehmen, da Magento mit dem Fallback-Model einer bestimmten Art Dateien und Themes zu verarbeiten, nicht mehr richtig funktionieren würde. Sehen Sie also bitte davon ab, diesen Menüpunkt "System Design" für Ihre Konfiguration der Gestaltung zu verwenden und benutzen Sie stattdessen bitte "System Konfiguration" und dort die Sektion "Design". Besonders wichtig ist dies im Zusammenspiel mit mehreren Websites und unterschiedlichen Storeviews, bei denen Sie individuelle Gestaltungen konfigurieren möchten. Wir haben nun einen kleinen Ausflug in die Dateistruktur von Magento gemacht und Pakete und Themes kennengelernt, und ebenso gesehen, wie wir den Kopf- und Fußbereich unserer Seitenanzeige anpassen können. Wasserzeichen bieten uns die Möglichkeit, die von uns gemachten oder gekauften Produktbilder, vor einer Weiterverwendung auf anderen Websites zu schützen, indem eine Grafik darüber platziert und das Bild somit eindeutig gekennzeichnet wird. Wir haben auch gesehen, dass der Menüpunkt "System Design", nicht zur Konfiguration der grundlegenden Gestaltung unseres Shops geeignet ist. Da hiermit keine Konfiguration einzelner Storeviews oder Websites möglich ist und auch das Fallback-Model in Magento nicht genutzt werden kann.

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!