Кастомные Макеты и Шаблоны в Magento

11/03/2017 Обновлено: 23.03.2017

В предыдущих статьях мы разобрали основы 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», а блоки контента — это то, что находится внутри этих блоков.

Блоки контента содержат такие атрибуты как, например

type — определяет классы блоков, в которых мы можем задействовать различные функциональные возможности. Это URI Сгруппированного Имени Класса. В данном примере type customer/form_register – это ссылка на класс Mage_Customer_Block_Form_Register, расположенного по адресу app/code/core/Mage/Customer/Block/Form/Register.php По типу блока достаточно легко найти нужный класс.
name определяет уникальное имя конкретного блока для того, чтобы другие блоки могли делать ссылки на существующий блок с его именем и расширять его
before/after — с помощью этих атрибутов мы можем установить позицию нашего блока относительно других внутри структурированного блока.
template определяет фактическое имя phtml файла и путь к нему относительно папки template активной темы (в данном примере app/design/frontend/[название пакета тем]/[название темы]/template/customer/form/register.phtml)
action позволяет нам запускать любое действие (например, загружать JavaScript, назначать шаблон и т.п.)
as – этот атрибут, в основном, используется для структурированных блоков

<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 через 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/Block
app/code/local/Test/Helloworld/controllers
app/code/local/Test/Helloworld/etc

Для создания файла макета, необходимо сначала создать файл класса блока. Перед тем, как добавить файл класса, мы должны объявить в нашем модуле, что мы включаем файлы блока. Поэтому перейдите к 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>

Создаем XML файл Макета

Перейдите к 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+

Теги: Magento