В первой части этой серии мы изучили основы разработки модулей Magento, включая структуру каталогов Magento, структуру пользовательских модулей, и создали базовый модуль «Hello World», чтобы понять, как работают контроллеры в Magento.
В этой статье мы узнаем, как создавать файлы блоков и макетов. В частности, мы рассмотрим, как работают файлы макетов и файлы блоков в Magento, и рассмотрим рендеринг файлов макетов.
Ищете быстрое решение?
Если вы ищете быстрое решение, на Envato Market есть отличная коллекция тем и шаблонов Magento . Это отличный способ быстро собрать коллекцию высококачественных низкополигональных изделий для вашего проекта.
Вы также можете получить персональную помощь, наняв одного из поставщиков услуг Magento в Envato Studio.
Но, с учебником! Сначала мы увидим, что такое файлы макетов и блоков и как они полезны при рендеринге интерфейсных страниц в Magento, а затем мы увидим, как мы можем включить их в наш пользовательский модуль.
Что такое файл макета?
Как следует из названия, файлы макетов полезны при рендеринге первых страниц Magento. Файлы макета — это файлы XML, которые находятся в приложении> дизайн> интерфейс> ваш интерфейс> тема> макет . Здесь вы можете видеть, что существует много файлов макетов для любого данного модуля. Каждый модуль Magento имеет свои собственные файлы макетов, так же как и модуль customer.xml с customer.xml файл макета, модуль каталога имеет catalog.xml файл макета и т. д. Эти файлы макета содержат структурные блоки и блоки содержимого .
Если вам интересно, зачем Magento нужны эти блоки, вы можете узнать больше об этом в первой части серии.
Давайте копать больше в файлы макетов
Давайте углубимся в файлы макетов, рассмотрев один пример. Зайдите в приложение> дизайн> интерфейс> база> макет и откройте customer.xml файл. Здесь все блоки обернуты вокруг основного <layout> тег. Вы можете увидеть другой <tag> который содержит определенные блоки.
Смотрите ниже фрагмент:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
<!—
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>
|
Ручка
Дескрипторы — это основная сущность, с помощью которой Magento определяет, какой блок загружать при вызове определенного модуля. <customer_account_create> специфичный для модуля дескриптор Этот дескриптор срабатывает, когда кто-то открывает страницу регистрации клиента.
Каждый обрабатывает вложенный в контент блок, специфичный для данной страницы. Некоторые файлы макетов содержат <default> ручка. На этом этапе вы можете спросить о разнице между специфическими дескрипторами модуля и дескрипторами по умолчанию. Короче говоря, специфичные для модуля дескрипторы отображают блоки внутри него только тогда, когда этот модуль отображается в браузере, тогда как дескриптор по умолчанию загружается на большую часть страницы.
<блок>
Внутри дескриптора находятся различные блоки, которые определяют файл шаблона, который будет отображаться при вызове этого блока. Блоки бывают двух типов:
- Структурные блоки
- Блоки контента
В нашем файле макета мы определяем только блоки контента и затем мы обертываем их в S блоков Trustrur . Например, если кто-то вызывает страницу регистрации клиента, и мы хотим загрузить ее слева, справа, в контент или нижний колонтитул, мы заключаем этот блок в соответствующий блок структурирования. Здесь мы обернули два блока внутри блока «content», который является блоком структурирования.
Блоки содержат атрибуты, подобные следующим:
- Тип определяет классы блоков, в которых мы можем определить различные функции
- имя определяет уникальное имя конкретного блока, чтобы другие блоки могли ссылаться на существующий блок по имени и расширять его
- До / после — это атрибуты, которые мы можем установить, которые позволяют нам определять положение нашего блока внутри блока структурирования.
- Шаблон определяет фактическое
phtmlфайлаphtmlи путь, по которому идет наш код HTML и PHP. - Действие позволяет нам запускать любое действие, такое как загрузка JavaScript и все, используя этот атрибут.
- атрибут as в основном используется для структурных блоков
<ссылка>
Тег <reference> используется для расширения уже существующих блоков. В этом случае мы расширили блок контента и вставили в него наш собственный блок. Вы должны использовать правильное имя блока, которое хотите расширить.
<удалить>
Тег <remove> используется для удаления определенного блока. Например, скажем, что на странице регистрации вашей учетной записи вы не хотите отображать правый и левый столбцы. В этом случае вы можете просто удалить этот блок с помощью следующего синтаксиса <remove name="your block name">.
Детский <блок>
Когда вы заключаете один блок в другой, этот блок называется дочерним блоком. Всякий раз, когда наш родительский блок вызывается нашим модулем, дочерний блок вызывается автоматически.
|
1
2
3
|
<block type=’core/template’ name=’parent’ template=’parent.phtml’>
<block type=’core/template’ name=’child’ template=’child.phtml’/>
</block>
|
Вы также можете вызывать дочерний блок отдельно с помощью синтаксиса ниже в вашем файле шаблона
echo $this->getChildHtml('child');
корень <блок>
Откройте page.xml файл макета, вы найдете <root> блок, который выглядит как ниже
|
1
|
<block type=»page/html» name=»root» output=»toHtml» template=»page/3columns.phtml»>
|
Magento начинает рендеринг из корневого блока. Все остальные блоки являются дочерними блоками корневого блока. Корневой блок определяет структуру страницы. Здесь вы можете видеть, что в настоящее время он установлен на 3columns.phtml , вы можете изменить его на 1column.phtml , 2columns-right.phtml или 2columns-left.phtml.
Добавление CSS и JavaScript в макет XML
Для любой конкретной страницы вы можете добавить файлы CSS и JavaScript в тег макета следующим образом:
|
1
2
3
4
5
6
|
<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 и найдите следующую строку кода:
|
01
02
03
04
05
06
07
08
09
10
11
12
|
<!—
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 блока review/customer_recent которые ссылаются на шаблон recent.phtml . Перейдите в приложение> дизайн> внешний интерфейс> база> по умолчанию> шаблон> обзор> клиент и откройте recent.phtml .
В этом файле вы можете увидеть две функции, вызываемые с помощью ключевого слова $this . Это $this->getCollection() и $this->count() . Эти функции определены в файле классов их recent.php файлов recent.php который находится в app> code> core> Mage> review> Block> customer каталог.
Здесь type = "review/customer_recent" блока type = "review/customer_recent" относится к Mage_Review_Block_Customer_Recent блоков Mage_Review_Block_Customer_Recent который определен в файле recent.php . Какие бы функции вы ни определяли в этом классе, вы можете напрямую использовать его в соответствующем файле шаблона с помощью $this .
Создание пользовательского макета модуля и файлов блоков
Наконец, мы получили специальный модуль «Hello World» с контроллером. Здесь мы создаем файл макета нашего пользовательского модуля. Итак, давайте создадим его.
Чтобы создать файл макета, нам нужно сначала создать файл класса блока. Прежде чем добавить файл класса, нам нужно сообщить нашему модулю, что мы включаем файлы блоков. Перейдите в приложение> code> local> Chiragdodia> Mymodule> и т. Д.> config.xml и добавьте следующую строку кода:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
<frontend>
<layout>
<updates>
<mymodule>
<file>mymodule.xml</file> <!— Our layout file name—>
</mymodule>
</updates>
</layout>
</frontend>
<global>
<blocks>
<mymodule>
<class>Chiragdodia_Mymodule_Block</class>
</mymodule>
</blocks>
</global>
|
Конечный файл XML содержит следующие строки кода:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<?xml version=»1.0″?>
<config>
<modules>
<Chiragdodia_Mymodule>
<version>0.1.0</version> <!— Version of module —>
</Chiragdodia_Mymodule>
</modules>
<frontend>
<routers>
<mymodule>
<use>standard</use>
<args>
<module>Chiragdodia_Mymodule</module>
<frontName>mymodule</frontName>
</args>
</mymodule>
</routers>
<layout>
<updates>
<mymodule>
<file>mymodule.xml</file> <!— Our layout file name—>
</mymodule>
</updates>
</layout>
</frontend>
<global>
<blocks>
<mymodule>
<class>Chiragdodia_Mymodule_Block</class>
</mymodule>
</blocks>
</global>
</config>
|
Создать файл класса блока
Далее, перейдите в приложение> код> локальный> Chiragdodia> Mymodule> Блок и создайте файл Mymodule.php который содержит ниже строки кода
|
1
2
3
4
5
6
7
8
|
<?php
class Chiragdodia_Mymodule_Block_Mymodule extends Mage_Core_Block_Template
{
public function myfunction()
{
return «Hello tuts+ world»;
}
}
|
Здесь мы объявили класс Chiragdodia_Mymodule_Block_Mymodule который содержит функцию myfunction которую мы можем вызвать непосредственно из нашего файла шаблона макета.
Создать XML-файл макета
Перейдите в приложение> дизайн> внешний интерфейс> по умолчанию> по умолчанию> макет и создайте файл mymodule.xml который содержит строки кода ниже
|
1
2
3
4
5
6
7
8
|
<?xml version=»1.0″?>
<layout version=»0.1.0″>
<mymodule_index_index>
<reference name=»content»>
<block type=»mymodule/mymodule» name=»mymodule» template=»mymodule/mymodule.phtml» />
</reference>
</mymodule_index_index>
</layout>
|
Создать файл шаблона
Перейдите в приложение> дизайн> внешний интерфейс> по умолчанию> по умолчанию> шаблон и создайте файл mymodule.phtml . В этом файле мы будем вызывать функцию myfunction которую мы объявили в нашем классе блоков.
|
1
2
3
|
<?php
echo $this->myfunction();
?>
|
Если до сих пор все правильно, вы увидите вывод с тремя колонками, перейдя по URL yoursite.com/index.php/mymodule/index.
В некоторых версиях Magento темы по умолчанию не содержат макетов и шаблонов каталогов. В этом случае вы можете создать свой макет и файл шаблона в app> design> frontend> base каталог.
Так работают макеты в Magento. В предыдущей статье мы создали простой модуль «Hello World», в этой статье мы создали его с помощью файла макета. Структура макета Magento поначалу немного сложна для понимания, но как только вы начнете с ней работать, вы легко поймете, что стоит за ней.
В этом посте я приложил демонстрационные файлы модуля, которые мы создали до сих пор. Не стесняйтесь комментировать и задавать любые вопросы, которые могут у вас возникнуть по этой конкретной проблеме.