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
- Teil 1: Installation und Einrichtung
- Teil 2: Produkte, Steuern, Kategorien, Zahlungsgateways usw.
- Teil 3: Theming
- Teil 4: Erstellen des Themas
- Teil 5: Erstellen der Produktinformationsseite
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.
<div id="content" class="product"> <div id="main-product-image"><img src="images/primg.gif" /></div> <div id="product-details"> <div id="product-availability">Availability <span class="available">In stock</span></div> <div id="product-price">Price <span>$29.00</span></div> <a class="button" href="#">Add to cart</a> </div> <h1>Photoshop to HTML</h1> <h2>Quick Overview</h2> <p class="quick-overview"> </p> <h2>Product Description</h2> <div class="product-description"> </div>
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
/* Product page */
#main-product-image {
margin: 0 20px 10px 0;
padding: 10px;
float: left;
border: 1px solid #E1E1E1;
background: #F3F3F3;
}
#product-details {
width: 180px;
padding: 10px;
float: right;
border: 1px solid #E1E1E1;
background: #F3F3F3;
margin: 0 0 0 20px;
}
#product-availability span.available, #product-price span {
color: #7db000;
float: right;
}
.button {
margin: 10px auto;
display: block;
width: 140px;
padding: 5px 10px;
text-align: center;
text-decoration: none;
color: #555;
border: 1px solid #ccc;
font-size: 18px;
background: #ddd;
border-radius: 12px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
box-shadow: 1px 1px 2px rgba(0,0,0,.5);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
text-shadow: #fff 0px 1px 1px;
background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#cccccc));
background: -moz-linear-gradient(top, #eeeeee, #cccccc);
}
.button:hover {
background: #014464;
background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#999999));
background: -moz-linear-gradient(top, #cccccc, #999999);
color: #000;
}
.button:active {
-moz-box-shadow: 0 2px 6px black;
-webkit-box-shadow: 0 2px 6px black;
} 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.
<?xml version="1.0"?>
<layout version="0.1.0">
<catalog_product_view translate="label">
<label>Catalog Product View (Any)</label>
<!-- Mage_Catalog -->
<reference name="root">
<action method="setTemplate"><template>page/1column.phtml</template></action>
</reference>
<reference name="head">
<action method="addCss"><stylesheet>css/product.css</stylesheet></action>
</reference>
<reference name="content">
<block type="catalog/product_view" name="product.info" template="catalog/product/view.phtml">
<block type="catalog/product_view_media" name="product.info.media" as="media" template="catalog/product/view/media.phtml"/>
<block type="catalog/product_view_description" name="product.description" as="description" template="catalog/product/view/description.phtml"/>
<block type="catalog/product_view_type_simple" name="product.info.simple" as="product_type_data" template="catalog/product/view/type/simple.phtml"/>
<block type="catalog/product_view" name="product.info.addtocart" as="addtocart" template="catalog/product/view/addtocart.phtml"/>
</block>
</reference>
</catalog_product_view>
</layout> Ignorieren Sie die anfänglichen XML- und Layoutversionsdeklarationen. Sie haben für uns jetzt keine Bedeutung mehr.
<catalog_product_view translate="label">
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.
<reference name="root">
<action method="setTemplate"><template>page/1column.phtml</template></action>
</reference> 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.
<reference name="head">
<action method="addCss"><stylesheet>css/product.css</stylesheet></action>
</reference> 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.
<block type="catalog/product_view" name="product.info" template="catalog/product/view.phtml">
Wir bitten Magento nun, eine bestimmte Vorlage für den Inhaltsteil der Seite zu verwenden
<block type="catalog/product_view_media" name="product.info.media" as="media" template="catalog/product/view/media.phtml"/> <block type="catalog/product_view_description" name="product.description" as="description" template="catalog/product/view/description.phtml"/> <block type="catalog/product_view_type_simple" name="product.info.simple" as="product_type_data" template="catalog/product/view/type/simple.phtml"/> <block type="catalog/product_view" name="product.info.addtocart" as="addtocart" template="catalog/product/view/addtocart.phtml"/>
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.
<?php
$_helper = $this->helper('catalog/output');
$_product = $this->getProduct();
?>
<form action="<?php echo $this->getAddToCartUrl($_product) ?>" method="post" id="product_addtocart_form"<?php if($_product->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>>
<div class="no-display">
<input type="hidden" name="product" value="<?php echo $_product->getId() ?>" />
<input type="hidden" name="related_product" id="related-products-field" value="" />
<div id="main-product-image"><?php echo $this->getChildHtml('media') ?></div>
<div id="product-details">
<?php echo $this->getChildHtml('product_type_data') ?>
<?php echo $this->getChildHtml('addtocart') ?>
</div>
<h1><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></h1>
<?php if ($_product->getShortDescription()):?>
<h2><?php echo $this->__('Quick Overview') ?></h2>
<p class="quick-overview"><?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description') ?></p>
<?php endif;?>
<?php echo $this->getChildHtml('description') ?>
</form>
</div> 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.
<?php
$_helper = $this->helper('catalog/output');
$_product = $this->getProduct();
?> 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.
<form action="<?php echo $this->getAddToCartUrl($_product) ?>" method="post" id="product_addtocart_form"<?php if($_product->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>>
Hier verwenden wir eine der Magento-API-Methoden, um die URL, an die das Formular gesendet werden soll, dynamisch zu generieren.
<h1><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></h1>
Wir verwenden eine andere Methode von Magento, um den Produkttitel direkt zu erwerben.
<?php if ($_product->getShortDescription()):?>
<h2><?php echo $this->__('Quick Overview') ?></h2>
<p class="quick-overview"><?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description') ?></p>
<?php endif;?> 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:
<?php
$_product = $this->getProduct();
$_helper = $this->helper('catalog/output');
?>
<?php
$_img = '<img id="image" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
echo $_helper->productAttribute($_product, $_img, 'image');
?> 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:
<?php $_product = $this->getProduct() ?>
<div id="product-availability">Availability
<?php if($_product->isSaleable()): ?>
<span class="available"><?php echo $this->__('In stock') ?></span>
<?php else: ?>
<span class="unavailable"><?php echo $this->__('Out of stock') ?></span>
<?php endif; ?>
</div>
<div id="product-price">Price <span><?php echo $this->getPriceHtml($_product) ?></span></div> 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:
<?php $_product = $this->getProduct() ?>
<?php if($_product->isSaleable()): ?>
<button title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart"><?php echo $this->__('Add to Cart') ?></button>
<?php endif; ?> 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:
<?php $_description = $this->getProduct()->getDescription(); ?>
<?php if ($_description): ?>
<h2>Product Description</h2>
<div class="product-description"><?php echo $this->helper('catalog/output')->productAttribute($this->getProduct(), nl2br($_description), 'description') ?></div>
<?php endif; ?> Ä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!
