Magento 2 - Frontend-Seite bauen

Die Erklärungen auf dieser Seite bauen auf der Seite Modul bauen auf. Wer noch nicht weis, wie man ein Magento-Modul baut. Sollte zuerst das erlernen, bevor er hier weiterliest.

URL

Wenn man eine neue Frontseite in Magento erstellen will, muss man erst überlegen, unter welcher URL diese erreichbar sein soll. Für Frontendseiten kann dann in einem weiteren Schritt eine SEO-freundliche URL generiert werden. Die hier gebaute URL bleibt aber trotzdem gültig. Die Syntax dieser URL ist.

http://magento.local/route_name/controller/action

• route_name ist ein eindeutiger Name, mit dem alle URLs beginnen, die in diesem Modul definiert werden. Dieser Name muss eindeutig sein und darf nicht schon in einem anderen Modul verwendet worden sein.
• controller ist der Name des Verzeichnisses innerhalb des Controller-Verzeichnisses (in Kleinbuchstaben)
• action ist der Name der PHP Klasse innerhalb des Controllernamen-Verzeichnisses. Innerhalb dieser PHP-Klasse muss eine execute-Funktion vorhandenn sein, die letztendlich angesprochen wird, um die URL-Anfrage abzuarbeiten.

Eine Beispiel-URL wäre also:

http://magento.local/helloworld/say/hallo

controller oder action kann weggelassen werden. Wird das getan gilt folgendes:

• http://magento.local/helloworld/say ist gleichbedeutend mit http://magento.local/helloworld/say/index
• http://magento.local/helloworld ist gleichbedeutend mit http://magento.local/helloworld/index/index

routes.xml

Der route_name muss einmal pro Modul festgelegt werden. Für Frontend-Seiten muss hierfür im Verzeichnis etc/frontend eine Datei mit Namen routes.xml mit folgendem Inhalt angelegt werden.

<?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 frontName="helloworld" id="helloworld">
            <module name="ErichWeigand_HelloWorld"/>
        </route>
    </router>
</config>

• <router id="standard"> bedeutet, dass dies eine routes.xml für Frontend-Seiten ist.
• route -> frontname : Dies ist der route_name der URL.
• route -> id : Dies ist Teil des Namens für die Layout-XMLs der Seiten für dieses Modul. Meist wird hier derselbe Name wie beim frontname genommen.
• module -> name Hier muss der vollständige Name des Moduls stehen.

Wenn diese Definition in einem Modul gemacht ist, können Frontend-Seiten erzeugt werden.

Controller-Klasse

Die PHP-Klasse die den Aufruf der URL nun tatsächlich abarbeitet, muss im Controller-Verzeichnis des Moduls vorhanden sein. Ich baue hier zuerst den Controller für http://magento.local/helloworld bzw. für http://magento.local/helloworld/index/index nach obiger Regel.

Hierfür lege ich im Controller-Verzeichnis das Verzeichnis Index an und darin die Datei Index.php mit folgendem Inhalt.

<?php

namespace ErichWeigand\HelloWorld\Controller\Index;

use Magento\Framework\App\Action\Context;
use Magento\Framework\View\Result\PageFactory;
use Magento\Framework\App\Action\Action;

class Index extends Action
{

    protected $_pageFactory;

    public function __construct(
            Context $context,
            PageFactory $pageFactory) {
        $this->_pageFactory = $pageFactory;
        return parent::__construct($context);
    }

    public function execute() {
        return $this->_pageFactory->create();
    }

}

Danach funktioniert diese Seite. Sie zeigt das Standard-Layout mit Header und Footer aber noch ohne sonstigen Inhalt.

Wenn der Seitenaufruf eine Json-Datenstruktur zurückgeben soll (z.B. für Ajax-Calls), sieht die PHP-Klasse folgendermassen aus.

<?php

namespace ErichWeigand\HelloWorld\Controller\Json;

use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;
use Magento\Framework\Controller\Result\JsonFactory;

class Index extends Action
{

    private $resultJsonFactory;

    public function __construct(
            Context $context,
            JsonFactory $resultJsonFactory) {
        parent::__construct($context);
        $this->resultJsonFactory = $resultJsonFactory;
    }

    public function execute() {
        $resultJson = $this->resultJsonFactory->create();
        return $resultJson->setData(['say' => 'hello world!']);
    }

}

Wenn ich dann diese URL Aufrufe, sieht dies so aus.

Layout

Um auf die neue Seite etwas anzuzeigen, wird folgendes benötigt.

• Eine Beschreibung des Layouts, wie die Einzelteile der Seite zusammengesetzt werden. (layout.xml)
• Eine Block-Klasse pro Einzelteil, die alle Daten und PHP-Funktionen enthält, das für diesen Teil gebraucht werden.
• Eine Template-Datei, die das HTML enthält in das diese Daten eingefügt wird.

layout.xml

helloworld_index_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <referenceContainer name="content">
        <block class="ErichWeigand\HelloWorld\Block\Index" name="helloworld_index_index" template="ErichWeigand_HelloWorld::index.phtml" />
    </referenceContainer>
</page>

Block-Klasse

Index.php

<?php

namespace ErichWeigand\HelloWorld\Block;

class Index extends \Magento\Framework\View\Element\Template
{
    
}

Template-Datei

<h2>Hello World!</h2>

Danach sieht die selbst gebaute Seite folgendermassen aus.

Datei-Struktur

Alle Dateien des Moduls, das hier entstanden ist, sieht dann letztendlich so aus.