Magento für Designer Teil 5

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!


Die vollständige Serie

  • Teil 1: Installation und Einrichtung
  • Teil 2: Produkte, Steuern, Kategorien, Payment Gateways usw.
  • Teil 3: Theming
  • Teil 4: Das Thema erstellen
  • Teil 5: Erstellen der Produktinformationsseite

Ein kurzer Rückblick

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.


Was bauen wir heute??

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.


Ziele für die Seite

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:

  • Der Titel des Produkts: Ziemlich offensichtlich
  • Möglichkeit, ein Bild des Produkts anzuzeigen
  • Eine schnelle und vollständige Übersicht
  • Verfügbarkeit und Preis des Produkts und schließlich
  • Ein Button zum Hinzufügen in den Warenkorb, um ihn in den Warenkorb zu legen

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.


Der grundlegende Look

Die Seite muss grundsätzlich so aussehen:


Schritt 1 - Das HTML

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 Lager
Preis 29,00 $
In den Warenkorb legen

Photoshop 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.

          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.

   

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 (); ?> 
getOptions ()):?> enctype = "multipart / form-data">
getChildHtml ('media')?>
getChildHtml ('product_type_data')?> getChildHtml ('addtocart')?>

productAttribute ($ _ product, $ _product-> getName (), 'name')?>

getShortDescription ()):?>

__ ('Schnellübersicht')?>

productAttribute ($ _ product, nl2br ($ _ product-> getShortDescription ()), 'short_description')?>

getChildHtml ('description')?>

Wenn Sie einen kurzen Blick darauf werfen, werden Sie feststellen, dass wir eine Anzahl von machen getChildHtml Aufrufe, um den Inhalt zu blockieren. Diese funktionieren genau wie erwartet und der Inhalt dieser Inhalte wird später weiter unten behandelt.

 Helfer ('Katalog / Ausgabe'); $ _product = $ this-> getProduct (); ?>

Im Moment müssen wir nicht wissen, was das bedeutet. Was Laien angeht, fragen wir Magento im Wesentlichen nach den Informationen zum jeweiligen Produkt, damit wir sie verarbeiten und auf der Seite anzeigen können.

 
getOptions ()):?> enctype = "multipart / form-data">

Hier verwenden wir eine der API-Methoden von Magento, um dynamisch die URL zu generieren, in der das Formular veröffentlicht werden muss.

 

productAttribute ($ _ product, $ _product-> getName (), 'name')?>

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

 getShortDescription ()):?> 

__ ('Schnellübersicht')?>

productAttribute ($ _ product, nl2br ($ _ product-> getShortDescription ()), 'short_description')?>

Und da die schnelle Übersicht nur aus ein oder zwei Sätzen besteht, 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 wichtigen Teile fertig 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 jeden in der Reihenfolge seines Auftretens in unserem Code behandeln:

Produktbild

getChildHtml ('media') Karten direkt an Katalog / Produkt / Ansicht / media.phtml. Unsere Datei sieht so aus:

 getProduct (); $ _helper = $ this-> helper ('catalog / output'); ?> helper ('catalog / image') -> init ($ _ product, 'image'). '"alt ="'. $ this-> htmlEscape ($ this-> getImageLabel ()). '"title ="'. $ this-> htmlEscape ($ this-> getImageLabel ()). '"/>'; echo $ _helper-> productAttribute ($ _ product, $ _img, 'image');?>

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

Verfügbarkeit / Preis

getChildHtml ('product_type_data') Karten direkt an Katalog / Produkt / Ansicht / Typ / simple.phtml. Unsere Datei sieht so aus:

 getProduct ()?> 
Verfügbarkeit isSaleable ()):?> __ ("auf Lager")?> __ ("Nicht vorrätig")?>
Preis getPriceHtml ($ _ product)?>

Wir prüfen zunächst, ob der Artikel verfügbar ist oder nicht und geben dann den erforderlichen HTML-Code aus. Der Kauf des Produktpreises ist eine einfache Methode, um wegzurufen!

In den Warenkorb legen

getChildHtml ('addtocart') Karten direkt an catalog / product / view / addtocart.phtml. Unsere Datei sieht so aus:

 getProduct ()?> isSaleable ()):?>  

Logischerweise prüfen wir, ob ein Artikel zum Verkauf steht, bevor wir den erforderlichen HTML-Code ausgeben. Es ist eine einfache Taste, wie es offensichtlich ist.

Produktbeschreibung

getChildHtml ('description') Karten direkt an Katalog / Produkt / Ansicht / Beschreibung.phtml. Unsere Datei sieht so aus:

 getProduct () -> getDescription (); ?>  

Produktbeschreibung

helper ('catalog / output') -> productAttribute ($ this-> getProduct (), nl2br ($ _ description), 'description')?>

Ähnlich wie bei der schnellen Übersicht verwenden wir die eingebauten Methoden von Magento, um die notwendigen Informationen zu erhalten. Wir prüfen die Existenz der Beschreibung, bevor wir sie rendern.

Wenn Sie neugierig sind, neige ich normalerweise dazu, die Beschreibung separat über Vorlagen einzufügen, meistens, weil Sie in Produktionsvorlagen fast immer die Beschreibung in irgendeiner Weise nachziehen. In diesen Szenarien ist es einfacher, diese Logik auf eine eigene Vorlage aufzuteilen. Ein schneller Überblick dagegen ist meist recht klein und wird somit direkt mit einbezogen.


Was wir im nächsten Teil bauen werden

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


Das letzte Wort

Und wir sind fertig! Heute haben wir die erste Ansicht unseres benutzerdefinierten Magento-Themas erstellt, die Produktansicht und die Möglichkeit, mit Magento seitenbezogene Assets und Inhalte hinzuzufügen. Hoffentlich war das für Sie nützlich und Sie fanden es interessant. Da dies für viele Leser ein ziemlich neues Thema ist, werde ich den Kommentarbereich genau beobachten, wenn Sie Zweifel haben.

Fragen? Schöne Dinge zu sagen? Kritikpunkte Schlagen Sie den Kommentarbereich an und hinterlassen Sie einen Kommentar. Glückliche Kodierung!