Share
Magento ist eine erstaunlich leistungsstarke E-Commerce-Plattform. In dieser Miniserie lernen wir, wie Sie mit der Plattform beginnen, die Terminologien kennenlernen, ein Geschäft und alle damit verbundenen Aspekte einrichten und schließlich lernen, wie Sie es anpassen können, um es zu unserem ganz eigenen zu machen.
In diesem dritten Teil konzentrieren wir uns auf den Prozess, der hinter Magento steht: Wie werden Themes installiert, welche Konzepte müssen Sie verstehen, um ein Design zu erstellen, und die allgemeine Dateistruktur. Aufgeregt? Lass uns anfangen!
Im letzten Teil haben wir gesehen, wie Sie Ihren Magento-Store von der Installation bis zur Bereitstellung vorbereiten können, einschließlich der Einrichtung Ihrer Produkte, Produktkategorien, Steuern, Versand, Zahlungsmöglichkeiten und vielem mehr.
Heute betrachten wir die Grundlagen des Magento-Themens. Wir lernen die allgemeine Idee hinter Magento-Themen, die verschiedenen Terminologien dahinter und die Grundstruktur eines Themas kennen.
Zunächst einmal ist das Thema "Magento" nicht wirklich so schwer, wie es vermutet wird. Es ist ein wenig anders als in WordPress oder Joomla mit Themen umzugehen, ja, aber definitiv nicht schwierig. Alles, was Sie wissen müssen, ist ein wenig zu wissen, wie man es als Profi anfängt!
Um es einfach zu machen, ist ein Magento-Design eine Sammlung von PHTML-, CSS- und JS-Dateien, die zusammen mit XML-Dateien zur Definition der Struktur ausgegeben werden. Eine PHTML-Datei besteht aus einem regulären HTML-Markup, das für die Funktionalität mit PHP-Code durchsetzt ist. Falls Sie verwirrt sind, sieht ein zufälliger Codeblock folgendermaßen aus:
getChildHtml ('store_language')?>getWelcome ()?>
getChildHtml ('topLinks')?>
Sehen? Es ist wirklich einfach, wenn Sie Ihren Kopf darum wickeln. Wenn Sie mit der Erstellung von Themes für andere Systeme gearbeitet haben, ist das großartig. Wenn nicht, keine Sorge, ich werde Sie durch den gesamten Prozess führen.
Beachten Sie, dass in Magento das vordere und das hintere Ende vollständig getrennt sind. Ich gehe davon aus, dass die meisten von Ihnen das Backend nicht enthäuten müssen, also bleibe ich allein beim Frontend.
Bevor wir anfangen, haben mich einige Leute über Twitter / Emails mit einem DM versehen und die gleiche Frage gestellt: Wie installiere ich ein Theme? Ich werde zuerst darüber reden.
Es gibt zwei Möglichkeiten, ein Magento-Design zu installieren:
Ich werde kurz über beide sprechen.
Die erste Methode ist die, an die Sie gewöhnt sind. Laden Sie ein Design herunter, laden Sie es hoch und fertig. Sie müssen jedoch wissen, wo Sie die Dateien hochladen müssen, da dies etwas anders funktioniert, als Sie annehmen.
Die Themen werden je nach Quelle unterschiedlich verpackt, im Kern haben Sie jedoch 2 Ordner:
Sie können diese einfach in das Stammverzeichnis der Installation ziehen und mit den vorhandenen Daten zusammenführen.
Wenn Sie das Motiv zufällig als Sammlung von 3 Ordnern erhalten, machen Sie sich keine Sorgen.
Der Ordner, der die PHTML-Dateien enthält, und der Ordner, der die XML-Dateien enthält root / app / design / frontend / default / themenname während derjenige, der die CSS-Dateien, Bilder und andere Assets enthält, verwendet wird root / skin / frontend / default / themenname.
Das ist alles, was Sie jetzt tun müssen. Ich erkläre, warum jeder Teil später an einen bestimmten Ort geht. Sie können Ihr Design jetzt aktivieren.
Navigiere zu System -> Design und klicken Sie auf Designänderung hinzufügen.
Wählen Sie das gewünschte Thema aus, klicken Sie auf "Speichern" und Sie sind fertig.
Die Verwendung von Magento Connect ist einfacher, sofern es dort verfügbar ist. Navigiere zu System -> Magento Connect -> Magento Connect Manager.
Nach dem Anmelden werden Sie aufgefordert, den Erweiterungsschlüssel des Designs einzugeben, das Sie installieren möchten. Geben Sie den Schlüssel ein und warten Sie, bis das System seine Aufgabe erfüllt.
Nachdem Sie die erforderlichen Dateien heruntergeladen und dort platziert haben, wo sie benötigt werden, können Sie das Design jetzt wie zuvor aktivieren.
Wenn Sie mit Magento arbeiten, gibt es einige Designkonzepte, die Sie umdenken müssen, bevor Sie mit dem Ändern des Standarddesigns beginnen können.
Layouts ist eine clevere, neue Idee in Magento. Mit diesem System können Sie die Struktur einer Seite und beliebiger Seiten durch ordnungsgemäß geformte XML-Tags definieren.
Im Wesentlichen können Sie bestimmen, welcher Abschnitt der Seite wohin geht, indem Sie nur einige Attribute in einer XML-Datei ändern. Jede Ansicht oder jedes Modul erhält sein Layout durch eine eigene XML-Datei.
Layouts in Magento sind ein großes Thema und nur ein paar Absätze hier werden dem nicht gerecht. Auf dem Weg werde ich alle notwendigen Informationen für das Erstellen eines eigenen Themas sowie einen ausführlichen Artikel über Layouts enthalten, der alle fortgeschrittenen Funktionen dieser Funktionalität behandelt.
Wenn Sie interessiert sind, finden Sie hier einen kleinen Ausschnitt, um sich ein Bild von den Layouts zu machen:
Top-Container
Vorlagen bestehen aus PHTML-Dateien, die mit normalem HTML-Markup und PHP-Code gefüllt sind. Ähnlich wie bei WordPress verwenden Sie eine Reihe von vordefinierten Methoden, um die Ausgabe festzulegen. Genau wie bei anderen gängigen Systemen werden wichtige Abschnitte wie Kopfzeile, Fußzeile und Seitenleiste in separaten Dateien abgelegt und bei Bedarf eingezogen.
Sie können für jede Ansicht von Magento unterschiedliche Vorlagen haben. Sie können beispielsweise einen anderen Code für eine Wunschliste oder eine Checkout-Seite verwenden, anstatt dasselbe Erscheinungsbild für die gesamte Website zu verwenden.
Hier ist eine Vorlage für Neugierige:
getProductUrl ()?> "title ="htmlEscape ($ this-> getImageLabel ($ _ product, 'small_image'))?> ">  -> init ($ _ product, 'small_image') -> resize (100, 100); ?> "<?php echo $this->htmlEscape ($ this -> getImageLabel ($ _ product, 'small_image'))?>")
Sieht ein bisschen unordentlich aus, ich weiß, aber streichen Sie die PHP-Teile aus und Sie werden sehen, wie ähnlich es anderen Systemen ist.
Skins sind nichts anderes als CSS-Dateien, JavaScript-Dateien, Bilder und andere Elemente, die Sie im Markup verwenden, um Ihr Design zu erstellen. Im Wesentlichen gehen alle Nicht-PHP-Assets hier. Schriften zum Einbetten? Eine schicke Flash-Demo? Ein schickes Stück SVG? Alle diese fallen in diese Kategorie.
Blöcke sind die wesentlichen Bausteine eines Themas, mit denen Sie Ihr Thema modular zusammenstellen können.
Als Teil von Layouts bildet dies das Rückgrat von Magentos starkem Templating-System. Blöcke sind im Wesentlichen Abschnitte, die Sie mit der oben genannten XML-Datei verschieben können, um die Darstellung einer Seite zu ändern.
Blöcke müssen auf eine relevante Vorlagendatei verweisen, damit Magento die erforderliche Datei abrufen kann. Ein bisschen verwirrt? Hier ist ein Beispiel.
Wir definieren im Wesentlichen einen neuen Block, der durch Angabe des Blocktyps und eines Namens geladen wird. Es ist ein wenig anders als das, woran wir gewöhnt sind, aber glauben Sie mir, dass Sie es bekommen, sobald Sie mit der Entwicklung beginnen. Wie auch immer, ich werde Blöcke detaillierter behandeln, wenn wir unser Thema erstellen, und ich schreibe noch mehr über Layouts und Blöcke auf der ganzen Linie. Machen Sie sich also keine Sorgen, wenn es nicht vollständig ist Jetzt spüren. Machen Sie sich einfach ein allgemeines Gefühl für die anstehenden Themen.
Ein Strukturblock definiert die Grundstruktur einer Seite. Denken Sie an HTML 5-Kopf-, Fuß- und Seitenabschnitte. Sie wurden ausschließlich zur visuellen Abgrenzung eines Entwurfs erstellt.
Aus den Magento-Dokumenten Inhaltsblöcke ähneln Ihren regulären Container / Wrapper-DIV-Elementen, die Sie in einem Design verwenden. Genau wie beim Design enthält jeder Inhaltsblock eine bestimmte Funktionalität oder einen bestimmten Zweck. Ein Menü in der Kopfzeile, ein Callout in der Seitenleiste, rechtliche Erläuterungen in der Fußzeile werden in separaten Inhaltsblöcken angezeigt.
Denken Sie daran, dass Inhaltsblöcke immer noch Blöcke sind und einer bestimmten PHTML-Datei zugeordnet werden, um ihren HTML-Inhalt zu generieren und darzustellen.
Aus den Magento-Dokumenten Endlich erwähnt, weil dies aus strikter Themensicht eines Anfängers für längere Zeit nicht ins Spiel kommen sollte.
Ein Interface ist eine benannte Sammlung von Designs, mit denen Sie das Erscheinungsbild Ihres Shops definieren können.
Wie andere leistungsstarke Software verfügt Magento über eine komplexe Dateistruktur. Sie können Ihren Fokus jedoch für das Theming erheblich einschränken.
Hier sind die Orte, an denen Sie arbeiten, wenn Sie ein Thema erstellen:
Magento erfordert, dass Ihre ausführbaren PHP-Inhalte getrennt von Ihren statischen Assets platziert werden. Aus diesem Grund haben Sie ein separates Skin-Verzeichnis in Ihrem Stammverzeichnis. Dies mag auf den ersten Blick kontraproduktiv wirken, doch wenn Sie Ihren Workflow leicht angepasst haben, werden Sie feststellen, dass dieser Schritt die allgemeine Sicherheit Ihrer Installation erhöht.
Dennoch ist ein Thema normalerweise in die folgenden Teile unterteilt.
Und wir sind fertig! Wir haben uns die grundlegenden Konzepte von Magento und das Management von Themen angesehen. Hoffentlich war das für Sie nützlich und Sie fanden es interessant. Da dies für viele Leser ein ziemlich neues Thema ist, werde ich den Kommentarbereich genau beobachten, wenn Sie Zweifel haben.
Fragen? Schöne Dinge zu sagen? Kritikpunkte Schlagen Sie den Kommentarbereich an und hinterlassen Sie einen Kommentar. Glückliche Kodierung!
Bisher haben wir uns streng theoretisch mit der Plattform befasst. Eine Notwendigkeit, die Größe und den Umfang von Magento zu berücksichtigen. Aber jetzt, da wir alle Grundlagen auf den Punkt gebracht haben, können wir mit dem Spaß fortfahren.
Denken Sie daran, wie Sie beim Erstellen einer Skin für ein CMS / generisches System immer mit einem Skelett beginnen und nach außen bauen? Wie Kubrick für WordPress? Wenn Sie dachten, wir würden eines nehmen und ein Thema daraus erstellen, dachten Sie falsch. Nein Sir. Wir werden eine benutzerdefinierte, nackte Knochenhaut erstellen, die der Blank-Skin gänzlich von Grund auf ähnlich ist. Eine Haut, die Sie als Basis für Ihre eigene Haut verwenden können.
All dies und mehr in den kommenden Teilen. Bleib dran!
Wussten Sie, dass Ihre freundliche Nachbarschaft ThemeForest Magento-Themen in Premiumqualität verkauft? Egal, ob Sie ein erfahrener Magento-Entwickler sind, der von Ihren Bemühungen profitieren möchte, oder ein Käufer, der hofft, Ihren ersten E-Commerce-Shop aufzubauen, wir haben für Sie gesorgt!
Accentsconagua