Magento 2 Modulentwicklung - Teil 2: Frontend Entwicklung

Blöcke, Templates, Layouts, Übersetzungen

Nachdem wir im ersten Teil der Blogserie den Grundstein für unser neues Magento 2 Modul gelegt haben, wird es nun Zeit, das eigentliche Modul zu entwickeln.

Vieles hat sich in Magento 2 geändert. Gerade als Magento Frontend-Entwickler ist der Umstieg auf Magento 2 allerdings gar kein so großer Sprung.

In diesem Teil wollen wir uns alles ansehen, was benötigt wird, um ein einfaches Magento 2 Modul mit Blöcken, Templates, Layouts und Übersetzungen zu erstellen.

Die Ordnerstruktur

Eine der Änderungen in Magento 2 ist, dass alle Dateien eines Moduls jetzt in einem Ordner sind. Das bedeutet, statt unsere Template Dateien irgendwo im Ordner app/design zu verstauen, werden Layout und Template Dateien jetzt im Ordner view im Modul abgelegt.

Auch die Übersetzungen für unser Modul werden wir direkt in das Modul packen können, in den Ordner i18n (internationalization). 


Der erste Block 

Unser erster Block soll die Aufgabe haben, bei den Produktinformationen auf der Artikeldetailseite einen Text darzustellen.

Wie auf dem Bild zu erkennen, soll der Block den Text "Hallo, (Produktname)! Wie geht es dir?" ausgeben.

Hinweis:

Um die Nachricht in Deutsch anzuzeigen, muss Deutsch als Sprache für den Store gewählt sein.

Fangen wir mit der Block-Klasse an. Block-Klassen werden im Ordner Block angelegt. Starten wir mit einer Datei mit dem Namen HelloProduct.php:

<?php
namespace Tudock\HelloWorld\Block;

class HelloProduct extends \Magento\Catalog\Block\Product\View\AbstractView {

	/**
	 * Get the name of the current product
	 * @return string
	 */
	public function getProductName() {
		return $this->getProduct()->getName();
	}
}

Alle Blöcke, die wir für unser Modul anlegen wollen, müssen diesen Regeln folgen:

  1. Die Dateien müssen im Ordner Block liegen. Der Name der Datei ist der Name des Blocks.
  2. Die Dateien müssen eine Klasse beinhalten, welche den Namen des Blocks trägt.
  3. Die Klassen müssen im Namespace {Vendor}\{Modul}\{Block} liegen.
  4. Liegt der Block in einem Unterordner (bspw. Block/Catalog/View.php), so müssen alle Unterordner an den Namespace angehängt werden ({Vendor}\{Modul}\{Block}\Catalog).
  5. Die Klassen müssen \Magento\Framework\View\Element\AbstractBlock oder eine Unterklasse erweitern.

Magento 2 stellt die Block-Klasse \Magento\Catalog\Block\Product\View\AbstractView zur Verfügung. Wir erweitern diese Klasse, denn sie beinhaltet die Methode getProduct(), welche wir nutzen, um in getProductName() den Namen des aktuellen Produktes zur Verfügung zu stellen.


Ein Layout-Eintrag für den Block

Jetzt wo unser Block angelegt ist, brauchen wir noch einen Layout-Eintrag und natürlich ein Template, das am Ende den von uns gewünschten Text ausgibt.

Beides wird im Ordner view angelegt. In diesem Ordner müssen die Unterordner frontend/templates und frontend/layout angelegt werden. Dort liegen Layouts und Templates für das Frontend.

Im Ordner Layout müssen wir nun ein neues Layout-Update anlegen, welches unseren Block an das Ende der Produktinformationen auf der ADS einfügt. Anders als in Magento 1 gibt es hierfür eine klare Naming-Convention.

Die Layout-Handles aus Magento 1 sind jetzt auf einzelne Dateien verteilt. Möchten wir, dass etwas auf der ADS angezeigt wird, so suchen wir nach dem Layout-Handle catalog_product_view. Dieses können wir in Magento 2 in der Datei view/frontend/layout/catalog_product_view.xml bearbeiten:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="product.info.main">
            <block class="Tudock\HelloWorld\Block\HelloProduct" name="hello-product" template="helloproduct.phtml"/>
        </referenceContainer>
    </body>
</page>

Wer mit Layout-Dateien aus Magento 1 vertraut ist, wird feststellen, dass sich einige Dinge geändert haben:

Die erste Node in dieser XML-Datei ist nicht mehr das Layout-Handle (dieses wird wie gesagt über den Datei-Namen ermittelt), sondern der Bereich. In unserem Fall wollen wir eine Änderung innerhalb des body-Tags der Seite durchführen.

Als Nächstes referenzieren wir den Container product.info.main (referenceContainer). referenceContainer und referenceBlock ersetzen reference aus Magento 1.

Container sind ein neuer Typ in den Layouts von Magento 2. Sie bündeln eine Reihe von Blöcken auf der Seite.

Wir legen in dem Container product.info.main (dem Informationsbereich auf der ADS) einen neuen Block an, und zwar den Block, den wir zuvor erstellt haben.

Dafür geben wir unter class die Klasse unseres Blocks mit vollem Namespace-Pfad an und geben unserem Block einen Namen. Wir geben auch ein Template mit dem Namen helloproduct.phtml an, den wir in Kürze anlegen.

Hinweis:
Alternativ kann auch wie früher im Block selbst die Methode setTemplate() benutzt werden, um das Template des Blocks festzulegen.

Das Template für den Block

Unser neues Template liegt unter view/frontend/templates/helloworld.phtml:

<?php
/** @var $block  \Tudock\HelloWorld\Block\HelloProduct */
?>
<p>
	<?php echo __('Hello') ?> , <?php echo $block->getProductName(); ?>!
</p>
<p>
	<?php echo __('How are you?') ?>
</p>

Templates funktionieren quasi wie in Magento 1 auch, allerdings kann die Blockklasse jetzt nicht mehr mit $this, sondern nur noch mit $block referenziert werden.

Unser Template verwendet die globale Funktion __(), die überall in Magento zur Übersetzung genutzt werden kann.


Übersetzung

Für die beiden Strings, die wir übersetzen wollen, legen wir die Datei i18n/de_DE.csv an:


"Hello", "Hallo"
"How are you?", "Wie geht es dir?"


Testen

Wenn wir die Änderungen jetzt speichern, einen Commit erstellen und dann im Shop diese drei Befehle ausführen, sollten wir auf der ADS unser Ergebnis bewundern können:

composer update
bin/magento setup:upgrade
bin/magento cache:flush


Ausblick

Im nächsten Teil geht es weiter mit Controllern, damit schließen wir das Thema Frontend-Entwicklung ab, ehe wir uns dann Models und Dependency Injection ansehen.

Es lohnt sich also, unserem Blog zu folgen!

Tipp:
Den Quellcode für diesen Blogeintrag gibt es auch bei github.

Autor: Kategorie: E-Commerce
Schlagwörter: Magento, Wissen, Magento2
YTo2OntzOjY6ImZldXNlciI7aTowO3M6MzoicGlkIjtpOjk2O3M6MzoiY2lkIjtpOjEwOTYxMjQyMzI7czo0OiJjb25mIjthOjEwOntzOjEwOiJzdG9yYWdlUGlkIjtpOjEyNDtzOjE0OiJleHRlcm5hbFByZWZpeCI7czoxMToidHhfbmV3c19waTEiO3M6MTM6IlVzZXJJbWFnZVNpemUiO2k6MTg7czo5OiJhZHZhbmNlZC4iO2E6MTp7czoyMToic2hvd0NvdW50Q29tbWVudFZpZXdzIjtpOjA7fXM6ODoic2hhcmluZy4iO2E6MTp7czoxMjoidXNlU2hhcmVJY29uIjtOO31zOjg6InJhdGluZ3MuIjthOjM6e3M6MTY6InJhdGluZ0ltYWdlV2lkdGgiO2k6MTE7czoxNjoicmV2aWV3SW1hZ2VXaWR0aCI7aToxNjtzOjg6Im1vZGVwbHVzIjtzOjQ6ImF1dG8iO31zOjY6InRoZW1lLiI7YTo3OntzOjI2OiJib3htb2RlbFRleHRhcmVhTGluZUhlaWdodCI7aTozMDtzOjI0OiJib3htb2RlbFRleHRhcmVhTmJyTGluZXMiO2k6NDtzOjE1OiJib3htb2RlbFNwYWNpbmciO2k6MTA7czoxODoiYm94bW9kZWxMaW5lSGVpZ2h0IjtpOjIwO3M6MTg6ImJveG1vZGVsTGFiZWxXaWR0aCI7aToxMzQ7czoyNjoiYm94bW9kZWxMYWJlbElucHV0UHJlc2VydmUiO2k6MTtzOjIyOiJib3htb2RlbElucHV0RmllbGRTaXplIjtpOjM1O31zOjE3OiJwcmVmaXhUb1RhYmxlTWFwLiI7YToxMDp7czoxNDoidHhfYWxidW0zeF9waTEiO3M6MTc6InR4X2FsYnVtM3hfaW1hZ2VzIjtzOjE1OiJ0eF9jb21tZXJjZV9waTEiO3M6MjA6InR4X2NvbW1lcmNlX3Byb2R1Y3RzIjtzOjEyOiJ0eF9pcmZhcV9waTEiO3M6MTA6InR4X2lyZmFxX3EiO3M6MTU6InR4X21pbmluZXdzX3BpMSI7czoxNjoidHhfbWluaW5ld3NfbmV3cyI7czo5OiJ0eF90dG5ld3MiO3M6NzoidHRfbmV3cyI7czoxMToidHRfcHJvZHVjdHMiO3M6MTE6InR0X3Byb2R1Y3RzIjtzOjI0OiJ0eF93ZWNzdGFmZmRpcmVjdG9yeV9waTEiO3M6MjU6InR4X3dlY3N0YWZmZGlyZWN0b3J5X2luZm8iO3M6MTI6InR4X2NvbW11bml0eSI7czo4OiJmZV91c2VycyI7czoxOToidHhfY3d0Y29tbXVuaXR5X3BpMSI7czo4OiJmZV91c2VycyI7czoxMToidHhfbmV3c19waTEiO3M6MjU6InR4X25ld3NfZG9tYWluX21vZGVsX25ld3MiO31zOjExOiJzaG93VWlkTWFwLiI7YTo1OntzOjk6InR4X3R0bmV3cyI7czo3OiJ0dF9uZXdzIjtzOjExOiJ0dF9wcm9kdWN0cyI7czo3OiJwcm9kdWN0IjtzOjEyOiJ0eF9jb21tdW5pdHkiO3M6NDoidXNlciI7czoxOToidHhfY3d0Y29tbXVuaXR5X3BpMSI7czoyNToiYWN0aW9uPWdldHZpZXdwcm9maWxlJnVpZCI7czoxMToidHhfbmV3c19waTEiO3M6NDoibmV3cyI7fXM6MTI6IlJlcXVpcmVkTWFyayI7czoxOiIqIjt9czo0OiJsYW5nIjtzOjI6ImRlIjtzOjM6InJlZiI7czoyOToidHhfbmV3c19kb21haW5fbW9kZWxfbmV3c18yMzIiO30%3DYTo0OntzOjQ6ImNvbmYiO2E6MzU6e3M6MTc6InVzZVdlYnBhZ2VQcmV2aWV3IjtzOjE6IjEiO3M6MjI6InVzZVdlYnBhZ2VWaWRlb1ByZXZpZXciO3M6MToiMSI7czoyMDoid2VicGFnZVByZXZpZXdIZWlnaHQiO3M6MjoiNzAiO3M6MjA6Im1heENoYXJzUHJldmlld1RpdGxlIjtzOjI6IjcwIjtzOjMxOiJ3ZWJwYWdlUHJldmlld0Rlc2NyaXB0aW9uTGVuZ3RoIjtzOjM6IjE2MCI7czozODoid2VicGFnZVByZXZpZXdEZXNjcmlwdGlvbk1pbmltYWxMZW5ndGgiO3M6MjoiNjAiO3M6Mjc6IndlYnBhZ2VQcmV2aWV3Q2FjaGVUaW1lUGFnZSI7czozOiIxODAiO3M6MzM6IndlYnBhZ2VQcmV2aWV3Q2FjaGVUaW1lVGVtcEltYWdlcyI7czoyOiI2MCI7czozMDoid2VicGFnZVByZXZpZXdDYWNoZUNsZWFyTWFudWFsIjtzOjE6IjAiO3M6Mjg6IndlYnBhZ2VQcmV2aWV3TnVtYmVyT2ZJbWFnZXMiO3M6MjoiMTAiO3M6Mzg6IndlYnBhZ2VQcmV2aWV3U2Nhbk1pbmltYWxJbWFnZUZpbGVTaXplIjtzOjQ6IjE1MDAiO3M6MzA6IndlYnBhZ2VQcmV2aWV3U2Nhbk1pbkltYWdlU2l6ZSI7czoyOiI0MCI7czozMDoid2VicGFnZVByZXZpZXdTY2FuTWF4SW1hZ2VTaXplIjtzOjM6IjQ1MCI7czoyOToid2VicGFnZVByZXZpZXdTY2FuTWluTG9nb1NpemUiO3M6MjoiMzAiO3M6MzE6IndlYnBhZ2VQcmV2aWV3U2Nhbk1heEltYWdlU2NhbnMiO3M6MjoiNDAiO3M6Mzg6IndlYnBhZ2VQcmV2aWV3U2Nhbk1heEltYWdlU2NhbnNGb3JMb2dvIjtzOjI6IjU1IjtzOjQwOiJ3ZWJwYWdlUHJldmlld1NjYW5NYXhIb3J6aXpvbnRhbFJlbGF0aW9uIjtzOjI6IjU7IjtzOjM3OiJ3ZWJwYWdlUHJldmlld1NjYW5tYXh2ZXJ0aWNhbHJlbGF0aW9uIjtzOjE6IjMiO3M6MzA6IndlYnBhZ2VQcmV2aWV3U2NhbkxvZ29QYXR0ZXJucyI7czoxMDoibG9nbyxjcmdodCI7czozODoid2VicGFnZVByZXZpZXdTY2FuRXhjbHVkZUltYWdlUGF0dGVybnMiO3M6NTc6InBpeGVsdHJhbnMsc3BhY2VyLHlvdXR1YmUscmNsb2dvcyx3aGl0ZSx0cmFuc3BhLGJnX3RlYXNlciI7czozODoid2VicGFnZVByZXZpZXdEZXNjcmlwdGlvblBvcnRpb25MZW5ndGgiO3M6MjoiNDAiO3M6MjU6IndlYnBhZ2VQcmV2aWV3Q3VybFRpbWVvdXQiO3M6NDoiNzAwMCI7czoxMjoidXNlUGljVXBsb2FkIjtzOjE6IjAiO3M6MTI6InVzZVBkZlVwbG9hZCI7czoxOiIwIjtzOjEzOiJwaWNVcGxvYWREaW1zIjtzOjM6IjEwMCI7czoxNjoicGljVXBsb2FkTWF4RGltWCI7czozOiI4MDAiO3M6MTY6InBpY1VwbG9hZE1heERpbVkiO3M6MzoiOTAwIjtzOjIyOiJwaWNVcGxvYWRNYXhEaW1XZWJwYWdlIjtzOjM6IjQ3MCI7czoyMzoicGljVXBsb2FkTWF4RGltWVdlYnBhZ2UiO3M6MzoiMzAwIjtzOjIwOiJwaWNVcGxvYWRNYXhmaWxlc2l6ZSI7czo0OiIyNTAwIjtzOjIwOiJwZGZVcGxvYWRNYXhmaWxlc2l6ZSI7czo0OiIzMDAwIjtzOjE4OiJzb3VuZGNsb3VkQ2xpZW50SUQiO3M6MDoiIjtzOjIyOiJzb3VuZGNsb3VkQ2xpZW50U2VjcmV0IjtzOjA6IiI7czoyMDoidXNlVG9wV2VicGFnZVByZXZpZXciO3M6MDoiIjtzOjI0OiJ0b3BXZWJwYWdlUHJldmlld1BpY3R1cmUiO2k6MDt9czoxMToiYXdhaXRnb29nbGUiO3M6Mjg6IldhcnRlIGF1ZiBBbnR3b3J0IHZvbiBHb29nbGUiO3M6ODoidHh0aW1hZ2UiO3M6MTM6IkJpbGQgZ2VmdW5kZW4iO3M6OToidHh0aW1hZ2VzIjtzOjE1OiJCaWxkZXIgZ2VmdW5kZW4iO30%3DYTowOnt9YTowOnt9YTo3OntzOjE2OiJjb21tZW50TGlzdEluZGV4IjthOjE6e3M6MzI6ImNpZHR4X25ld3NfZG9tYWluX21vZGVsX25ld3NfMjMyIjthOjE6e3M6MTA6InN0YXJ0SW5kZXgiO2k6MTU7fX1zOjE0OiJjb21tZW50c1BhZ2VJZCI7aTo5NjtzOjE2OiJjb21tZW50TGlzdENvdW50IjtpOjEwOTYxMjQyMzI7czoxMjoiYWN0aXZlbGFuZ2lkIjtpOjA7czoxNzoiY29tbWVudExpc3RSZWNvcmQiO3M6Mjk6InR4X25ld3NfZG9tYWluX21vZGVsX25ld3NfMjMyIjtzOjEyOiJmaW5kYW5jaG9yb2siO3M6MToiMCI7czoxMjoibmV3Y29tbWVudGlkIjtOO30%3D YTo1OntzOjExOiJleHRlcm5hbFVpZCI7aToyMzI7czoxMjoic2hvd1VpZFBhcmFtIjtzOjQ6Im5ld3MiO3M6MTY6ImZvcmVpZ25UYWJsZU5hbWUiO3M6MjU6InR4X25ld3NfZG9tYWluX21vZGVsX25ld3MiO3M6NToid2hlcmUiO3M6MTcwOiJhcHByb3ZlZD0xIEFORCBleHRlcm5hbF9yZWY9J3R4X25ld3NfZG9tYWluX21vZGVsX25ld3NfMjMyJyBBTkQgcGlkPTEyNCBBTkQgdHhfdG9jdG9jX2NvbW1lbnRzX2NvbW1lbnRzLmRlbGV0ZWQ9MCBBTkQgdHhfdG9jdG9jX2NvbW1lbnRzX2NvbW1lbnRzLmhpZGRlbj0wIEFORCBwYXJlbnR1aWQ9MCI7czoxMDoid2hlcmVfZHBjayI7czoxMzk6ImV4dGVybmFsX3JlZj0ndHhfbmV3c19kb21haW5fbW9kZWxfbmV3c18yMzInIEFORCBwaWQ9MTI0IEFORCB0eF90b2N0b2NfY29tbWVudHNfY29tbWVudHMuZGVsZXRlZD0wIEFORCB0eF90b2N0b2NfY29tbWVudHNfY29tbWVudHMuaGlkZGVuPTAiO30%3D YToyOntpOjA7czoxNDk6IjxpbWcgc3JjPSIvdHlwbzNjb25mL2V4dC90b2N0b2NfY29tbWVudHMvcmVzL2Nzcy90aGVtZXMvdHVkb2NrL2ltZy9wcm9maWxlLnBuZyIgY2xhc3M9InR4LXRjLXVzZXJwaWMgdHgtdGMtdWltZ3NpemUiIHRpdGxlPSIiICBpZD0idHgtdGMtY3RzLWltZy0iIC8%2BIjtpOjk5OTk5O3M6MTUxOiI8aW1nIHNyYz0iL3R5cG8zY29uZi9leHQvdG9jdG9jX2NvbW1lbnRzL3Jlcy9jc3MvdGhlbWVzL3R1ZG9jay9pbWcvcHJvZmlsZWYucG5nIiBjbGFzcz0idHgtdGMtdXNlcnBpY2YgdHgtdGMtdWltZ3NpemUiIHRpdGxlPSIiICBpZD0idHgtdGMtY3RzLWltZy0iIC8%2BIjt9
3 Kommentare verfügbar
Bitte bestätigen Sie
Nein
Ja
Information
Ok
Vorschau wird geladen ...
* Pflichtfeld
Ihr Kommentar ist eine Antwort auf den folgenden Kommentar

Haiko Gesell (haikogesell.de) schrieb am 10.07.2016  

Hallo,

Vielen Dank für das wunderbare Tutorial zur Erstellung eines Magento 2 Moduls. Ich konnte der Erklärung gut folgen und mit kleinen Schwierigkeiten (keine Erfahrung in der Entwicklung) hier Part 2 abschließen.

Leider wird jedoch kein "Hello.."
mehr anzeigen ...
auf meiner Produktseite angezeigt, allerdings auch keinerlei Fehlermeldung oder Logs.

• Das Modul ist aktiviert
• php bin/magento setup:upgrade > ausgeführt
• php bin/magento setup:static-content:deploy de_DE > ausgeführt

Ich habe zudem ein eigenes Template (basierend auf Luma) installiert (auf app/code).

Wo müsste ich nachsehen, ob auch wirklich alle Dateien installiert sind?

HG

Antworten
Vorschau wird geladen ...
* Pflichtfeld

Marco Köpcke (tudock.de) schrieb am 11.07.2016  

Hallo Haiko,

wenn Template, Layout-XML und Block alle zusammen im Modul installiert sind, und in vendor/tudock/helloworld/... liegen (oder app/code/Tudock/HelloWorld/... je nach Installations-Variante), dann sollte der Text auch zu sehen sein. Das Problem
mehr anzeigen ...
könnte eventuell der Cache sein, dieser kann mit bin/magento cache:flush geleert werden.

Außerdem ist es wichtig, dass das Theme den Container product.info.main auf der ADS anzeigt. Ob das der Fall ist, kann per Suche in den XML Dateien des Themes überprüft werden. Wenn der Container irgendwo entfernt wird, kann das die Ursache sein.

Ansonsten kann es vielleicht auch helfen, einmal den Code mit dem auf Github zu vergleichen:
https://github.com/TUDOCK/tudoc...ple/tree/part-2 (Achtung, hier wird noch eine alte composer.json verwendet, bitte die aus dem überarbeiteten ersten Teil der Blogserie verwenden!)

Ich hoffe ich konnte helfen :)

Viele Grüße,
Marco

Antworten
Vorschau wird geladen ...
* Pflichtfeld

H G (haikogesell.de) schrieb am 11.07.2016  

Hallo Marco,

Danke für deine Tipps. Der Fehler war ziemlich banal und lag im Unterschied zwischen "helloworld.phtml" und der "helloproduct.phtml". Das solltest Du wie oben noch ausbessern, für den nächsten Copy-Paste Helden :-P

Viele
mehr anzeigen ...
Grüße,
HG

Antworten
Vorschau wird geladen ...
* Pflichtfeld

Wir behalten uns vor, Kommentare zu löschen, beispielsweise wenn sich diese nicht auf den Beitrag beziehen, zur Eigenwerbung missbraucht werden, persönliche Daten anderer enthalten, diskriminieren, beleidigen oder Rechte verletzen.

Datenschutzhinweis: Wenn Sie einen Kommentar oder sonstigen Beitrag in unserem Blog hinterlassen, speichern wir neben Ihren Angaben Ihre IP-Adresse. Darüber hinaus können Sie die Beiträge und Kommentare unseres Blogs abonnieren. Das Kommentarabonnement können Sie jederzeit abbestellen. Weitere Informationen finden Sie in unserer Datenschutzerklärung.

E-Commerce & Webentwicklung: Wir realisieren und optimieren Internetprojekte. Unser Fachgebiet sind Onlineshops, Rich Internet Applications und anspruchsvolle Onlineauftritte. Über unsere Arbeit schreiben wir. Hier im Blog von TUDOCK.