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

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

Внутри «зацепок» есть разные блоки, которые указывают на файл шаблона, который должен быть загружен, когда этот блок вызывается. Блоки бывают двух типов:

  1. Структурированные Блоки
  2. Блоки Контента

 

В примере выше есть два структурированных блока: «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+