В попередніх статтях ми розібрали основи Magento: файли шаблону та файли макету, а в цій статті приділимо більше уваги самій логіці створення кастомних файлів блоків та макетів. Зокрема, ми розглянемо як працюють файли розмітки і блоків в Magento, і подивимось на рендеринг файлів макету.
Файли макету (розмітки) впливають на рендеринг сторінок в інтерфейсі Magento. Ці XML-файли знаходяться за адресою app > design > frontend > [пакет тем] > [ваша тема] > layout. В цій папці можуть знаходитись файли макету для будь-якого існуючого модуля. Наприклад, модуль, що відноситься до всіх операцій з клієнтами, має власний файл макета — customer.xml
, модуль каталогу — catalog.xml
і т.д. Універсальний файл макету – це local.xml
в папці активної теми, в якому, в основному, змінюють налаштування для будь-яких системних модулів.
Відкрийте для прикладу файл макету customer.xml
в системній папці за адресою app > design > frontend > base > default > layout. У цьому файлі ви побачите, що всі блоки огорнуті основним тегом <layout>
. Також в ньому є кілька різних тегів <{tag}>
, що містять різні блоки.
<!-- New customer registration (Реєстрація нового користувача) --> <customer_account_create translate="label"> <label>Customer Account Registration Form</label> <!-- Mage_Customer --> <remove name="right"/> <remove name="left"/> <reference name="root"> <action method="setTemplate"><template>page/1column.phtml</template></action> </reference> <reference name="content"> <block type="customer/form_register" name="customer_form_register" template="customer/form/register.phtml"> <block type="page/html_wrapper" name="customer.form.register.fields.before" as="form_fields_before" translate="label"> <label>Form Fields Before</label> </block> </block> </reference> </customer_account_create>
Розглянемо основні моменти в цьому файлі.
Handle (“Зачіпка”)
“Зачіпка” – це основна сутність, за допомогою якої Magento ідентифікує, який блок завантажувати, коли викликається певний модуль. <customer_account_create>
— це “зачіпка” конкретного модуля (Mage_Customer). А дана “зачіпка” спрацьовує, коли хтось відкриває сторінку реєстрації клієнта.
Кожна зачіпка обробляє специфічний блок. Деякі з файлів макетів містять <default>
“зачіпки”. Специфічні “зачіпки” модуля рендерять вкладені блоки лише тоді, коли цей модуль рендериться браузером, в той час як “зачіпки” за замовчуванням вантажаться на більшості сторінок. Специфічні “зачіпки” створюються в налаштуваннях модуля (у файлі config.xml
), а також в контролері модуля.
<block>
Всередині “зачіпок” є різні блоки, які вказують на файл шаблону, що має бути завантажений, коли цей блок викликається. Блоки бувають двох типів:
В прикладі вище наведено два структуровані блоки: “root” і “content”, а блоки контенту – це те, що міститься всередині цих блоків.
Блоки контенту містять такі атрибути як, наприклад:
customer/form_register
– це посилання на клас Mage_Customer_Block_Form_Register
, що розташований за адресою app/code/core/Mage/Customer/Block/Form/Register.php
За типом блоку достатньо легко віднайти потрібний клас.phtml
файлу і шлях до нього відносно папки template активної теми (в даному прикладі app/design/frontend/[назва пакету тем]/ [назва теми]/template/customer/form/register.phtml)
<reference>
Тег <reference>
використовується для розширення блоків, що вже існують. В цьому випадку, ми розширили блок основного контенту сторінки (<reference name="content">
) і вставили в нього потрібний блок.
<remove>
Тег <remove>
використовується для видалення конкретного блоку. В прикладі-коді цей тег використовується, щоб видалити праву і ліву колонки (тобто, блоки з name="left"
і name="right"
). Щоб видалити потрібний блок використовуйте наступний синтаксис <remove name="ім'я блоку для видалення"/>
.
Дочірній <block>
Коли ви вкладаєте один блок в інший, цей обгорнутий блок називається дочірнім. Всякий раз, коли батьківський блок викликається за допомогою модуля, автоматично викликається і дочірній блок.
<block type="core/template" name="parent" template="parent.phtml"> <block type="core/template" name="child" template="child.phtml"/> </block>
Ви також можете окремо викликати дочірній блок з наведеним нижче синтаксисом у файлі-шаблоні
echo $this->getChildHtml('дочірній-блок');
кореневий (root) <block>
Відкрийте файл макету page.xml
, і ви знайдете <root>
блок, що виглядає як в прикладі нижче
<block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">
Magento починає рендеринг сторінки з кореневого root блоку. Всі інші блоки є дочірніми блоками відносно кореневого блоку. Кореневий блок визначає структуру сторінки. Так, в даному прикладі, по дефолту виставлений шаблон 3columns.phtml
, але це можна змінити, наприклад, на шаблон з однією колонкою (1column.phtml
) за допомогою файлу розмітки теми local.xml
.
Для будь-якої конкретної сторінки ви можете додати будь-які CSS і/або JavaScript файли через теги макету, як показано нижче:
<customer_account_create> <reference name="head"> <action method="addCss"><stylesheet>css/styles.css</stylesheet></action> <action method="addJs"><script>varien/js.js</script></action> </reference> </customer_account_create>
З цього прикладу видно, що ми додали файл CSS і JavaScript-файл всередині секції <head>
на сторінку створення акаунту клієнта.
Класи Блоків використовуються для визначення функцій, які є специфічними для конкретного блоку. Файли класу блоку знаходяться в папці app > code > local/community/core > [простір імен модуля] > [назва модуля] > Block. Ці файли містять функції, які ми можемо використовувати безпосередньо з ключовим словом $this
в блоці конкретного файлу шаблону. Давайте розглянемо один приклад, щоб зрозуміти класи блоків.
Перейдіть до файлу review.xml
, що розташований в папці app > design > frontend > base > default > layout та знайдіть представлений нижче код:
<!-- Customer account home dashboard layout (Макет домашньої сторінки акаунту клієнта ) --> <customer_account_index> <!-- Mage_Review --> <reference name="customer_account_dashboard"> <block type="review/customer_recent" name="customer_account_dashboard_info1" as="info1" template="review/customer/recent.phtml"/> </reference> </customer_account_index>
Тут ви можете побачити блок review/customer_recent
із шаблоном recent.phtml
. Перейдіть до app > design > frontend > base > default > template > review > customer і відкрийте файл recent.phtml
.
На початку цього файлу ви можете побачити дві функції, що викликаються за допомогою ключового слова $this
. Це $this->getCollection()
та $this->count()
. Ці функції визначені в файлі Recent.php
свого класу блока, що знаходиться в папці app > code > core > Mage > Review > Block > Customer
.
Так, блок type="review/customer_recent"
відноситься до класу блоку Mage_Review_Block_Customer_Recent
, що визначений у файлі Recent.php
. Незалежно від функцій, які ви визначаєте в цьому класі, ви можете безпосередньо використовувати їх у відповідному файлі шаблону із ключовим $this
.
І, нарешті, нам залишилося розібратися із налаштуванням кастомного Макету і блоків для модуля. Отже, для початку створіть тестовий модуль “Hello World” в локальному середовищі розробки.
Розгорніть наступну структуру модуля:
Для створення файлу макета, необхідно спочатку створити файл класу блока. Перед тим, як додати файл класу, ми повинні оголосити в нашому модулі, що ми включаємо файли блоку. Тож перейдіть до app > code > local > Test > Helloworld > etc, створіть файл налаштувань модуля config.xml
і додайте в нього наступні рядки коду:
<?xml version="1.0"?> <config> <modules> <Test_Helloworld> <version>0.1.0</version> <!-- Версія модуля --> </Test_Helloworld> </modules> <frontend> <routers> <!-- Додаємо контролер, щоб перевірити роботу модуля --> <helloworld> <use>standard</use> <args> <module>Test_Helloworld</module> <frontName>helloworld</frontName> </args> </helloworld> </routers> <layout> <updates> <helloworld> <file>helloworld.xml</file> <!-- Назва нашого файлу макету --> </helloworld> </updates> </layout> </frontend> <global> <blocks> <helloworld> <class>Test_Helloworld_Block</class> </helloworld> </blocks> </global> </config>
Тепер перейдіть до app > code > local > Test > Helloworld > Block і створіть файл Helloworld.php
, що містить такі рядки коду
<?php class Test_Helloworld_Block_Helloworld extends Mage_Core_Block_Template { public function myTestFunction() { echo "Привіт, світ!"; } }
Тут ми оголосили клас Test_Helloworld_Block_Helloworld
, що містить функцію myTestFunction
, яку ми можемо викликати прямо з нашого файлу шаблона.
Не забудьте включити створений модуль:
додайте файл Test_Helloworld.xml
з наведеним нижче контентом у папку app/etc/modules/
<config> <modules> <Test_Helloworld> <active>true</active> <codePool>local</codePool> </Test_Helloworld> </modules> </config>
Перейдіть до app > design > frontend > [назва пакету тем] > [назва вашої теми] > layout і створіть файл helloworld.xml
, який містить такі рядки коду
<?xml version="1.0" encoding="UTF-8"?> <layout version="0.1.0"> <helloworld_index_index> <reference name="content"> <block type="helloworld/helloworld" name="helloworld_block" template="helloworld/helloworld-shablon.phtml" /> </reference> </helloworld_index_index> </layout>
<helloworld_index_index>
– це «зачіпка»; спрацьовує для контролера IndexController при відкритті в браузері посилання {домен}/helloworld/index/
. Назва «зачіпки» (частина лінка) вказується в налаштуваннях модуля в секції <routers><frontName>helloworld</frontName></routers>
Створіть папку для шаблона в app > design > frontend > [назва пакету тем] > [назва вашої теми] > template > helloworld і створіть в ній файл-шаблон helloworld-shablon.phtml
. У цьому файлі ми будемо викликати функцію myTestFunction
, яку ми оголосили в нашому класі блоку.
<?php echo $this->myTestFunction(); ?>
Тепер додамо контролер для перевірки роботи модуля
Створіть файл IndexController.php
в папці app > code > local > Test > Helloworld > controllers
із наступним змістом:
<?php class Test_Helloworld_IndexController extends Mage_Core_Controller_Front_Action { public function indexAction() { $this->loadLayout(); $this->renderLayout(); } }
Якщо у вас включений кеш, то оновіть його. Тепер для перевірки відкрийте сторінку http://{ваш-домен}/helloworld/index/
(або ж просто http://{ваш-домен}/helloworld/
). Якщо ми все зробили правильно, то ви побачите в результаті показ контенту із шаблона helloworld-shablon.phtml
.
Ось як працюють макети в Magento. Структура макетів Magento спочатку видається трохи дивною та незрозумілою, але як тільки ви починаєте розбиратися з макетами, ви легко зрозумієте ідею, що стоїть за нею.
Не соромтеся коментувати і ставити будь-які питання, що відносяться до цього конкретного посту.
Стаття адаптована, на основі перекладу спеціально для сайту Tuts+
Якщо хочеш пізнати людину, не слухай, що про неї говорять інші, послухай, що вона говорить…
Вибачення — не означає, що ти не правий, а інша людина має рацію. Це всього…
Атмосферу паперової книги, запах свіжого чорнила і паперу, що трохи залежався, складно замінити гаджетами. Але…