Categories: Мадженто 2

Як створити вигляд (view) для модуля в Magento 2

У сьогоднішньому уроці ви дізнаєтеся, як створити View (вигляд або представлення) та його дію в Magento 2. У попередньому уроці ми розглянули питання створення контролера для Magento 2, а сьогодні ви побачите, як зв’язати вигляд (шаблон) з нашою дією! Ми будемо використовувати заготовки з попереднього уроку.

Додайте папку view в корінь модуля

Створіть папку view в корені модуля /Sebweo/Test. Саме ця папка буде містити весь макет (файли макета для Блоку, який буде відображатися на сайті, і шаблони). Створіть у цій папці каталог frontend, в якому створіть 2 папки: layout (для макетів) і templates (для файлів шаблонів).

Додайте phtml файл шаблону

Створіть файл test_view.phtml в папці /Sebweo/Test/view/frontend/templates/ з таким контентом:

<div class="test_block">
 <p>Тестовий блок</p>
</div>

Тут ми будемо відображати html-контент, який буде доступний в дії (action) testuvannya/perevirka/index (див. попередній урок).

Додайте файл макета для дії

Тепер ми зв’яжемо нашу дію з нашим контролером і шаблоном. Для цього створіть файл testuvannya_perevirka_index.xml (зверніть увагу на назву <id_маршрута>_<назва_контролера>_<назва_дії>) в каталозі /Sebweo/Test/view/frontend/layout/, з таким вмістом:

<?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">
 <body>
  <referenceContainer name="content">
    <block class="Magento\Framework\View\Element\Template" name="testBlock" template="Sebweo_Test::test_view.phtml"></block>
  </referenceContainer>
 </body>
</page>

Ім’я файлу дуже важливе. Для маршруту (URL) testuvannya/perevirka/index ми повинні назвати наш файл макета testuvannya_perevirka_index.xml, щоб Magento 2 автоматично отримав наш файл макета з дії. Вам просто потрібно замінити “/” в URL дії на “_“, і ви отримаєте ім’я файлу макета.

Для чого потрібен цей файл?

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

Ця інструкція повідомляє Magento 2, що ми оновлюємо макет цієї дії за допомогою шаблону 1column.phtml.

<body>
 <referenceContainer name="content">
  <block class="Magento\Framework\View\Element\Template" name="testBlock" template="Sebweo_Test::test_view.phtml"></block>
 </referenceContainer>
</body>

Нод referenceBlock дозволяє Magento 2 отримати блок з відповідним ім’ям (тут content).

Нод block дозволяє Magento 2 додавати новий Блок, тут цей блок буде використовувати логічний клас Magento\Framework\View\Element\Template, носитиме ім’я testBlock, і йому буде присвоєно файл шаблону test_view.phtml, який знаходиться в модулі Sebweo_Test.

Цей блок XML коду дозволяє вам створити блок в області content (вмісту) веб-сайту і використовувати файл-шаблон test_view.phtml, який ми створили раніше.

Зверніть увагу, що тут ми використовуємо клас Magento\Framework\View\Element\Template, який є основним класом, що дозволяє відображати .phtml шаблон без спеціальної логіки.

Відредагуйте дію, щоб отримати його макет

Magento 2 для отримання файлу макета, потрібна його завантаження за допомогою методу loadLayout(). А відображає він його за допомогою функції renderLayout().

Відредагуйте файл /Sebweo/Test/Controller/Perevirka/Index.php наступним чином:

namespace Sebweo\Test\Controller\Perevirka;
class Index extends \Magento\Framework\App\Action\Action
{
 public function execute()
 {
  $this->_view->loadLayout();
  $this->_view->renderLayout();
 }
}

І тепер ви можете отримати доступ до вашого шаблону через URL-адресу, яка описана в попередньому уроці: {DOMEN}/testuvannya/perevirka/index/.

Тепер ви знаєте, як додати вигляд (view), пов’язаний з дією вашого контролера Magento 2. Прийміть наші вітання!

До наступних уроків.