Share
In diesem Artikel werden die Grundlagen der Magento-Vorlagendateien behandelt. Wir werden ihre Einführung durchgehen und einige grundlegende Änderungen vornehmen.
Dazu gehören das Anzeigen von vorgestellten Produkten auf der Startseite und das Laden von JavaScript in der Fußzeile.
Im Anschluss an unseren vorherigen Artikel haben wir gesehen, dass die Layoutdateien jeden Block in einem Design steuern und entscheiden, was angezeigt wird und nicht angezeigt wird. Was in diesem Block gerendert wird, ist der Ort, an dem die Vorlagendateien zum Einsatz kommen.
In diesem Artikel konzentrieren wir uns auf die folgenden Verzeichnisse:
Accentsconagua
App / Design / Frontend ///Vorlage/ App / Design / Frontend /// locale / Wenn Sie gerade bei uns sind, schauen Sie sich bitte die vorherigen Artikel dieser Serie an.
Als Referenz haben wir behandelt:
Ohne weiteres zu tun, lass uns anfangen.
Magento-Vorlagendateien sind PHTML-Dateien, die aus einer Mischung aus HTML und PHP bestehen, von denen einige eine Seite wie rendern 1 column.phtml während andere bestimmte Blöcke innerhalb einer Seite wie z header.phtml.
Während der Entwicklung einer Website sind dies die Dateien, mit denen wir hauptsächlich arbeiten werden, also für Front-End-Entwickler. Sobald das XML vorhanden ist und eine Vorlage aufgerufen wird, wird erwartet, dass die Datei analysiert und entsprechend angezeigt wird.
Es gibt Hunderte von Vorlagendateien. Wenn Sie wissen, welche der Dateien in der Hierarchie bearbeitet und anschließend nachverfolgt werden muss, kann dies beim ersten Start schwierig sein.
Alles ist gut, es gibt ein paar nette Admin-Bereichseinstellungen, die uns helfen können, sie werden uns Stunden von Kopfschmerzen ersparen!
Es ist wichtig zu beachten, dass wir die folgenden Einstellungen nur im Bereich "Website" oder "Store View" verwenden können. Die Einstellungen sind für den Bereich "Standardkonfiguration" nicht verfügbar. Daher müssen Sie den Bereich nach der Anmeldung ändern Dies ist jedoch nützlich, da wir die Einstellungen nur für eine bestimmte Website oder Store-Ansicht und nicht global umschalten können.
Diese erkennen schnell, welche Dateien für eine bestimmte Seite geladen werden, indem sie uns den Pfad zur Datei anzeigen. Das Ein- und Ausschalten ist eine schnelle Einstellungsänderung im Admin-Bereich.
Gehe rüber zu System> Konfiguration. Blättern Sie dann im linken Menü ganz nach unten und klicken Sie unter "Erweitert" auf "Entwickler". Nachdem wir den Bereich in "Main Website" geändert haben, steht uns die Einstellung unter "Debug" zur Verfügung..
Es scheint, dass nichts passiert ist, wenn Sie auf config speichern geklickt haben. Wenn Sie jedoch zum Front-End der Website gehen, z. B. zur Startseite, und die Seite aktualisieren, werden die Hinweise angezeigt.
Damit wissen wir jetzt, wo sich die Dateien befinden. Wenn Änderungen erforderlich sind, kopieren Sie die Datei einfach von der Basis zu unserem Design und ändern Sie sie nach Bedarf.
Wir können "Add Block Name to Hints" auch auf "Yes" setzen, wenn wir weitere Informationen wünschen. Diese Informationen werden im Allgemeinen für die Back-End-Entwicklung verwendet, sodass ich mich nicht zu sehr um diese Einstellung kümmern muss.
Nun zum Code. Ich werde ein paar Modifikationen durchlaufen, die oft in der Themenentwicklung verwendet werden, aber auch hier werde ich nur die Oberfläche berühren, die möglich ist.
Lass uns anfangen…
Dieser Punkt muss die häufigste Anfrage auf einer Website sein. Jeder möchte eine Handvoll Produkte auf der Landing Page seiner Website vorzeigen?
Es ist tatsächlich viel einfacher als Sie denken, mit einer Kombination aus XML und PHP können wir dies in kürzester Zeit erreichen. Wie bei vielen Dingen in Magento gibt es mehr als einen Weg, dies zu tun. Ich werde Ihnen zeigen, was ich für die einfachste Methode halte.
Zuerst müssen wir unsere Kategorie im Admin-Bereich erstellen, in der unsere Produkte gespeichert werden. Einmal eingeloggt, vorbei an Katalog> Kategorien verwalten. In diesem Beispiel erstellen wir eine Unterkategorie unter root. Daher müssen wir auf "Stammkatalog" und dann auf die Schaltfläche "Unterkategorie hinzufügen" klicken. Geben Sie einen Titel für die Kategorie ein, stellen Sie sicher, dass "Ist aktiv" auf "Ja" gesetzt ist, und klicken Sie dann auf "Kategorie speichern"..
Notieren Sie sich die ID-Nummer der Kategorie oben, da wir diese später benötigen werden:
Dies ist ein guter Zeitpunkt, um der gerade erstellten Kategorie auch einige Produkte hinzuzufügen. Klicken Sie dazu auf die Registerkarte "Kategorie-Produkte" und wählen Sie die Produkte aus, die Sie anzeigen möchten. Vergessen Sie nicht, auf "Kategorie speichern" zu klicken, wenn Sie fertig sind.
Als nächstes müssen wir unsere Vorlage wo erstellen für jeden Schleife wird ausgeführt.
Wir stützen uns dabei auf die Produktlistenvorlage, die den gesamten erforderlichen Code für uns enthält. Wir müssen nur ein paar Anpassungen vornehmen, um unsere Anforderungen zu erfüllen.
app / design / frontend / base / default / catalog / product / list.phtml
Kopieren nach:
App / Design / Frontend /
Wir werden dann einige Änderungen an unserer Datei vornehmen.
Die fertige Datei sieht wie folgt aus:
load ($ _ categoryId); $ _productCollection = $ _category-> getProductCollection (); $ _productCollection-> addAttributeToSelect ('*'); ?> getName (); ?>
count ()):?> __ ('Es gibt keine Produkte, die der Auswahl entsprechen.)?>
- getProductUrl ()?> "title ="stripTags ($ this-> getImageLabel ($ _ product, 'small_image'), null, true)?> ">
 -> init ($ _ product, 'small_image') -> resize (135); ?> )
getProductUrl ()?> "title ="stripTags ($ _ product-> getName (), null, true)?> "> getName (); ?>
getRatingSummary ()):?> getReviewsSummaryHtml ($ _ product, 'short')?> getPriceHtml ($ _ product, true)?> isSaleable ()):?> __ ("Nicht vorrätig")?>
Helfer ('Wunschliste') -> isAllow ()):?> - helper ('wishlist') -> getAddUrl ($ _ product)?> ">__ ('Add to Wishlist')?>
getAddToCompareUrl ($ _ product)):?> - | ">__ ('Zum Vergleich hinzufügen')?>
Vergessen Sie nicht, den Wert von zu ändern $ _categoryId Variable zu Ihrer Kategorie-ID.
Als letztes müssen wir nur einen XML-Block erstellen, der in die oben erstellte Vorlage geladen wird. Wir werden das in unserem tun local.xml Datei wie folgt:
Das ist alles, was es gibt, ziemlich geradeaus, richtig? Unten ist ein Screenshot des fertigen Produkts.
Zunächst einmal denken wir, dass Magento diese Fähigkeit bereits in XML integriert hat, wenn wir unsere Skripte hinzufügen, eine Art Parameter, die wir übergeben könnten, aber wir wären falsch - Magento macht es uns nicht so einfach!
WordPress hingegen erledigt dies perfekt über die wp_register_script. Möglicherweise greift ein Back-End-Entwickler dies auf und fügt die Möglichkeit hinzu, einen zusätzlichen XML-Parameter zu übergeben. Jetzt gibt es ein Nebenprojekt, an dem sich jemand beteiligen kann.
Irgendwelche Abnehmer?
Zum Glück gibt es jetzt eine alternative Methode, um dies zum Laufen zu bringen.
Ich denke, es ist wichtig, dieses Thema zu behandeln, da es die Geschwindigkeit unserer Website verbessern wird, die jeder möchte. Ich neige dazu, Magento-Kern-JavaScript-Dateien so zu belassen, wie sie im , Ich kann sie minieren, aber abgesehen davon bleiben sie so wie sie sind.
Alles, was wir zu Magento hinzufügen, wie zum Beispiel jQuery und unsere eigenen benutzerdefinierten Funktionen, schadet dem Laden nicht. Wenn ich eine Website entwickle, neige ich dazu, die Website im Auge zu behalten Wenn ein Drittanbieter-Modul installiert wird, fügt es normalerweise etwas hinzu. Mit etwas Arbeit können wir das XML-Modul des Drittanbieters bearbeiten und in die Fußzeile laden - die zusätzlichen fünf Minuten sind es wert!
Zuerst müssen wir einen XML-Block in unserem erstellen local.xml Datei innerhalb des Standardlayouts wie folgt:
skin_js js / build / jquery.min.js
Beachten Sie, dass wir dieselbe Methode zum Hinzufügen von JavaScript-Dateien verwenden wie im vorherigen Artikel. Wenn Sie eine Auffrischung benötigen, klicken Sie hier. Zu Demonstrationszwecken fügen wir eine lokale Kopie von jQuery hinzu.
Jetzt können wir unsere Vorlagendatei erstellen. Erstellen Sie eine neue Datei in:
App / Design / Frontend /
mit folgendem Inhalt:
getCssJsHtml ()?>
Als letztes müssen wir kurz vor dem Schließen eine einzige Codezeile in unsere Vorlagendateien einfügen Etikett.
Unsere Vorlagendateien finden Sie unter App / Design / Frontend / Basis / Standard / Seite / nicht zu vergessen, sie auf unser eigenes Thema zu kopieren. Es gibt mehrere Vorlagendateien, die ich unten zusammengestellt habe:
 -> init ($ _ product, 'small_image') -> resize (135); ?> )
1 column.phtml2columns-left.phtml2columns-right.phtml3columns.phtmlUnten ist ein Beispiel, wie es aussehen sollte:
… getAbsoluteFooter ()?> getChildHtml ('footer.js')?>