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 können, um es zu unserem ganz eigenen zu machen.
In diesem fünften Teil werden wir eine der wichtigsten Ansichten unseres Geschäfts erstellen - die Produktinformationsseite. Aufgeregt? Lass uns anfangen!
Im letzten Teil haben wir den Rahmen für das Thema festgelegt, indem wir die sich wiederholenden Teile des Themas aufbauen und im Wesentlichen das allgemeine Layout des Themas definieren.
Wir haben auch einen praktischen Einblick in die Funktionsweise des Themens in Magento gegeben, indem wir durchdachten, wie das Layout aufgebaut ist, wie die Blöcke funktionieren und wie die verschiedenen Teile des Puzzles zusammenpassen.
Heute erstellen wir die individuelle Produktansichtsseite. Die Quelldateien, sowohl das Frontend als auch das Backend, sind wie zuvor enthalten. Sie können es verwenden, um zu sehen, wie die Seite aussieht, aber außerhalb davon sollte das Thema defekt aussehen, da der Rest der Ansichten noch nicht berührt wurde. Also, bis wir den Rest bauen, versuchen Sie nicht, aus unserem Sandkasten zu wagen.
Unser Ziel für diese spezifische Seite ist relativ einfach. Wir möchten eine No-Nonsense-Seite, die nur das Wesentliche erledigt. Daher habe ich eine kurze Liste von Elementen zusammengestellt, die ich für notwendig halte:
Das ist es. Ich möchte es so einfach wie möglich halten und entschied mich daher, es nicht zu übertreiben. Sobald Sie die allgemeinen Prinzipien gelernt haben, können Sie so viele Whizbang-Features wie möglich hinzufügen.
Die Seite muss grundsätzlich so aussehen:
Wir werden zunächst nur den HTML-Code für den Inhaltsteil betrachten. Ich gehe davon aus, dass Sie mit HTML und CSS recht fließend umgehen, also werde ich zu den recht wichtigen Bereichen springen.
Verfügbarkeit Auf LagerPreis 29,00 $In den Warenkorb legenPhotoshop zu HTML
Schneller Überblick
Produktbeschreibung
Beachten Sie zunächst, dass ich das Produkt-Image mit einem div-Element versehen habe, um in Zukunft das Hinzufügen von Funktionen zu erleichtern. Angenommen, Sie möchten dem angezeigten Bild in Zukunft eine schnelle Beschriftung hinzufügen, so können wir dies auf diese Weise viel schneller hinzufügen.
Wir haben ein weiteres div-Element, das die Verfügbarkeits- und Preisinformationen zusammen mit der enthält in den Warenkorb legen Taste. Wir werden es ein bisschen mit CSS3 verbessern.
Der Rest des HTML ist sehr unkompliziert. Der Titel befindet sich in einem Abschnitt h1, während die einzelnen Abschnittsüberschriften h2 aufnehmen. Die schnelle Übersicht ist in einem Absatz verschachtelt, während die vollständige Übersicht ein div belegt.
Wir können jetzt zum Styling-Teil übergehen.
Schritt 2 - Das CSS
/ * Produktseite * / # main-product-image margin: 0 20px 10px 0; Polsterung: 10px; Schwimmer: links; Rand: 1px fest # E1E1E1; Hintergrund: # F3F3F3; # product-details width: 180px; Polsterung: 10px; schweben rechts; Rand: 1px fest # E1E1E1; Hintergrund: # F3F3F3; Marge: 0 0 0 20px; # Produktverfügbarkeit span.available, # Produktpreisspanne color: # 7db000; schweben rechts; .button Marge: 10px auto; Bildschirmsperre; Breite: 140px; Polsterung: 5px 10px; Text ausrichten: Mitte; Textdekoration: keine; Farbe: # 555; Rahmen: 1px fest #ccc; Schriftgröße: 18px; Hintergrund: #ddd; Grenzradius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; Box-Schatten: 1px 1px 2px rgba (0,0,0, 0,5); -webkit-box-shadow: 1px 1px 2px rgba (0,0,0, 0,5); -moz-box-shadow: 1px 1px 2px rgba (0,0,0, 0,5); Text-Schatten: #fff 0px 1px 1px; Hintergrund: -webkit-gradient (linear, links oben, links unten, von (#eeeeee) bis (#cccccc)); Hintergrund: -moz-linearer Gradient (oben, #eeeeee, #cccccc); .button: hover Hintergrund: # 014464; Hintergrund: -webkit-gradient (linear, links oben, links unten, von (#cccccc) bis (# 999999)); Hintergrund: -moz-linearer Gradient (oben, #cccccc, # 999999); Farbe: # 000; .button: aktiv -moz-box-shadow: 0 2px 6px schwarz; -webkit-box-shadow: 0 2px 6px schwarz;Nichts Besonderes hier. Sehr einfaches CSS, um die Elemente in Position zu bringen.
Ich habe auch ein bisschen CSS3 verwendet, um die Buttons ein wenig besser aussehen zu lassen.
Schritt 3 - Erstellen der Datei catalog.xml
Wie ich bereits erwähnt habe, erhält jedes Modul eine eigene XML-Datei, in der festgelegt wird, welche Elemente enthalten sind, und wie das allgemeine Layout der Seite aussehen soll. Die Seite, die wir heute erstellen, basiert auf einer Datei mit dem Namen catalog.xml um Inhalt und Struktur zu definieren.
Diese Datei sollte in der Layout Ordner, also lassen Sie uns eine XML-Datei erstellen und benennen Katalog.
Die komplette Datei für heute sieht so aus. Ich werde jedes Stück für Stück unten erklären.
page / 1column.phtml css / product.css Ignorieren Sie die ursprünglichen XML- und Layoutversionsdeklarationen. Sie sind jetzt für uns ohne Bedeutung.
Zunächst teilen wir dem System mit, dass wir beabsichtigen, den Produktansichtsteil des Systems zu ändern. Das ist weil catalog.xml enthält das Layout für eine Reihe anderer Ansichten. Daher müssen wir unbedingt angeben, welche Ansicht wir ändern möchten.
page / 1column.phtml Nun sagen wir Magento, dass er das laden soll 1 column.phtml Datei als Hauptmaster-Vorlage für diese Ansicht. Dies liegt daran, dass jede einzelne Ansicht jede 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. Da wir es für alles andere verwenden, ist dieser Teil überflüssig, aber wenn Sie diese Vorlage für Ihren persönlichen Gebrauch ändern, ist das Bearbeiten des Dateinamens viel einfacher als das Hinzufügen von XML-Blöcken zur Layout-Datei.
css / product.css Und jetzt stoßen wir auf einen der schickeren Teile von Magento. Ja, wir können alle unsere spezifischen CSS-Dateien in eine riesige CSS-Datei einfügen, aber wir sind keine Höhlenmenschen, oder? Abgesehen von mehreren HTTP-Anforderungen können wir mit dieser Methode unser CSS besser rationalisieren.
Zuerst erfassen wir einen Verweis auf den Kopfabschnitt der Datei und fügen dann unseren seitenbezogenen Inhalt ein. Hier füge ich eine Datei ein product.css Dieses enthält alle seitenbezogenen CSS, die wir oben betrachtet haben.
Beachten Sie, dass Sie nicht auf CSS beschränkt sind. Die Einbeziehung von JS und anderen Vermögenswerten ist ebenfalls möglich.
Wir bitten Magento nun, eine bestimmte Vorlage für den Inhalt der Seite zu verwenden
Dieser Block definiert alle einzelnen Blöcke innerhalb des Hauptinhaltsblocks. Im Wesentlichen verwenden wir individuelle Vorlagen, um das Produktbild, die Übersicht und Beschreibung, die Verfügbarkeit / den Preis und schließlich die Funktionalität zum Einkaufswagen anzuzeigen.
Und damit unsere Basis catalog.xml Datei ist vollständig.
Schritt 4 - Erstellen unserer Hauptvorlage
Ok, jetzt, da wir unser Layout festgelegt haben, können wir mit der Erstellung des Systems fortfahren catalog / product / view.phtml Datei, 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. Wir werden einige kleine Dinge direkt hinzufügen, anstatt den Vorlagenpfad zu durchlaufen, um das Aufblähen zu vermeiden, zusammen mit einer kleinen Anzahl von API-Aufrufen, die uns helfen.
Helfer ('Katalog / Ausgabe'); $ _product = $ this-> getProduct (); ?>