Створення першого блоку (Block.php + template.phtml + layout.xml)

У попередній статті ми показали як вивести текст "Hello World" на власній сторінці. Тепер виведіть його у новому блоці.

 

1. Додайте новий PHP class блоку.

Створіть файл:

app/code/<VendorName>/<ModuleName>/Block/SomeName.php

помістіть у нього код:

<?php
namespace VendorName\ModuleName\Block;
class SomeName extends \Magento\Framework\View\Element\Template
{
    public function getWelcomeText()
    {
        return 'Hello World';
    }
}

SomeName - довільна назва у форматі CamelCase (верблюжий регістр).
\Magento\Framework\View\Element\Template -  клас, від якого  унаслідуєте власний блок, що взаємодіє з темплейтом.
getWelcomeText - створений нами публічний метод що повертатиме текст "Hello World". Ви самі можете придумати його назву.

 
2. Додайте файл шаблону/темплейту (template .phtml file)

Створіть файл:

app/code/<VendorName>/<ModuleName>/view/frontend/templates/some-name.phtml

помістіть у нього код:

<h1><?php echo $block->escapeHtml($block->getWelcomeText()) ?></h1>

З міркувань безпеки пропускайте вивід тексту через  escapeHtml метод. Це вбереже сайт від HTML ін'єкцій.

 

3. Поєднайте PHP class блоку та файл темплейту у лейаут-файлі.

Створіть файл:

app/code/<VendorName>/<ModuleName>/view/frontend/layout/<rute_id>_<controller_name>_<action_name>.xml

помістіть у нього код:

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="VendorName\ModuleName\Block\SomeName" name="some.block.name" template="VendorName_ModuleName::some-name.phtml" />
        </referenceContainer>
    </body>
</page>

<rute_id>_<controller_name>_<action_name> - назва лейаут-файла, повинна складатися лише із нижнього регістру символів та містити id маршрутизатора, назву контролера та назву екшена.
layout
 - атрибут , що вказує на тип макету сторінки. Доступними зазамовчуванням є такі типи: 1column, 2columns-left, 2columns-right, 3columns, empty. Поекспериментуйте з ними - задайте різні типи лейаутів, порівняйте їх.
content - назва контейнета, у який буде поміщено блок.

Памятайте, що після зміни та збереження лейаут файлу слід очистити Layouts Cache, якщо він увімкнений. Виконайте CLI команду:

php bin/magento cache:clean layout

  

4. Викличте завантаження та рендиринг лейату у контролері.

Відредагуйте файл:

app/code/<VendorName>/<ModuleName>/Controller/<ControllerName>/<ActionName>.php 

помістіть у метод execute наступний код:

$this->_view->loadLayout();
$this->_view->renderLayout();

Ось як це має виглядати:

<?php
namespace VendorName\ModuleName\Controller\ControllerName;
class ActionName extends \Magento\Framework\App\Action\Action
{
    public function execute()
    { $this->_view->loadLayout();
       $this->_view->renderLayout();     }
}

5. Відвідайте оновленну сторінку.

Перейдіть за посиланням:
http://your-magento-store.com/path/сontrollerName/actionName/

Перед вами відкриється сторінка:

У прикладах ми створюватимемо модуль Magefan_Faq для поширених запитань (FAQ - Frequently Asked Question(s)). Отримана структура модуля виглядатиме так:

├── app
│   └── code
│       └── Magefan
│          └──
Faq

│              ├──
Block
│              │    └──Index.php
│              │

│              ├── etc

│              │   ├──
module.xml
│              │   └──frontend
│              │      └── routes.xm
│              │
│              ├──
registration.php
│              ├── Controller
│              │   └── Index  // controller_name
│              │       └── Index.php // action_name
│              │
│              └──
view
│                 └── frontend
│                     ├── layout
│                     │   └── magefan_faq_index_index.xml
│                     └── templates
│                        └── index.phtml

На GitHub можна переглянути змінені файли модуля Magefan_Faq.