Share
Was Sie erstellen werdenIn dieser Tutorialserie entwickeln wir ein Magento-Thema von Grund auf. Da Magento ein enormes E-Commerce-CMS mit unzähligen Anpassungsoptionen ist, werden Magento-Themen normalerweise als sehr komplex in der Entwicklung betrachtet. Wenn Sie sich jedoch dieser Reihe anschließen, werden Sie mit der Magento-Terminologie und deren Entwicklung vertraut sein . Ich werde versuchen, alles im weiteren Verlauf zu erklären, indem wir jeden Bestandteil der Seite Schritt für Schritt entwickeln.
Der erste Schritt zu jeder Magento-Entwicklung besteht darin, eine Kopie von Magento auf Ihrem lokalen Server zu installieren. Sie können auch eine Kopie von Magento auf Ihrem Webserver installieren, dies verringert jedoch nur Ihre Entwicklungsgeschwindigkeit. Daher empfehle ich immer, einen lokalen Server für die Entwicklung zu verwenden. Wenn Sie die Entwicklung abgeschlossen und das Endprodukt gründlich getestet haben, sollten Sie es nur dann auf Ihren Server hochladen.
Ich werde das Rad nicht neu erfinden, indem ich erkläre, wie Sie Magento auf Ihrem lokalen Server installieren sollten. Dafür gibt es im Internet viele gute Artikel. Auf unserer Website finden Sie auch Artikel zur Installation von Magento, wie diesen Artikel von Tuts +, der Sie durch die Installation von Magento auf Ihrem lokalen Server führt.
Bei der Installation von Magento müssen Sie auch die Beispieldaten von Magento installieren. Diese Beispieldaten fügen viele Kataloge, Produkte, Testberichte usw. hinzu. Dadurch können wir verschiedene Szenarien während der Entwicklung testen.
Wenn Sie mit der Installation von Magento fertig sind, müssen Sie als Nächstes die Tools für die Entwicklung vorbereiten. Sie können hier den Code-Editor oder die IDE Ihrer Wahl verwenden. Jeder Code-Editor, mit dem Sie sich auskennen, funktioniert hier gut. Wenn Sie noch keinen Code-Editor verwendet haben, würde ich empfehlen, Notepad ++ zu installieren, da es ein sehr leichter, benutzerfreundlicher und kostenloser Code-Editor ist.
Wir benötigen auch einen Elementinspektor, um CSS-Stile auf den Webseiten zu prüfen und zu bearbeiten. Wenn Sie Firefox verwenden, können Sie die Firebug-Erweiterung dafür installieren. Wenn Sie jedoch Chrome verwenden, funktioniert der Chrome Web Inspector hervorragend. Es wird mit Chrome geliefert, sodass Sie dafür keine Erweiterungen installieren müssen. Im Rahmen dieser Serie benutze ich Chrome Web Inspector, um CSS-Stile zu debuggen und zu bearbeiten.
Ich habe HTML für diese Serie entwickelt. Der HTML-Code enthält die Entwurfsmuster und -elemente, die hauptsächlich in eCommerce-Themen verwendet werden, z. B. Top-Cart, Header-Schieberegler, Währungs- und Sprachauswahl. Wir konvertieren diesen HTML-Code schrittweise in ein funktionierendes Magento-Design. Das HTML-Designpaket ist hier zum Download für Sie angefügt.
Bevor wir in die eigentliche Entwicklungsphase eintauchen, würde ich dringend empfehlen, dass Sie diese Tuts + Artikelserie über die Entwicklung von Magento-Themen durchgehen. Diese dreistufige Serie macht Sie mit der Theorie des Magento-Themens und seinen Grundprinzipien vertraut. Dieses Wissen über die Entwicklung des Magento-Themas wird besonders nützlich sein, bevor Sie sich mit der eigentlichen Themencodierung schmutzig machen.
Nachdem Sie nun eine funktionierende Magento-Installation und Tools für die Entwicklung vorbereitet haben und die Grundlagen der Themenentwicklung anhand der oben empfohlenen Serie durchgearbeitet haben, möchte ich Sie kurz mit den Ordnern vertraut machen, in denen die Dateien bearbeitet werden.
Wenn Sie Ihren Magento-Stammordner öffnen, wird darunter eine Liste mit Ordnern angezeigt. Von diesen Ordnern sind die Ordner, in denen wir Dateien bearbeiten, nur die App Ordner und die Haut Mappe.
Gelegentlich wird auch der Ordner "js" verwendet, um JavaScript-Bibliotheksdateien wie "jQuery" zu platzieren, sofern diese noch nicht vorhanden sind. Machen Sie sich mit den Ordnern in den App- und Skin-Ordnern vertraut, bevor Sie mit den Schritten in den nächsten Artikeln dieser Serie beginnen.
Wir müssen einige Einstellungen in Magento ändern, was uns helfen wird, unser Magento-Thema schneller zu entwickeln und uns mitzuteilen, wenn in Magento etwas schief geht.
Zunächst deaktivieren wir den Magento Cache. Dafür gehen Sie zu System> Cache-Verwaltung, und wählen Sie alle Arten von Caches aus. Wählen Sie aus den Aktionen Deaktivieren, und einreichen.
Nachdem wir alle Caches deaktiviert haben, besteht der nächste Schritt darin, die Daten neu zu indexieren. Dafür gehen Sie zu System> Indexverwaltung. Wählen Sie alle Indizes aus und wählen Sie aus den Aktionen aus Daten neu indexieren, und einreichen.
Jetzt aktivieren wir Protokolle und blockieren Hinweise in Magento. Gehe zu System> Konfigurationen, und in der linken Seitenleiste wird das letzte Element angezeigt Entwickler. Klicken Sie darauf. Auf der nächsten Seite von Protokolleinstellungen, Aktivieren Sie Protokolle und klicken Sie auf Konfiguration speichern Taste oben rechts.
Als Nächstes sehen Sie oben in der linken Seitenleiste das Symbol Aktueller Konfigurationsbereich Bar auswählen. Wählen Hauptwebsite von dort.
Nun aus dem Debuggen Abschnitt aktivieren Vorlagenpfad-Hinweise, und drücken Sie die Konfiguration speichern Taste erneut.
Wechseln Sie zuletzt in das Magento-Stammverzeichnis, und öffnen Sie die Datei index.php von dort aus. Kommentieren Sie in Zeile 77 diese Codezeile:
Accentsconagua
ini_set ('display_errors', 1);Das war es fürs Erste. Sie wissen es vielleicht nicht, aber wir haben in den nächsten Tutorials dieser Serie eine solide Grundlage für die eigentliche Themenentwicklung aufgebaut. Zum Schluss möchte ich Sie noch einmal dazu ermutigen, die von mir empfohlene Magento Theme Development-Serie genau durchzugehen, falls Sie dies nicht bereits getan haben.
Im nächsten Tutorial erstellen wir die Ordnerstruktur unseres neuen Themas. Wir kopieren die CSS-, JS- und Bilddateien aus HTML in unser Theme und erstellen die local.xml-Datei unseres Themas, um sicherzustellen, dass unser Theme mit diesen Dateien verknüpft ist.
Das ist es und ich hoffe, dass Sie in den nächsten Tutorials mit uns folgen werden.
