So erstellen Sie eine Hello World-Erweiterung in Magento 2

Veröffentlicht: 2017-04-25

Wir werden eine sehr einfache Erweiterung in Magento 2 erstellen. Wenn Sie fertig sind, wird die Ausgabe der Erweiterung lauten: „Hallo Weblizar, dies ist Ihre erste Hallo-Welt-Magento-Erweiterung! ” im Blockinhalt auf einer benutzerdefinierten Frontend-Route. Lassen Sie uns lernen, wie man eine Erweiterung in Magento 2 mit hello world als Ausgabe erstellt.

Erfordernis :

In der Liste haben Sie die neueste Magento 2-Version, die derzeit 2.1 ist. Wird auf Ihrem lokalen System installiert.

Bevor wir mit der Entwicklung einer Magento 2-Erweiterung beginnen, gibt es zwei Dinge, die die Leute oft vergessen und die wir Ihnen empfehlen:

1. Deaktivieren Sie den Magento-Cache

Durch das Deaktivieren des Magento-Cache während der Entwicklung sparen Sie Zeit, da Sie den Cache nicht jedes Mal manuell leeren müssen, wenn Sie Änderungen an Ihrem Code vornehmen.

Der einfachste Weg, den Cache zu deaktivieren, ist, zu Admin => System => Cache Management => alle Cache-Typen auszuwählen und zu deaktivieren.

2. Versetzen Sie Magento in einen Entwicklermodus

Sie sollten Magento in einen Entwicklermodus versetzen, um sicherzustellen, dass Sie alle Fehler sehen, die Magento Ihnen entgegenwirft.

Öffnen Sie dazu Ihr Terminal und gehen Sie zum Stammverzeichnis von Magento 2. Von dort aus sollten Sie den folgenden Befehl ausführen:

php bin/magento deploy:mode:set developer

So erstellen Sie eine Erweiterung in Magento:

Erstellen der Erweiterungsdateien und -ordner:
Erweiterung einrichten
Der erste Schritt besteht darin, den Erweiterungsordner und die erforderlichen Dateien zu erstellen, die zum Registrieren einer Magento-Erweiterung erforderlich sind.
1. Erstellen Sie die folgenden Ordner:

  • App/Code/Weblizar
  • app/code/Weblizar/Helloworld

Der Weblizar-Ordner ist der Erweiterungs-Namespace und Helloworld ist der Erweiterungsname .
Hinweis: Wenn Sie den Codeordner nicht in Ihrem App-Verzeichnis haben, erstellen Sie ihn manuell.

2. Nachdem wir nun einen Erweiterungsordner haben, müssen wir eine module.XML-Datei im Ordner app/code/Weblizar/Helloworld/etc mit dem folgenden Code erstellen:

<?xml-version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<Modulname=”Weblizar_Helloworld” setup_version=”1.0.0″></module>
</config>

3. Um das Modul zu registrieren, erstellen Sie im Ordner app/code/Weblizar/Helloworld eine Datei registration.php mit dem folgenden Code:

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Weblizar_Helloworld',
__DIR__
); ?>

4. Öffnen Sie Ihr Terminal und gehen Sie zum Stammverzeichnis von Magento 2. Führen Sie von dort aus den folgenden Befehl aus:

php bin/magento setup:upgrade

Wenn Sie sicherstellen möchten, dass die Erweiterung installiert ist, können Sie zu Admin => Stores => Konfiguration => Erweitert => Erweitert gehen und überprüfen, ob die Erweiterung in der Liste vorhanden ist, oder Sie können app/etc/config.php öffnen und überprüfen Sie das Array auf den Schlüssel „Weblizar_Helloworld“, dessen Wert auf 1 gesetzt werden sollte.

Magento-Admin-Panel beim Erstellen einer Erweiterung

Controller erstellen

1. Zuerst müssen wir den Router definieren. Erstellen Sie dazu eine routes.XML-Datei im Ordner app/code/Weblizar/Helloworld/etc/frontend mit dem folgenden Code:

<?xml-version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
<router-id="standard">
<route id=“helloworld“ frontName=“helloworld“>
<Modulname=“Weblizar_Helloworld“/>
</route>
</router>
</config>

Hier definieren wir unseren Frontend-Router und die Route mit einer ID „helloworld“.

Das frontName-Attribut wird der erste Teil unserer URL sein.

In Magento 2 sind URLs so aufgebaut:
<frontName>/<controller_folder_name>/<controller_class_name>

In unserem Beispiel sieht die endgültige URL also so aus:

hallowelt/index/index

2. Nun erstellen wir die Controller-Datei Index.php im Ordner app/code/Weblizar/Helloworld/Controller/Index mit folgendem Code:

<?php

Namensraum Weblizar\Helloworld\Controller\Index;

verwenden Sie Magento\Framework\App\Action\Context;

class Index erweitert \Magento\Framework\App\Action\Action
{
geschützt $_resultPageFactory;

öffentliche Funktion __construct(Context $context, \Magento\Framework\View\Result\PageFactory $resultPageFactory)
{
$this->_resultPageFactory = $resultPageFactory;
parent::__construct($context);
}

öffentliche Funktion execute()
{
$resultPage = $this->_resultPageFactory->create();
$resultPage zurückgeben;
}
}

In Magento 2 hat jede Aktion eine eigene Klasse, die die Methode execute() implementiert.

Erstellen eines Blocks

Wir erstellen eine einfache Blockklasse mit der Methode getHelloWorldTxt(), die den String „Hello world“ zurückgibt.

1. Erstellen Sie eine Helloworld.php-Datei im Ordner app/code/Weblizar/Helloworld/Block mit dem folgenden Code:

<?php
Namensraum Weblizar\Helloworld\Block;

Klasse Helloworld erweitert \Magento\Framework\View\Element\Template
{
Öffentliche Funktion getHelloWorldTxt()
{
return 'Hallo Weblizar, dies ist Ihre erste Hello World Magento-Erweiterung!';
}
}

Erstellen eines Layouts und von Vorlagendateien

In Magento 2 werden Layoutdateien und Vorlagen im Ansichtsordner innerhalb Ihrer Erweiterung abgelegt. Innerhalb des Ansichtsordners können wir drei Unterordner haben: adminhtml, base und frontend.
Der adminhtml-Ordner wird für Admin verwendet, der Frontend-Ordner wird für Frontend verwendet und der Basisordner wird sowohl für Admin- als auch für Frontend-Dateien verwendet.

1. Zuerst erstellen wir eine Datei helloworld_index_index.XML im Ordner app/code/Weblizar/Helloworld/view/frontend/layout mit dem folgenden Code:

<page xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”../../../../../../../lib /intern/Magento/Framework/
Ansicht/Layout/etc/page_configuration.xsd“ layout="1column">
<Körper>
<referenceContainer name="content">
<block class=“Weblizar\Helloworld\Block\Helloworld“ name=“helloworld“ template=“helloworld.phtml“ />
</referenceContainer>
</body>
</Seite>

Jede Seite hat eine Layout-Hand und für unsere Controller-Aktion ist das Layout-Handle helloworld_index_index. Sie können für jedes Layout-Handle eine Layout-Konfigurationsdatei erstellen.

In unserer Layoutdatei haben wir dem Inhaltscontainer einen Block hinzugefügt und das Template unseres Blocks auf helloworld.phtml gesetzt, das wir im nächsten Schritt erstellen werden.

2. Erstellen Sie eine Datei helloworld.phtml im Ordner app/code/Weblizar/Helloworld/view/frontend/templates mit dem folgenden Code:

<h1><?php echo $this->getHelloWorldTxt(); ?></h1>

$diese Variable verweist auf unsere Blockklasse und wir rufen die Methode getHelloWorldTxt() auf, die den String „Hello world!“ zurückgibt.

Und das ist es. Öffnen Sie die URL /helloworld/index/index in Ihrem Browser und Sie sollten so etwas wie dieses und erhalten

Erstellen Sie eine Erweiterung in der Magento-Ausgabe

Klicken Sie hier, um die Hello World Magento-Erweiterung herunterzuladen