В предыдущих статьях мы разобрали основы 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+
Очень многие недооценивают то, что у них есть, и переоценивают то, чего у них нет…
Успешный бизнес в 2025 году немыслим без стабильной ИТ-инфраструктуры. От корпоративного сайта до CRM-системы все…
WordPress годами был непревзойденным "монолитом": он отвечал и за удобную админ-панель, и за хранение данных,…
В мире веб-серверов часто говорят о противостоянии Nginx vs Apache. Но что, если бы я…