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 vierten Teil legen wir die Grundlagen für unser Thema, das wir komplett neu aufbauen werden. Aufgeregt? Lass uns anfangen!
In den letzten Abschnitten haben wir gelernt, 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.
Wir haben uns auch die Grundlagen des Magento-Themings angesehen. Wir haben die allgemeine Idee hinter Magento-Themen, die verschiedenen Terminologien und die Grundstruktur eines Themas kennengelernt.
Unser Ziel für das Erstellen dieses Themas ist ziemlich einfach: praktisch zu verstehen, wie man ein Magento-Thema erstellt. In diesem Sinne werde ich das Thema so einfach wie möglich halten.
Da der Magento-Codierungsprozess für jemanden, der an WordPress gewöhnt ist, ziemlich kompliziert ist, werden wir es sehr langsam angehen. Heute bauen wir nur den Kern unseres Themas, das Skelett, das in jeder Ansicht der Website verwendet wird. Ich erkläre auch das allgemeine Prinzip des Prozesses, damit wir in den einzelnen Teilen zu jeder einzelnen Sichtweise weitergehen können.
Die Quelldateien, sowohl das Front-End als auch das Back-End, sind enthalten, sollten jedoch noch nicht verwendet werden. Wir definieren nur die Kernkomponenten, ohne zu definieren, welcher Inhalt angezeigt werden soll, wie er angezeigt werden soll und woher der Inhalt abgerufen werden soll. Wenn Sie also jetzt versuchen, dies zu verwenden, werden Sie eine Reihe von Kauderwelsch sehen, da Magento alle fehlenden Dateien aus dem Standarddesign zieht und so unseren Look komplett ruiniert. Also mein Rat ist, warten Sie ein bisschen.
Die grundlegende Vorlage sieht so aus. Wir haben ein generisches Logo und ein einfaches Menü, über das der Benutzer auf sein Konto, seine Wunschliste und seinen Einkaufswagen zugreifen und ihn zur Kasse oder zum Abmelden lässt.
Darunter befindet sich eine Hilfsleiste, die eine Navigationsnavigation enthält, um den Benutzer über die Kontexthierarchie der Site zu informieren. Wir lassen den Benutzer auch durch die Sucheingabe rechts durch unseren Shop suchen.
Der Inhaltsbereich ist derzeit leer, da der Inhalt davon abhängt, welche Ansicht Magento lädt. Wir bleiben also vorerst leer und behandeln es später, wenn wir jede einzelne Seite erstellen.
Die Fußzeile ist ziemlich allgemein mit einem Link zum Melden von Fehlern und Copyright-Informationen.
Wir werden uns zunächst das HTML-Skelett des Themas ansehen. Ich gehe davon aus, dass Sie mit HTML und CSS ziemlich fließend umgehen, also werde ich zu den wichtigeren Bereichen springen.
Cirrus - Magento Theme Willkommen, Sid
- Mein Konto
- Meine Wunschliste
- Mein Warenkorb
- Auschecken
- Ausloggen
Zuhause "State of FearInhalt hier
Helfen Sie uns, Magento funktionsfähig zu halten - Melden Sie alle Fehler (Version 1.4.0.1) © 2008 Magento Demo Store. Alle Rechte vorbehalten.
Beachten Sie zunächst, dass ich alles unter einem Wrapper-Div verpackt habe, um die Verwaltung zu erleichtern. Beachten Sie auch, dass die Kopfzeile, der Inhalt und der Fußzeilenabschnitt ihre einzelnen Blöcke erhalten.
Die Sucheingabe ist an diesem Punkt ziemlich nutzlos. Wir werden es richtig anschließen, wenn wir uns mit Magento integrieren. Gleiches gilt für die verschiedenen Links. Derzeit habe ich sie als Platzhalter dort platziert. Sobald wir uns mit Magento befasst haben, werden wir sie zum Laufen bringen.
* Marge: 0; Polsterung: 0; Grenze: keine; Umriss: keine; Farbe: # 333; Schriftfamilie: "Lucida Sans Unicode", "Lucida Grande", serifenlos; Schriftgröße: 14px; Listenstil: keine; Zeilenhöhe: 1.3em; a color: # 7db000; h1, h2, h3, h4 font-weight: normal; h1 font-size: 32px; Rand unten: 10px; h2 font-size: 24px; Marge: 10px 0 12px 0; h3 font-size: 20px; Rand unten: 5px; h4 font-size: 20px; .border border: 1px fest # 666; / * Basiselemente * / #wrapper width: 920px; Marge: 10px auto; Polsterung: 20px; #header margin: 0 0 20px 0; Überlauf: Auto; #content margin: 20px 0; Überlauf: Auto; #footer padding: 10px; Rand: 1px fest # E1E1E1; Hintergrund: # F3F3F3; Text ausrichten: Mitte; / * Header-Inhalt * / #logo float: left; #hud float: right; Breite: 320px; Höhe: 50px; Polsterung: 10px; Rand: 1px fest # E1E1E1; Hintergrund: # F3F3F3; #hud li a float: left; Schriftgröße: 12px; Marge: 0 10px 0 0; #utilities clear: both; Marge: 20px 0; Überlauf: Auto; Polsterung: 7px 10px; Rand: 1px fest # E1E1E1; Hintergrund: # F3F3F3; #breadcrumbs float: left; # header-search float: right;
Nichts Besonderes hier. Sehr einfaches CSS, um die Elemente in Position zu bringen und nur ein kleines bisschen zu stylen. Lass uns weitermachen.
Dieser Teil ist etwas schwierig, also bleib bei mir hier. Magento verwendet XML-Dateien, um das Layout einer Seite zu verwalten und um zu definieren, welche Elemente zum Rendern verfügbar sind. Das Ziel ist, dass Sie, anstatt sich mit geheimnisvollem Code herumzudrehen, die XML-Datei einfach bearbeiten und damit fertig sein können, ohne sich um Abhängigkeiten zu kümmern.
Jedes Ansicht / Bildschirm / Modul erhält eine eigene XML-Datei zusammen mit einer Master-Datei, um das allgemeine Layout der Site zu definieren. Diese Master-Datei ist die page.xml Datei, die wir jetzt erstellen werden.
Die komplette Datei für heute sieht so aus. Ich werde jedes Stück für Stück unten erklären.
css / cirrus.css
Ignorieren Sie die ursprünglichen XML- und Layoutversionsdeklarationen. Sie sind jetzt für uns ohne Bedeutung.
Zunächst erstellen wir einen Masterblock für alle Daten. Betrachten Sie dies als Entsprechung des Wrapper-DIV-Elements, das wir in unserem HTML-Code verwendet haben. Als Nächstes weisen wir es an, es zu verwenden page / 1column.phtml als Vorlage für unsere Seite. Keine Sorge, wir haben die Datei noch nicht erstellt. Wir werden dies später in diesem Tutorial tun.
css / cirrus.css
Als Nächstes definieren wir die Elemente, die in die aufgenommen werden sollen Kopf Abschnitt der Seite. Magento enthält standardmäßig eine Menge CSS- und JS-Dateien, aber wir benötigen heute keine Funktionalität. Also fügen wir einfach unsere CSS-Datei ein.
Wir definieren, was in der Kopfzeile unserer Website enthalten ist. Wir möchten das Menü / die Links oben sowie die Breadcrumbs und die Suche.
Natürlich benötigen wir den Inhaltsteil, also schließen wir den Inhaltsteil ein. Wir definieren hier nichts über diesen Abschnitt, da Magento alle notwendigen Inhalte in diesen Block lädt.
Und schließlich haben wir unsere Fußzeile hinzugefügt. Wir teilen Magento auch mit, wohin die Vorlage geladen werden soll.
Sie fragen sich wahrscheinlich, warum wir für einige Blöcke einen Vorlagenpfad angeben und ihn für andere auslassen. Es ist ein etwas übergeordnetes Thema, aber haben Sie festgestellt, dass jeder Block ein Art Attribut? Wenn der Typ mit einem der von Magento vordefinierten übereinstimmt, müssen Sie keine Vorlage angeben. Es wird automatisch geladen. Schick, nein?
Und damit unsere Basis page.xml Datei ist vollständig.
Ok, jetzt, da wir unser Layout festgelegt haben, können wir mit der Erstellung des Systems fortfahren 1 column.phtml Datei, die wir zuvor in der XML-Datei angegeben haben.
Diese Datei ist nichts weiter als eine Skelett-Vorlage, die bei Bedarf Kopf-, Inhalts- und Fußzeilen aufruft. Unsere Datei sieht so aus:
Accentsconagua
getChildHtml ('head')?> getChildHtml ('header')?> getChildHtml ('content')?> getChildHtml ('footer')?> Dies ist so ziemlich unsere ursprüngliche HTML-Datei, außer dass wir die getChildHtml Methode, um den Inhalt jedes Blocks zu erfassen. Die Vorlage muss ziemlich seitenunabhängig sein, da sie die Masterseite ist, von der jede Seite gerendert wird.
Nun kommt der etwas schwierige Teil: Unsere Kern-HTML-Blöcke werden nach Funktionalität aufgeschlüsselt, die erforderlichen Vorlagendateien für jede Funktionalität erstellt und dann gefüllt.
Wir werden jeden in der Reihenfolge des Auftretens angehen
getChildHtml ('head') Karten direkt an page / html / head.phtml. Unsere Datei sieht so aus:
<?php echo $this->getTitle ()?> getCssJsHtml ()?> getChildHtml ()?> getIncludes ()?>
Sie werden sehen, dass wir die Titel dynamisch von Magento erstellen lassen. Abgesehen davon das getCssJsHtml Methode aufgerufen wird. Diese Methode importiert alle CSS- und JS-Dateien, die wir in angegeben haben page.xml Datei.
getChildHtml ('header') Karten direkt an page / html / header.phtml. Unsere Datei sieht so aus:
getUrl (")?>" title = "getLogoAlt ()?> ">Herzlich willkommen
getChildHtml ('topLinks')?>getChildHtml ('Breadcrumbs')?> getChildHtml ('topSearch')?>
Wir verwenden die API von Magento, um das Logo zuerst zu erwerben. Zur weiteren Modularisierung erhalten wir den HTML-Code für die Breadcrumbs, Links und die Suchfunktion.
Beachten Sie, dass der Name rein semantisch ist. Wie Sie sehen, sind Sie nicht auf die Kopfzeile im reinsten, strengen technischen Sinne beschränkt. Sie können bei Bedarf auch andere Elemente anheften.
getChildHtml ('footer') Karten direkt an page / html / footer.phtml wie in der XML-Datei angegeben. Unsere Datei sieht so aus:
__ ("Helfen Sie uns, Magento gesund zu halten")?> - __ ("Alle Fehler melden")?> __ ('(ver.% s)', Mage :: getVersion ())?> getCopyright ()?>
Mit der Fußzeile können Sie alle Informationen hinzufügen, die Sie für passend halten. Ich habe nur den Standardinhalt eingefügt, da mir nichts Schlaues einfällt.
Wenn die Kernelemente fertig sind, können wir zu den kleineren Funktionsblöcken übergehen, die jetzt im Kopfzeilenabschnitt angegeben werden, d. H. Die Breadcrumbs, Links und die Suchfunktion.
getChildHtml ('topLinks') Karten direkt an page / html / template / links.phtml. Unsere Datei sieht so aus:
?> )
