7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. PHP

Magento für Designer: Teil 5

Read Time: 10 mins
This post is part of a series called Magento for Designers.
Magento for Designers: Part 4
Magento for Designers: Part 6

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

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, um es zu unserem eigenen zu machen.

In diesem fünften Teil erstellen wir eine der Hauptansichten unseres Geschäfts - die Produktinformationsseite. Sind Sie aufgeregt? Lassen Sie uns anfangen!


Die komplette Serie


Eine kurze Zusammenfassung

Im letzten Teil haben wir den Rahmen für das Thema festgelegt, indem wir die sich wiederholenden Teile des Themas erstellt und im Wesentlichen das allgemeine Layout des Themas definiert haben.

Wir haben auch einen praktischen Blick darauf geworfen, wie Themen in Magento funktionieren, indem wir durchgearbeitet haben, wie das Layout aufgebaut ist, wie die Blöcke funktionieren und wie die verschiedenen Teile des Puzzles zusammenpassen.


Was bauen wir heute?

Heute erstellen wir die individuelle Produktansichtseite. Wie zuvor sind die Quelldateien, sowohl das Front-End als auch das Back-End, enthalten. Sie können es verwenden, um zu sehen, wie die Seite aussieht, aber ansonsten sollte das Thema kaputt aussehen, da wir den Rest der Ansichten noch nicht berührt haben. Versuchen Sie also, bis wir den Rest gebaut haben, nicht aus unserem Sandkasten herauszukommen.


Ziele für die Seite

Unser Ziel für diese spezielle Seite ist relativ einfach. Wir wollen eine No-Nonsense-Seite, die nur das Wesentliche tut. Daher habe ich eine kurze Liste von Elementen erstellt, die meiner Meinung nach benötigt werden:

  • Der Produkttitel: Ziemlich offensichtlich
  • Fähigkeit, ein Bild des Produkts zu zeigen
  • Eine schnelle und vollständige Übersicht
  • Verfügbarkeit und Preis des Produkts und schließlich
  • Eine Schaltfläche zum Hinzufügen zum Warenkorb, um sie in den Warenkorb zu legen

Das ist es. Ich möchte es so einfach wie möglich halten und habe mich daher dafür entschieden, es nicht zu übertreiben. Wenn Sie die allgemeinen Prinzipien kennengelernt haben, können Sie so viele Whizbang-Funktionen wie möglich hinzufügen.


Der grundlegende Look

Die Seite muss grundsätzlich so aussehen:


Schritt 1 - Der HTML

Wir werden uns zuerst den HTML-Code nur für den Inhaltsteil ansehen. Ich gehe davon aus, dass Sie HTML und CSS ziemlich fließend beherrschen, also gehe ich zu den ziemlich wichtigen Teilen.

Beachten Sie zunächst, dass ich das Produktbild mit einem Div versehen habe, um das Hinzufügen von Funktionen in Zukunft zu vereinfachen. Angenommen, Sie möchten dem angezeigten Bild in Zukunft eine schnelle Beschriftung hinzufügen. Auf diese Weise können wir diese viel schneller hinzufügen.

Wir haben ein weiteres div-Element, das die Verfügbarkeits- und Preisinformationen zusammen mit der Schaltfläche zum Hinzufügen zum Warenkorb enthält. Wir werden es in Kürze mit ein wenig CSS3 aufpeppen.

Der Rest des HTML ist sehr einfach. Der Titel befindet sich in einem h1-Abschnitt, während die einzelnen Abschnittsüberschriften h2 einnehmen. Die Schnellübersicht ist in einem Absatz verschachtelt, während die vollständige Übersicht einen div einnimmt.

Wir können jetzt zum Styling-Teil übergehen.


Schritt 2 - Das CSS

Hier ist nichts Besonderes. Sehr einfaches CSS, um die Elemente in Position zu bringen.

Ich habe auch ein bisschen CSS3 verwendet, um die Schaltflächen etwas besser aussehen zu lassen.


Schritt 3 - Erstellen unserer Datei catalog.xml

Wie bereits im vorherigen Teil erwähnt, erhält jedes Modul eine eigene XML-Datei, um festzulegen, welche Elemente eingeschlossen werden sollen und wie die Seite allgemein aufgebaut ist. Die Seite, die wir heute erstellen, basiert auf einer Datei namens catalog.xml, um deren Inhalt und Struktur zu definieren.

Diese Datei sollte im layout ordner vorhanden sein. Erstellen Sie also eine XML-Datei und nennen Sie sie catalog.

Die komplette Datei für heute sieht so aus. Ich werde jedes Stück Teil für Teil unten erklären.

Ignorieren Sie die anfänglichen XML- und Layoutversionsdeklarationen. Sie haben für uns jetzt keine Bedeutung mehr.

Zunächst teilen wir dem System mit, dass wir beabsichtigen, den Produktansichtsteil des Systems zu ändern. Dies liegt daran, dass catalog.xml das Layout für eine Reihe anderer Ansichten enthält. Daher müssen wir unbedingt angeben, welche Ansicht geändert werden soll.

Jetzt weisen wir Magento an, die Datei 1column.phtml als Hauptmastervorlage für diese Ansicht zu laden. Dies liegt daran, dass jede einzelne Ansicht eine beliebige vordefinierte Struktur verwenden kann. Beispielsweise könnte Ihre Homepage eine sehr komplexe benutzerdefinierte Struktur verwenden, Ihre Produktseite eine zweispaltige und Ihre Suchseite ein einspaltiges Layout.

Wenn nichts angegeben ist, wird die in page.xml erwähnte Standardvorlage geladen. Da wir es für alles andere verwenden, ist dieser Teil redundant. Wenn Sie diese Vorlage jedoch für Ihren persönlichen Gebrauch ändern, ist das Bearbeiten des Dateinamens viel einfacher als das Hinzufügen von XML-Blöcken zur Layoutdatei.

Und jetzt stoßen wir auf einen der raffiniertesten Teile von Magento. Ja, wir können alle unsere ansichtsspezifischen CSS in eine riesige CSS-Datei werfen, aber wir sind keine Höhlenmenschen, oder? Abgesehen von mehreren HTTP-Anfragen können wir mit dieser Methode unser CSS besser optimieren.

Zuerst erhalten wir einen Verweis auf den Kopfabschnitt der Datei und fügen dann unseren seitenspezifischen Inhalt ein. Hier füge ich eine Datei mit dem Namen product.css ein, die alle seitenbezogenen CSS enthält, die wir oben betrachtet haben.

Beachten Sie, dass Sie nicht auf CSS beschränkt sind. Das Einbeziehen von JS und anderen Assets ist ebenfalls möglich.

Wir bitten Magento nun, eine bestimmte Vorlage für den Inhaltsteil der Seite zu verwenden

Dieser Block definiert alle einzelnen Blöcke innerhalb des Hauptinhaltsblocks. Im Wesentlichen verwenden wir individuelle Vorlagen, um das Bild, die Übersicht und Beschreibung des Produkts, die Verfügbarkeit/den Preis und schließlich die Funktion zum Hinzufügen zum Warenkorb anzuzeigen.

Damit ist unsere Basisdatei catalog.xml vollständig.


Schritt 4 - Erstellen unserer Hauptvorlage

Nachdem wir unser Layout festgelegt haben, können wir mit der Erstellung der Datei catalog/product/view.phtml fortfahren, die wir zuvor als Hauptvorlage für den Inhaltsabschnitt in XML angegeben haben.

Diese Datei unterscheidet sich geringfügig von der Skelettvorlage, die wir im letzten Teil erstellt haben, da wir einige kleine Dinge direkt hinzufügen, anstatt den Vorlagenpfad zu durchlaufen, um ein Aufblähen zu vermeiden, zusammen mit einer kleinen Anzahl von API-Aufrufen, die uns helfen.

Wenn Sie einen kurzen Blick darauf werfen, werden Sie feststellen, dass wir eine Reihe von getChildHtml-Aufrufen durchführen, um Inhalte zu erfassen, die blockieren. Diese funktionieren wie erwartet und der Inhalt dieser Inhalte wird etwas später behandelt.

Im Moment müssen wir nicht wissen, was dies bedeutet. In Laienbegriffen fragen wir Magento jedoch im Wesentlichen nach den Geschäftsinformationen dieses bestimmten Produts, damit wir sie verarbeiten und dann auf der Seite anzeigen können.

Hier verwenden wir eine der Magento-API-Methoden, um die URL, an die das Formular gesendet werden soll, dynamisch zu generieren.

Wir verwenden eine andere Methode von Magento, um den Produkttitel direkt zu erwerben.

Und wieder, da die Schnellübersicht nur ein oder zwei Sätze sein wird, entscheide ich mich, sie direkt zu importieren, anstatt eine Vorlage zu verwenden. Wir verwenden dieselbe Funktion, mit der wir den Titel erworben haben.


Schritt 5 - Erstellen der Vorlagen für unsere Blöcke

Nachdem alle Hauptteile erledigt sind, können wir uns jetzt auf die einzelnen Blöcke konzentrieren. Nachdem wir uns bereits beim Erstellen der Hauptvorlage damit befasst haben, sollte dies jetzt viel einfacher sein.

Wir werden jedes in der Reihenfolge seines Auftretens in unserem Code behandeln:

Produktbild

getChildHtml('media') wird direkt dem catalog/product/view/media.phtml zugeordnet. Unsere Datei sieht so aus:

Ein einfacher PHP-Code. Wir verwenden die Hilfsmethoden, um das Bild des Produkts zu erfassen und es dann auf dem Bildschirm zu rendern.

Verfügbarkeit/Preis

getChildHtml('product_type_data') wird direkt dem catalog/product/view/type/simple.phtml zugeordnet. Unsere Datei sieht so aus:

Wir prüfen zunächst, ob das Element verfügbar ist oder nicht, und geben dann den erforderlichen HTML-Code aus. Der Preis des Produkts ist mit einem einfachen Methodenaufruf zu ermitteln!

In den Warenkorb legen

getChildHtml('addtocart') wird direkt dem catalog/product/view/addtocart.phtml zugeordnet. Unsere Datei sieht so aus:

Es ist logisch, dass wir prüfen, ob ein Artikel zum Verkauf steht, bevor wir den erforderlichen HTML-Code ausgeben. Es ist ein einfacher Knopf, wie offensichtlich ist.

Produktbeschreibung

getChildHtml('description') wird direkt dem catalog/product/view/description.phtml zugeordnet. Unsere Datei sieht so aus:

Ähnlich wie wir die Schnellübersicht aufgenommen haben, verwenden wir die in Magento integrierten Methoden, um die erforderlichen Informationen zu erhalten. Wir überprüfen die Existenz der Beschreibung, bevor wir sie rendern.

Wenn Sie neugierig sind, neige ich dazu, die Beschreibung normalerweise separat über Vorlagen einzuschließen, hauptsächlich, weil Sie in Produktionsvorlagen die Beschreibung fast immer in irgendeiner Weise nachbearbeiten. In diesen Szenarien ist es einfacher, diese Logik auf eine eigene Vorlage aufzuteilen. Eine schnelle Übersicht hingegen ist in der Regel recht klein und daher direkt enthalten.


Was wir im nächsten Teil bauen werden

.. liegt ganz bei Ihnen. Es gibt eine ganze Reihe von Ansichten, die Sie entwerfen könnten, aber es ist ziemlich anmaßend von mir, eine auszuwählen. Daher bitte ich Sie, den Leser, eine Ansicht vorzuschlagen, die im nächsten Teil durch einen Kommentar im Kommentarbereich unten behandelt werden soll. Vergiss nicht, mir zu sagen, welches ich als nächstes behandeln soll!


Das letzte Wort

Und wir sind fertig! Heute haben wir die erste Ansicht unseres benutzerdefinierten Magento-Themas erstellt, die Produktansicht sowie die Frage, wie wir mit Magento seitenspezifische Elemente und Inhalte hinzufügen können. Hoffentlich hat Ihnen das geholfen und Sie fanden es interessant. Da dies für viele Leser ein ziemlich neues Thema ist, werde ich mir den Kommentarbereich genau ansehen, also melde dich, wenn du irgendwelche Zweifel hast.

Fragen? Schöne Dinge zu sagen? Kritik? Klicken Sie auf den Kommentarbereich und hinterlassen Sie mir einen Kommentar. Viel Spaß beim Codieren!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.