Як створити вигляд (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. Прийміть наші вітання!

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