Користувацькі Макети і Шаблони в Magento

В першій частині цієї серії, ми вивчили основи розробки модулів Magento, включаючи структуру каталогу Magento, структуру користувальницького модуля, і ми створили базовий модуль "Hello World" для того, щоб зрозуміти, як працюють контролери в Magento.

В цій статті ми дізнаємося, як створювати файли блоків та макетів. Зокрема, ми розглянемо як працюють файли розмітки і блоків в Magento, і подивимось на рендеринг файлів макету.

Шукаєте Швидкого Рішення?

Якщо ви шукаєте швидке рішення, існує велика колекція тем і шаблонів Magento на Ринку Envato. Це відмінний спосіб швидко створити колекцію високоякісних елементів для свого проекту.

Ви також можете отримати індивідуальну допомогу, найнявши одного з постачальників послуг Magento на Envato Studio.

Але повернемось до навчального матеріалу! По-перше, ми побачимо, що існують файли макету і блоків, і яка від них користь при візуалізації інтерфейсних сторінок в Magento, і тоді ми побачимо, як ми можемо включити їх в наш користувальницький модуль.

Що Таке Файл Макету?

Як випливає із назви, файли макету (розмітки) корисні при рендерингу сторінок інтерфейсу Magento. Файли макету - це XML-файли, що знаходяться за адресою app > design > frontend > ваш пакет тем > ваша тема > layout. Тут ви можете побачити, що присутньо багато файлів макету для будь-якого існуючого модуля. Кожен модуль Magento має свої власні файли макету, наприклад, як модуль клієнтів має файл макета customer.xml, модуль каталогу має файл макета catalog.xml і т.д. Ці файли розмітки містять структурні блоки і блоки контенту.

Якщо вам цікаво, навіщо Magento потрібні ці блоки, ви можете дізнатися більше про це в першій частині серії.

Давайте Зануримось Глибше в Файли Макету

Давайте зануримось глибше в файли макета, подивившись на один приклад. Перейдіть в app > design > frontend > base > layout та відкрийте файл customer.xml. Тут всі блоки огорнуті основним тегом <layout>. Також ви можете побачити різні <tag>, що містять різні блоки.

Подивіться на приклад нижче:

1

<!--

2

New customer registration

3

-->

4

5

    <customer_account_create translate="label">

6

        <label>Customer Account Registration Form</label>

7

        <!-- Mage_Customer -->

8

        <remove name="right"/>

9

        <remove name="left"/>

10

11

        <reference name="root">

12

            <action method="setTemplate"><template>page/1column.phtml</template></action>

13

        </reference>

14

        <reference name="content">

15

            <block type="customer/form_register" name="customer_form_register" template="customer/form/register.phtml">

16

                <block type="page/html_wrapper" name="customer.form.register.fields.before" as="form_fields_before" translate="label">

17

                    <label>Form Fields Before</label>

18

                </block>

19

            </block>

20

        </reference>

21

    </customer_account_create>

Handle ("Зачіпка")

"Зачіпка" - це основна сутність, за допомогою якої Magento ідентифікує, який блок завантажувати, коли викликається певний модуль. <customer_account_create> - це "зачіпка" конкретного модуля. Ця "зачіпка" спрацьовує, коли хтось відкриває сторінку реєстрації клієнта.

Кожна зачіпка обробляє специфічний наповнений контентом блок для сторінки. Деякі з файлів макетів містять <default> "зачіпки". На цьому етапі, ви можете запитати про різницю між спеціальними "зачіпками" модуля і "зачіпками" за замовчуванням. Коротше кажучи, специфічні "зачіпки" модуля рендерять вкладені блоки лише тоді, коли цей модуль рендериться браузером, в той час як "зачіпки" за замовчуванням вантажаться на більшості сторінок.

<block>

Всередині "зачіпок" є різні блоки, які вказують на файл шаблону, що має бути завантажений, коли цей блок викликається. Блоки бувають двох типів:

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

В нашому файлі макета ми визначаємо лише Блоки Контенту, і потім огортаємо їх в Структурованих Блоках. Наприклад, якщо хтось вантажить сторінку реєстрації клієнта, і ми хочемо, щоб блок форми реєстрації вантажився чи то в лівій колонці, чи правій, чи в полі основного контенту, чи у футері, тоді ми вміщуємо цей блок у відповідному структурованому блоці. В прикладі наведено два огорнуті блоки всередині блоку "content", що є структурованим блоком.

Блоки містять такі атрибути, як, наприклад:

1. type визначає класи блоків, в яких ми можемо визначити різні функціональні можливості
2. name визначає унікальне ім'я конкретного блоку з тим, щоб інші блоки могли робити посилання на існуючий блок за його ім'ям і розширити його
   
3. before/after - це атрибути, за допомогою яких ми можемо встановити позицію нашого блоку відносно інших всередині структурованого блоку.
4. template визначає фактичне ім'я phtml файлу і шлях, по якому наш HTML і PHP код вантажиться
5. action дозволяє нам запускати будь-яку дію, як-то завантаження JavaScript, і все за допомогою цього атрибута.
6. as атрибут в основному використовується для структурованих блоків

<reference>

Тег <reference> використовується для розширення блоків, що вже існують. В цьому випадку, ми розширили блок контенту і вставили наш власний блок в нього. Ви повинні використовувати правильне ім'я блоку, який хочете розширити.

<remove>

Тег <remove> використовується для видалення конкретного блоку. Наприклад, використайте його на сторінці реєстрації облікового запису, якщо не хочете, щоб відображалися права і ліва колонки. В цьому випадку, ви можете просто видалити цей блок використовуючи наступний синтаксис <remove name="ім'я вашого блоку">.

Дочірній <block>

Коли ви вкладаєте один блок в інший блок, цей обгорнутий блок називається дочірнім блоком. Всякий раз, коли наш батьківський блок викликається за допомогою нашого модуля, автоматично викликається і дочірній блок.

1

<block type='core/template' name='parent' template='parent.phtml'>

2

<block type='core/template' name='child' template='child.phtml'/>

3

</block>

Ви також можете окремо викликати дочірній блок з наведеним нижче синтаксисом в своєму файлі шаблона
echo $this->getChildHtml('дочірній-блок');

кореневий (root) <block>

Відкрийте файл макету page.xml, і ви знайдете <root> блок, що виглядає як в прикладі нижче

1

 <block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">

Magento починає рендеринг з кореневого root блоку. Всі інші блоки є дочірніми блоками відносно кореневого блоку. Кореневий блок визначає структуру сторінки. Так, ви можете побачити, що він вже налаштований на 3columns.phtml, ви можете змінити це на 1column.phtml, 2columns-right.phtml або 2columns-left.phtml.

Додавання CSS і JavaScript через XML Макет

Для будь-якої конкретної сторінки ви можете додати CSS і JavaScript файли через теги макету, як показано нижче:

1

<customer_account_create>

2

 <reference name='head'>

3

  <action method="addCss"><stylesheet>css/styles.css</stylesheet></action>

4

  <action method="addJs"><script>varien/js.js</script></action>

5

 </reference>

6

</customer_account_create>

Тут ви можете побачити, що ми додали файл CSS і JavaScript-файл всередині секції <head> нашої сторінки акаунту клієнта.

Що це за Класи Блоків?

Класи Блоків використовуються для визначення функцій, які є специфічними для конкретного блоку. Файл класу блоку знаходиться в папці app > code > local/community/core > простір імен модуля  > назва вашого модуля > Block. Ці файли містять функції, які ми можемо використовувати безпосередньо з ключовим словом $this в блоці конкретного файлу шаблону. Давайте розглянемо один приклад, щоб зрозуміти класи блоків.

Перейдіть до файлу review.xml, що розташований в папці app > design > frontend > base > default > layout та знайдіть представлений нижче код:

1

<!--

2

Customer account home dashboard layout

3

-->

4

5

    <customer_account_index>

6

7

        <!-- Mage_Review -->

8

        <reference name="customer_account_dashboard">

9

            <block type="review/customer_recent" name="customer_account_dashboard_info1" as="info1" template="review/customer/recent.phtml"/>

10

        </reference>

11

12

</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 > Chiragdodia > Mymodule > etc > config.xml і додайте рядки коду, що наведені нижче:

1

<frontend>

2

<layout>

3

        <updates>

4

            <mymodule>

5

                <file>mymodule.xml</file> <!-- Our layout file name-->

6

            </mymodule>

7

        </updates>

8

</layout>

9

</frontend>

10

<global>

11

        <blocks>

12

            <mymodule>

13

                <class>Chiragdodia_Mymodule_Block</class>

14

            </mymodule>

15

        </blocks>

16

</global>

Вихідний XML файл містить наступні рядки коду:

1

<?xml version="1.0"?>

2

<config>

3

    <modules>

4

        <Chiragdodia_Mymodule>

5

            <version>0.1.0</version>    <!-- Version of module -->

6

        </Chiragdodia_Mymodule>

7

    </modules>

8

    <frontend>

9

        <routers>

10

            <mymodule>

11

                <use>standard</use>

12

                <args>

13

                    <module>Chiragdodia_Mymodule</module>

14

                    <frontName>mymodule</frontName>

15

                </args>

16

            </mymodule>

17

        </routers>

18

         <layout>

19

            <updates>

20

                <mymodule>

21

                    <file>mymodule.xml</file> <!-- Our layout file name-->

22

                </mymodule>

23

            </updates>

24

         </layout>

25

    </frontend>

26

    <global>

27

        <blocks>

28

            <mymodule>

29

                <class>Chiragdodia_Mymodule_Block</class>

30

            </mymodule>

31

        </blocks>

32

    </global>

33

</config>

Створюємо Файл Класу Блока

Тепер перейдіть до app > code > local > Chiragdodia > Mymodule > Block і створіть файл Mymodule.php, що містить такі рядки коду

1

<?php

2

class Chiragdodia_Mymodule_Block_Mymodule extends Mage_Core_Block_Template

3

{

4

    public function myfunction()

5

    {

6

        return "Hello tuts+ world";

7

    }

8

}

Тут ми оголосили клас Chiragdodia_Mymodule_Block_Mymodule, що містить функцію myfunction, яку ми можемо викликати прямо з нашого файлу шаблона макета.

Створюємо XML Файл Макету

Перейдіть до app > design > frontend > default > default > layout і створіть файл mymodule.xml, який містить такі рядки коду

1

<?xml version="1.0"?>

2

<layout version="0.1.0">

3

    <mymodule_index_index>

4

        <reference name="content">

5

            <block type="mymodule/mymodule" name="mymodule" template="mymodule/mymodule.phtml" />

6

        </reference>

7

    </mymodule_index_index>

8

</layout>

Створюємо Файл Шаблону

Перейдіть до app > design > frontend > default > default > template і створіть файл mymodule.phtml. У цьому файлі ми будемо викликати функцію myfunction, яку ми оголосили в нашому класі блоку.

1

<?php

2

    echo $this->myfunction();

3

?>

Якщо ми все зробили правильно, то ви побачите в результаті вивід макету з трьох стовпців за адресою URL yoursite.com/index.php/mymodule/index.

В деяких версіях Magento, теми за замовчуванням не містять каталогів layout та template. В цьому випадку ви можете створити свої файли layout та template в каталозі app > design > frontend > base.

Ось як працюють макети в Magento. У попередній статті ми створили простий модуль "Hello World", а в цій статті ми створили його, використовуючи файл макету. Структура макетів Magento спочатку видається трохи дивною та незрозумілою, але як тільки ви починаєте розбиратися з макетами, ви легко зрозумієте ідею, що стоїть за нею.

У цьому пості я прикріпив файли демо-модуля, які ми створили раніше. Не соромтеся коментувати і ставити будь-які питання, що відносяться до цього конкретного посту.