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. Прийміть наші вітання!

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

 

Recent Posts

Які безкоштовні конструктори сайтів будуть кращими для розробки сайту?

Веб-майстрам початківцям буває складно обрати конструктор сайтів, який би повністю влаштував їх по співвідношенню зручності… Read More

28/07/2021

Володимир Висоцький

Я розумію, як це смішно Шукати відповідь в очах, В очах, яким все рівно, Чи… Read More

25/07/2021

Брюс Лі

Немає такого вислову "Я не можу!" Зумів один, зможуть й інші. Не зміг ніхто -… Read More

21/07/2021

Йоганн Вольфганг фон Гете

Навіщо у людини в серці доброта, І мудрість розуму, й правиці щедрота, Коли неправда навкруги… Read More

12/07/2021

Який бойлер використовувати для кухні

Незамінним пристроєм при відключенні гарячої води є бойлер для кухні, що дозволяє з комфортом мити… Read More

08/07/2021

Алі ібн Абу Таліб

Краще зберігати мовчання до тих пір, поки не запитають, ніж говорити до тих пір, поки… Read More

07/07/2021