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

Magento Theme-Entwicklung: Produktseite, Teil 1

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

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

Nachdem wir die Startseite und die Kategorieseite fertig gestellt haben, können Sie in diesem Tutorial die drittwichtigste Seite der eCommerce-Website bearbeiten: die Produktseite. Lassen Sie uns zunächst die Produktseite öffnen und sehen, wie sie jetzt aussieht und wie sie aussehen soll.

Die Produktseite in Ihrem HTML-Design sieht folgendermaßen aus:

HTML design of product page

Unsere aktuelle Produktseite sieht so aus:

Product Page before editing

Um mit der Bearbeitung zu beginnen, machen wir denselben Schritt wie bisher, d. H. Indem wir die Vorlagehinweise aktivieren, um herauszufinden, welche Vorlagendateien für das Rendern dieser Seite verantwortlich sind.

Enabling template hints

Wie wir sehen, ist die Seite eine Zusammenstellung von über einem Dutzend Dateien, aber zum Glück müssen wir nicht alle bearbeiten. Wir müssen nur drei oder vier dieser Dateien bearbeiten und für den Rest ändern wir einfach die Stile, damit sie wie unser Design aussehen, ohne sich mit den phtml-Dateien zu beschäftigen.

Wenn Sie genau hinschauen, stammt die Gesamtstruktur des Produktbereichs aus der Datei \ template \ catalog \ product \ view.phtml. Ich habe das durch einen Pfeil im obigen Bild herausgestellt. Diese Datei enthält die äußere Struktur aller Komponenten. Die inneren Teile stammen dann von anderen Vorlagen. Wir bearbeiten diese äußeren jedoch zuerst.

Wir kopieren diese view.phtml-Datei in unser neues Design und beginnen mit der Bearbeitung. Der aktuelle Code dieser Datei sieht folgendermaßen aus:

Nun müssen wir unseren HTML-Code auschecken, den gesamten HTML-Code in diese view.phtml-Datei einfügen und mit der Bearbeitung beginnen. Der aktuelle Code der Datei details.html in unserer HTML-Designdatei sieht folgendermaßen aus (ich kopiere nur den Code für den Produktteil, ausgenommen Kopf- und Fußzeile usw.):

Ich weiß, dass das eine Menge Code ist und Sie vielleicht verschreckt. Aber keine Sorge, denn wie Sie sehen werden, wenn wir die dynamischen Tags einfügen, wird der Code schnell schmelzen und wir müssen uns keine Sorgen mehr machen.

Jetzt beginnen wir mit der Bearbeitung dieses HTML-Codes, indem wir dynamische Tags aus unserer aktuellen Datei view.phtml einfügen.

Zuerst fügen wir diese Zeilen oben ein, um die Initialisierung durchzuführen:

Schließen Sie dann die Produktansicht div am Ende der Datei (Zeile 314):

Als Nächstes packen wir die Produktdetails div in ein Formularelement, wie es in der eigentlichen Datei view.phtml enthalten ist. Also fügen wir diese Zeile in die product-detailsin Zeile 10 ein:

In ähnlicher Weise schließen wir nun diesen form und kopieren dieses JavaScript auch aus view.phtml in Zeile 77:

Entfernen Sie im nächsten Schritt in der Tab-Box div (beginnend bei Zeile 129) den gesamten vorhandenen Code, und kopieren Sie den folgenden Tab-Code aus view.phtml (etwa 100 Codezeilen werden durch diese wenigen Zeilen ersetzt). Um sicherzustellen, dass die Registerkarte JavaScript weiterhin einwandfrei funktioniert, fügen wir die Tab-Box div der aktuellen Registerkarte für Klassen hinzu. Der neue Code sieht daher folgendermaßen aus:

Nachdem dies erledigt ist, fügen wir nun den <?php echo $this->getChildHtml ('related_products')?> - Tag in das hot-products -div ein, nachdem der vorhandene Code entfernt wurde, sodass er in Zeile 166 wie folgt aussieht:

Sehen Sie, wie nur 150 Zeilen Code durch diese drei Zeilen ersetzt werden. Lassen Sie uns alles speichern und sehen, wie die Seite so weit kommt. Wenn Sie alles richtig gemacht haben, sollte es ungefähr so aussehen:

Product page after editing viewphtml

Es mag alles durcheinander aussehen, aber glauben Sie mir, wir nähern uns dem, wie die Seite aussehen soll. Im nächsten Artikel werden wir die Dateien bearbeiten, die für das Rendern des Abschnitts Bilder, verwandte Produkte usw. verantwortlich sind, und schließlich werden einige Styling-Korrekturen vorgenommen, und unsere Produktseite ist fertig.

Lassen Sie mich am Ende noch einmal betonen, dass die oben gezeigten großen Codeabschnitte Sie zunächst einschüchtern können. Sobald Sie jedoch den Code durch geeignete dynamische Tags ersetzt haben, werden Sie schnell feststellen, dass das Bearbeiten dieser Codes nicht viel Arbeit bedeutet.

Im nächsten Artikel vervollständigen wir den Rest dieser Seite durch Bearbeiten anderer HTML-Dateien.

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.