Як створити вигляд (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. Прийміть наші вітання!
До наступних уроків.
Останні пости
Як вибрати ідеальний ноутбук: Повний гайд
Вибір ноутбука може бути складним завданням у світі, де ринок переповнений варіантами на будь-який смак… Читати далі
Томас Едісон
Наш великий недолік в тому, що ми занадто швидко опускаємо руки. Найбільш діючий метод досягти… Читати далі
Найкрасивіші та найбільш вражаючі мости з усього світу (ТОП-10)
Міст — це щось більше, ніж просто споруда, яка поєднує два береги. Для того, щоб… Читати далі
Соломон
Життя нас вчить, що свою пару ми пізнаємо, коли розлучаємося, своїх братів ми пізнаємо, коли… Читати далі
Річард Бах
Жодне бажання не дається тобі окремо від сили, що дозволяє його здійснити. Хоча, можливо, для… Читати далі