Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Magento
Code

Magento Theme-Entwicklung: Kategorieseite, Teil 1

by
Length:LongLanguages:
This post is part of a series called Magento Theme Development.
Magento Theme Development: Home Page Styling
Magento Theme Development: Category Page, Part 2

German (Deutsch) translation by Wei Zhang (you can also view the original English article)

Herzlichen Glückwunsch, dass Sie die Startseite Ihres neuen Themes abgeschlossen haben und mit der nächsten Seite beginnen. In diesem Tutorial beginnen wir mit dem Ändern der Kategorieseite unseres Magento-Designs.

Die Kategorieseite besteht im Wesentlichen aus vier Bereichen: Werkzeugleiste, Rastermodus, Listenmodus und Seitenleiste. Wir werden uns mit den ersten drei Abschnitten dieses Artikels beschäftigen, und im nächsten Tutorial werden wir die Seitenleiste ändern und einige CSS-Korrekturen vornehmen.

Wenn Sie sich eine Kategorieseite unseres Themas ansehen, sieht es derzeit ungefähr so aus:

Category Page before editing

Während wir es so aussehen lassen wollen:

HTML design Category Page

Wenn Sie feststellen, hat unsere aktuelle Kategorieseite links und rechts große Leerzeichen. Wir müssen herausfinden, warum der Inhaltsbereich nicht genügend Platz beansprucht. Schauen wir uns zuerst an, welche Vorlage für das Rendern dieser Seite verantwortlich ist. Wir können dies tun, indem Sie im Admin-Panel Vorlagenhinweise aktivieren, wie Sie es in dieser Serie bereits mehrfach getan haben.

Hier haben wir herausgefunden, dass diese Seite ein dreispaltiges Layout hat. Aus diesem Grund gibt es auf der linken Seite leeren Platz, da der linken Seitenleiste keine Blöcke zugewiesen sind.

Template Hints for Category Page

Damit diese Seite wie unser HTML-Design aussieht, ändern wir sie in zwei Spalten. Gehen Sie im Admin-Bereich zu Catalog > Manage Categories > Custom Design > Page Layout und ändern Sie es in 2 columns with left bar.

Changing Page Layout

Jetzt sollte unsere Seite ein zweispaltiges Layout mit einer Seitenleiste auf der linken Seite haben, so wie es die Anforderung an unser Design war.

Da in diesem Artikel nur der rechte Bereich (nicht die Seitenleiste) geändert wird, beginnen wir den Bearbeitungsprozess über die Symbolleiste. Mit Vorlagenhinweisen prüfen wir die für die Wiedergabe verantwortlichen PHP-Dateien, indem wir die Vorlagenhinweise erneut aktivieren.

Wie wir herausgefunden haben, ist diese Datei:  \template\catalog/product/list/toolbar.phtml.

Wir kopieren das in unser neues Design, vergleichen es mit dem Code unserer HTML-Datei und beginnen dann mit Änderungen. Unser aktueller Code der Datei toolbar.phtml sieht folgendermaßen aus:

Wir müssen es mit dem HTML-Code vergleichen, der für den Teil der Symbolleiste verantwortlich ist. Dies ist der folgende:

Wir werden diesen Code ändern, indem wir die dynamischen Tags und verschiedene for- und if -Anweisungen einfügen. Um beispielsweise die Links für Raster- und Listenmodi für den Ansichtsmodus zu rendern, fügen wir folgenden Code hinzu:

Im Wesentlichen führt dieser Code eine Iteration über alle aktiven Modi (Liste und Raster) durch und listet dann für jeden dieser Modi einen Anker-Tag auf. Sehr geschickt haben wir ihnen verschiedene Klassen und Titel zugewiesen, wobei die $_label -Variable verwendet wurde, die für jeden Modus unterschiedlich ist.

Auf ähnliche Weise können Sie die sort-by- und limiter -Parts selbst ändern, indem Sie sie mit der tatsächlichen toolbar.phtml-Datei vergleichen. Nach den Änderungen sieht der endgültige Code für diese Datei etwa so aus:

Und wenn wir die Seite jetzt aktualisieren, sieht das ungefähr so aus. Alles ist an Ort und Stelle, aber das CSS ist völlig deaktiviert, was wir im nächsten Artikel korrigieren werden.

Toolbar after editing

Nun ist es Zeit, die auf dieser Seite angezeigten Produkte zu ändern. Produkte hier können auf zwei verschiedene Arten angezeigt werden, d. H. Listenmodus und Gittermodus. Wenn wir Vorlagenhinweise aktivieren, um die für diesen Teil verantwortliche Datei herauszufinden, werden wir sehen, dass der Code sowohl für den Raster- als auch den Listenmodus in dieselbe Datei geschrieben wird, nämlich  frontend\rwd\default\template\catalog/product/list.phtml.

Der Listencode in dieser Datei befindet sich in den Zeilen 44 bis 116.

Wir müssen es jetzt mit dem HTML-Listencode in productlist.html in unserer HTML-Vorlage vergleichen.

Das Ändern dieses Codes ist ziemlich einfach. Wir verwenden diese Initialisierungszeilen:

Dann platzieren wir eine for-Schleife um das li-Tag:

Schließlich ersetzen wir den Produktnamen, den Preis, die Beschreibung, den Link zu der Bilddatei und die URL durch die dynamischen Tags. Der endgültige Code sieht folgendermaßen aus:

Wenn wir nun die Seite aktualisieren, wird die Kategorieseite im Listenmodus in etwa so aussehen. Ich weiß, es ist nicht so, wie wir wollen, dass es so aussieht, aber unser HTML-Code ist bereits vorhanden. Jetzt müssen wir nur noch das CSS ändern, was wir im nächsten Tutorial tun werden.

List Mode after editing

Jetzt im Rastermodus, der Code dafür ist 118 bis 176 in derselben list.phtml-Datei.

Der HTML-Code sieht in der Datei productgrid.html in unserer HTML-Vorlage folgendermaßen aus:

Das Ändern dieses Teils ähnelt dem, was wir im Listenteil gemacht haben. Zunächst werden einige Initialisierungen vorgenommen, wie in der Standarddatei list.phtml.

Als Nächstes packen wir jedes li-Element in eine for-Schleife, um alle Produkte zu durchlaufen.

Zuletzt ersetzen wir die Produktattribute wie Produktname, Preis, Beschreibung usw. durch relevante dynamische Tags. Sie finden sie ganz bequem in der aktuellen list.phtml-Datei.

Der endgültige Code sieht folgendermaßen aus:

Wenn Sie nun die Seite aktualisieren, sieht der Rastermodus folgendermaßen aus:

Grid Mode after editing

In diesem Artikel haben wir die Symbolleiste, die Liste und die Rasterabschnitte dieser Seite geändert. Im nächsten Artikel ändern wir die Seitenleiste und nehmen einige Korrekturen im CSS-Stil vor. Am Ende des nächsten Artikels wird unsere Kategorieseite dem HTML-Design sehr ähnlich aussehen.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.