Коварная война россии против Украины. Ориентировочные потери врага
(по состоянию на 05.07.2022)
36350
солдат
217
самолетов
187
вертолетов
1594
танков
3772
ББМ
806
артиллерия
105
ПВО
247
РСЗО
2634
машин
15
корабли и катера
Кастомные Макеты и Шаблоны в Magento

Кастомные Макеты и Шаблоны в 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+

 

Добавить комментарий

Ваш адрес email не будет опубликован.