В 2008 году небольшая компания под названием Varien, базирующаяся в Лос-Анджелесе, незаметно представила миру платформу с открытым исходным кодом для электронной коммерции. Magento, как стало известно, быстро завоевал популярность среди веб-разработчиков, желающих перейти со времен osCommerce и Zen Cart к более профессиональной и надежной системе.
Magento заработал репутацию гибкого и мощного, оставаясь при этом загадкой для разработчиков. Документация для платформы была и остается скудной. В этом уроке мы рассмотрим мощную систему тем Magento и узнаем, как создать простую пользовательскую тему для Magento.
Шаблоны Magento
Поначалу система шаблонов, поставляемая с Magento, может показаться немного сложной, но цена, которую мы платим за сложность, дает нам большую гибкость и мощь, как мы обнаружим.
В систему шаблонов входят три компонента:
- Файлы шаблонов PHP
- Блочные классы PHP
- Конфигурация XML-макета
Файлы шаблонов содержат то, что вы ожидаете от системы шаблонов, например HTML, JavaScript и немного PHP.
Классы блоков позволяют нам перемещать повторно используемую функциональность из файлов шаблонов PHP в классы PHP, которые могут быть снова использованы в других файлах шаблонов в будущем. Как правило, все файлы шаблонов будут иметь связанный класс блоков. Блочные классы — это просто обычные PHP-классы, к которым можно получить доступ в шаблоне через переменную $this .
Различные вспомогательные методы, такие как getSkinUrl($path) или getUrl($path) , содержатся во всех классах блоков. Эти методы затем используются в файле шаблона, например, вызывая: $this->getSkinurl('images/logo.png') .
Наряду с предоставлением полезных методов для файлов шаблонов, блоки также используются, чтобы решить, как визуализировать файл шаблона для пользователя. Для этого в каждом блоке есть метод toHtml() . Обычно метод toHtml() просто анализирует файл шаблона и выводит его пользователю, но мы можем переопределить эту функциональность и вернуть все, что нам нравится, например, XML или JSON.
Наконец, файлы конфигурации макета XML — это «клей», который объединяет весь набор файлов шаблонов, которые будут отображаться в браузере. В XML мы можем указать, какие комбинации шаблонов / блоков PHP мы хотим загрузить, и порядок, в котором мы хотели бы отображать их на странице.
Структура папок
Без сомнения, первое, что вы заметите в Magento — это сотни папок и тысячи файлов. Давайте рассмотрим некоторые из наиболее важных для изменения шаблонов и макетов:
app/ code/ {core,local,community}/ Company/ Module/ Block/ design/ frontend/ base/ default/ layout/ template/ mytheme/ default/ layout/ template/ christmas/ layout/ template/ skin/ frontend/ base/ default/ css/ images/ mytheme/ default/ css/ images/ christmas/ css/ images/
Все файлы шаблонов будут находиться в файлах .phtml которые находятся в разных папках в .phtml app/design/frontend/{$interface}/{$theme}/template . Все XML-файлы макета находятся в папке app/design/frontend/{$interface}/{$theme}/layout . Все блоки будут в папке app/code/{core,local,community}/{$company}/{$module}/Block .
Но что это за названия интерфейсов и тем? Интерфейс, в терминах шаблона Magento, представляет собой набор тем. Поэтому тема — это просто набор файлов макетов и шаблонов. Как правило, в данной установке Magento у вас будет один интерфейс со многими темами. Интерфейс будет определять общий макет вашего сайта электронной коммерции, а тема находится над ним и придает ему особый вид. Скажем, у вас есть интерфейс для вашего сайта и тема по умолчанию. Например, если вы хотите настроить свой магазин для праздничной рекламы, вы просто создадите новую тему в том же интерфейсе и переключитесь на нее на время продажи.
Иерархия включения
Как и WordPress, Magento использует иерархию для поиска файлов тем. Всякий раз, когда модуль указывает, что файл макета должен быть загружен системой, Magento будет искать в нескольких местах.
В качестве примера предположим, что модуль Mage_Customer запрашивает загрузку customer.xml чтобы определить макет страницы customer/account/login которую мы пытаемся отобразить. Давайте также предположим, что мы уже создали интерфейс под названием «sitepoint»; иметь три темы: «рождество», «5 за 1» и «по умолчанию»; и указали, что мы хотели бы использовать тему «Рождество» в области администрирования Magento.
Magento проверит по порядку следующие папки на наличие файла с именем customer.xml :
- приложение / дизайн / интерфейс / SitePoint / Рождество / расположение
- приложение / дизайн / интерфейс / SitePoint / по умолчанию / макет
- приложение / дизайн / интерфейс / базы / по умолчанию / макет
Эта стратегия поиска файлов также используется для файлов шаблонов и файлов скинов. Это означает, что нет необходимости копировать все файлы макета, шаблона и обложки в рождественскую тему; мы копируем только те файлы, которые мы собираемся изменить. Любые неизмененные файлы будут найдены и загружены в соответствии с иерархией включения.
Эта стратегия поиска делает несколько тем вполне управляемыми. Если, например, мы решили, что нам нужно только изменить шаблон страницы продукта, то нам просто нужно скопировать app/design/frontend/sitepoint/default/template/catalog/product/view.phtml в app/design/frontend/sitepoint/christmas/template Каталог app/design/frontend/sitepoint/christmas/template . Но если бы мы решили, что CSS останется прежним, то мы оставим файл styles.css в skin/frontend/sitepoint/default/css где он находится, и он все равно будет загружен.
Пример файла макета
Давайте рассмотрим (и проанализируем) пример XML-файла макета:
<layout> <customer_account_register> <block name="wrapper"> <block type="core/template" template="page/html/header.phtml"> <block name="navigation" template="page/html/navigation.phtml" /> </block> </block> </customer_account_register> </layout>
В настоящее время в файле есть два раздела: определение раздела и определения блока.
Раздел, который мы определяем, предназначен для страницы /customer/account/register на веб-сайте, на которую в XML ссылается как customer_account_register , называемый дескриптором макета .
Когда вы посещаете любую страницу на веб-сайте, на котором работает Magento, обратите внимание на URL (при отключенной перезаписи SEO); они всегда будут начинаться с {$module}/{$controller}/{$action} . Это дает огромное представление о том, какой дескриптор макета в XML-файле редактировать: {$module}_{$controller}_{$action} .
В определении раздела мы перечисляем некоторые блоки, которые мы хотели бы включить на страницу. Как видите, блоки могут быть самозакрывающимися (оканчивающимися на /> ) или содержать другие блоки.
Блоки могут иметь ряд атрибутов, которые помогают нам организовать и описать, как мы хотели бы, чтобы они отображались на странице Минимальное определение блока должно содержать type блока и name .
Можно определить шаблон, связанный с блоком, указав атрибут шаблона . Ранее мы упоминали, что все шаблоны должны иметь тип блока. Эти отношения асимметричны; мы можем определить блок, который не имеет шаблона. Этот блок просто должен использовать метод toHTML() для генерации выходных данных.
Погружение в файлы шаблонов
Давайте посмотрим на файл header.phtml упомянутый в макете XML:
<html> <head> <title><?php echo $this->getTitle() ?></title> </head> <body> <h1><a href="<?php echo $this->getUrl() ?>"><img src="<?php echo $this->getSkinUrl('images/logo.png') ?>" /></a></h1> <?php echo $this->getChildHtml('navigation') ?> <p>Welcome to my shop!</p>
Мы можем видеть использование переменной $this которая была упомянута ранее. Есть несколько стандартных методов, которые доступны для всех блоков, таких как:
-
getUrl($path): при использовании базового URL-адреса, определенного в области администрирования Magento, этот метод создает полный URL-адрес, что полезно, например, при переходе из среды разработки в производство. Пример использования:$this->getUrl('customer/account/login')создастhttp://www.example.com/customer/account/login. -
getSkinUrl($path): это та же идея, что и уgetUrl(), но она работает с каталогомgetUrl()найденным в «skin / frontend», и интерфейсом и темой, активными в администрировании Magento. Для файлов в каталоге скина выполняется тот же иерархический поиск, что и для файлов шаблонов. -
getChildHtml($name): это позволяет нам вызывать вложенные или дочерние блоки, определенные в макете. Мы рассмотрим это более подробно в ближайшее время.
Функция getTitle() в нашем примере файла макета доступна только для блока core/template что имеет смысл, поскольку ее роль заключается в выводе элемента title страницы.
Вложенные дочерние блоки
Одним из наиболее мощных доступных методов является метод getChildHtml() . В приведенном выше макете XML вы можете видеть, что блок header имеет еще один вложенный блок. Magento не будет знать, куда выводить дочерний HTML-код в файле шаблона, поэтому нам нужно явно определить, куда его поместить, вызвав метод getChildHtml($name) и предоставив имя дочернего блока, который мы хотим отобразить в виде Первый аргумент. Дочерние блоки — отличный способ разделить части страницы на повторно используемые компоненты.
Подробнее о ручках макета
Как мы уже упоминали, дескриптор макета отображает URL-адрес на определенную область в файле макета. Magento будет объединять различные макеты на каждой странице загрузки. Эти дескрипторы макета могут быть расширены и изменены, но обычно они имеют вид:
-
default -
STORE_{$theme} -
THEME_frontend_{$interface}_{$theme} -
{$module}_{$controller}_{$action}
Если мы хотим добавить контент на все страницы сайта, было бы глупо указывать каждый отдельный дескриптор, о котором мы только могли подумать, поэтому мы просто используем дескриптор <default> .
Когда Magento отображает страницу для пользователя, он загружает все файлы макета XML, которые он может найти в соответствии с ранее обсуждаемой иерархией включения, и по очереди ищет описанные выше маркеры. Отсюда следует, что абсолютно любой макет XML-файла может содержать дескриптор любой страницы в системе.
Ссылка на объявленные блоки
Все глобальные блоки определены в дескрипторе по default .
Но сейчас у нас проблема. Что если мы хотим добавить что-то в блок заголовка на некоторых страницах, но не на других? Означает ли это, что нам нужно поместить заголовок отдельно в каждый маркер макета? К счастью для нас, нет. Использование <reference> решает эту проблему.
Ссылочный тег дает вам доступ к внутренней части другого блока: все, что находится внутри этого ссылочного тега, будет размещено внутри целевого блока. Как он узнает, какой блок нацелиться? Вы просто устанавливаете атрибут имени таким же, как целевой блок. Таким образом, вы можете добавить новых дочерних элементов в любой блок из любого файла макета:
<layout> <default> <block name="wrapper"> <block type="core/template" template="page/html/header.phtml"> <block name="navigation" template="page/html/navigation.phtml" /> </block> <block type="core/template" template="page/html/footer.phtml" /> </block> </default> <customer_account_register> <reference name="wrapper"> <block type="core/template" name="customer_hello" template="customer/helloworld.phtml" /> </reference> </customer_account_register> </layout>по<layout> <default> <block name="wrapper"> <block type="core/template" template="page/html/header.phtml"> <block name="navigation" template="page/html/navigation.phtml" /> </block> <block type="core/template" template="page/html/footer.phtml" /> </block> </default> <customer_account_register> <reference name="wrapper"> <block type="core/template" name="customer_hello" template="customer/helloworld.phtml" /> </reference> </customer_account_register> </layout>по<layout> <default> <block name="wrapper"> <block type="core/template" template="page/html/header.phtml"> <block name="navigation" template="page/html/navigation.phtml" /> </block> <block type="core/template" template="page/html/footer.phtml" /> </block> </default> <customer_account_register> <reference name="wrapper"> <block type="core/template" name="customer_hello" template="customer/helloworld.phtml" /> </reference> </customer_account_register> </layout>
Удаление объявленных блоков
Что если, например, мы определили блок в дескрипторе по умолчанию, но мы хотим удалить его только со страницы customer_account_register ? Вот пример, где мы избавляемся от нижнего колонтитула на странице клиент / учетная запись / регистрация :
<layout> <default> <block name="wrapper"> <block type="core/template" template="page/html/header.phtml"> <block name="navigation" template="page/html/navigation.phtml" /> </block> <block type="core/template" template="page/html/footer.phtml" /> </block> </default> <customer_account_register> <reference name="wrapper"> <block type="core/template" name="customer_hello" template="customer/helloworld.phtml" /> <remove name="footer" /> </reference> </customer_account_register> </layout>по<layout> <default> <block name="wrapper"> <block type="core/template" template="page/html/header.phtml"> <block name="navigation" template="page/html/navigation.phtml" /> </block> <block type="core/template" template="page/html/footer.phtml" /> </block> </default> <customer_account_register> <reference name="wrapper"> <block type="core/template" name="customer_hello" template="customer/helloworld.phtml" /> <remove name="footer" /> </reference> </customer_account_register> </layout>по<layout> <default> <block name="wrapper"> <block type="core/template" template="page/html/header.phtml"> <block name="navigation" template="page/html/navigation.phtml" /> </block> <block type="core/template" template="page/html/footer.phtml" /> </block> </default> <customer_account_register> <reference name="wrapper"> <block type="core/template" name="customer_hello" template="customer/helloworld.phtml" /> <remove name="footer" /> </reference> </customer_account_register> </layout>
Обертка и блочный заказ
Возможно, вы заметили, что блоки header и footer фактически обернуты блоком, называемым wrapper , типа text/list . Чтобы объяснить, как это работает, нам нужно вернуться к toHtml() блока.
Метод toHtml() блока text/list проверит все его дочерние блоки, а затем по отдельности toHtml() методы toHtml() для этих дочерних блоков. Порядок выводимых блоков, как правило, порядок, в котором они появляются в XML; однако мы можем переопределить это поведение с помощью атрибутов after и before . Таким образом, оболочка — это просто список других блоков, которые будут отображаться в определенном порядке.
Вот пересмотренный макет XML с некоторыми изменениями в расположении блоков:
<layout> <default> <block name="wrapper"> <block type="core/template" template="page/html/header.phtml" > <block name="navigation" template="page/html/navigation.phtml" /> </block> <block type="core/template" template="page/html/footer.phtml"/> </block> </default> <customer_account_register> <reference name="wrapper"> <block type="core/template" name="customer_hello" template="customer/helloworld.phtml" after="header" /> </reference> </customer_account_register> </layout>по<layout> <default> <block name="wrapper"> <block type="core/template" template="page/html/header.phtml" > <block name="navigation" template="page/html/navigation.phtml" /> </block> <block type="core/template" template="page/html/footer.phtml"/> </block> </default> <customer_account_register> <reference name="wrapper"> <block type="core/template" name="customer_hello" template="customer/helloworld.phtml" after="header" /> </reference> </customer_account_register> </layout>по<layout> <default> <block name="wrapper"> <block type="core/template" template="page/html/header.phtml" > <block name="navigation" template="page/html/navigation.phtml" /> </block> <block type="core/template" template="page/html/footer.phtml"/> </block> </default> <customer_account_register> <reference name="wrapper"> <block type="core/template" name="customer_hello" template="customer/helloworld.phtml" after="header" /> </reference> </customer_account_register> </layout>
Лучшие практики
Хотя нам еще предстоит полностью изучить макеты и шаблоны в их полном объеме, я чувствую себя обязанным начать с некоторой дискуссии о передовой практике. Учитывая, что Magento является таким трудным зверьком для приручения, даже для самых опытных разработчиков, легко попасть в ловушку непреднамеренного игнорирования передового опыта. Имея это в виду, вот несколько руководящих принципов для развития вашей темы.
Руки прочь от базы / по умолчанию
Как уже говорилось, base / default — это тема, используемая Magento в качестве запасного варианта, когда он не может найти файл шаблона во всех наиболее важных местах в системе. По этой причине Magento размещает здесь все стандартные шаблоны и файлы макетов. При обновлении Magento шаблоны по умолчанию, вероятно, будут изменены. Любые такие обновления будут записываться в папку base / default .
Если вы использовали тему base / default для хранения своих шаблонов и изменений макета, существует высокая вероятность того, что они будут потеряны с обновлением. По этой причине, если вы хотите, чтобы ваш клиент мог обновить свою установку Magento, никогда не изменяйте base / default !
Самый быстрый и простой способ обойти эту проблему — создать новый интерфейс с темой по умолчанию (просто создав новую папку в app / design / frontend / {$ interface} / default); Скопируйте любой файл, который вы хотите изменить, в эту папку (следуя той же структуре каталогов, что и base / default ), и внесите в нее изменения.
Используйте local.xml
Вы заметите, что папка макета base / default содержит десятки файлов XML, все они относятся к различным модулям в системе. При создании собственной темы, которая переопределяет функциональность base / default , обычно рекомендуется, чтобы Magento загружал base / default customer.xml, поэтому вам следует избегать размещения собственного customer.xml в папке макета вашей темы. Вместо этого примените свои изменения к другому файлу с именем local.xml .
Файл local.xml в вашем каталоге app/design/frontend/{$interface}/{$theme}/layout и, вероятно, будет содержать множество дескрипторов обновления к концу процесса создания тем.
Magento автоматически загружает файл local.xml , поэтому любые local.xml вами изменения будут перенесены на сайт.
Пример из реального мира
Итак, у нас есть теория, верно? Давайте начнем и начнем нашу собственную тему для Magento. Прежде чем мы начнем, вы должны загрузить Magento и установить его на свой локальный веб-сервер или виртуальную машину.
Настройка
Перво-наперво, давайте создадим папку для хранения наших собственных файлов. Создайте следующую структуру папок и файлов (заменив mycompany на желаемое имя интерфейса):
app/design/frontend/ mycompany/ default/ layout/ local.xml template/ skin/frontend/ mycompany/ default/ images/ css/
Файл local.xml может local.xml оставаться пустым.
Далее, давайте включим нашу тему в области администрирования Magento. Перейдите в System-> Design на панели администрирования. Выберите Добавить изменение дизайна и выберите новую тему. Как видите, вы можете настроить изменение дизайна, чтобы оно вступило в силу в определенные дни года. Это было бы идеально для рождественского примера, который мы использовали ранее, но сейчас просто оставьте эти поля пустыми, чтобы ваш дизайн стал по умолчанию.
Если вы обновите интерфейс, вы увидите, что ничего не изменилось. Это нормально, потому что страницы кэшируются. Чтобы отключить кэширование, чтобы вы могли видеть свои изменения во время разработки, перейдите в Система-> Управление кэшем и отключите все.
Вернувшись в передний конец, вы заметите, что все стили исчезли. Взгляните на источник страницы. Все URL-адреса для таблиц стилей и изображений по-прежнему указывают на base/default . Это нормально: Magento следует иерархии включения, заметив, что файлы, о которых идет речь, еще не существуют в нашей теме. base/default нет файла styles.css , поэтому все стили исчезли. Для начала давайте возьмем таблицы стилей из skin/frontend/default/default/css и поместим их в нашу папку skin/frontend/mycompany/default/css . Аналогично, переместите изображения из папки default/default в папку images в новой теме. Когда вы изменяете тему, вы можете удалить любую из них, которую вы не будете использовать, но на данный момент полезно иметь ее во время работы.
Удаление блока
Magento поставляется с рекламой «Back to School» и логотипом PayPal в правом столбце главной страницы. Оказывается, то, что мы продаем, не имеет значения для студентов, и мы не принимаем PayPal, поэтому давайте удалим их. Мы хотели бы удалить блоки со всех страниц сайта, поэтому мы хотим поместить код удаления в дескриптор макета по default .
Во-первых, нам нужно идентифицировать имена блоков. Чтобы определить имена блоков для дальнейших действий, нам нужно включить отладку блоков. Перейдите в Система-> Конфигурация-> Разработчик-> Отладка и включите опции Подсказки к шаблонам и Добавить имена блоков в Подсказки . (Если вы не видите эти параметры, убедитесь, что вы находитесь в любом месте, кроме глобального переключателя области видимости в верхней левой части экрана)
Теперь, когда вы перезагрузите интерфейс, вы увидите название каждого блока, отображаемого над ним на странице. Нам необходимо выполнить поиск по файлам макета XML в app/design/frontend/base/default/layout/ чтобы найти имя блока с типом и шаблоном, которые мы ищем. Если у вашего редактора или IDE есть опция поиска по всей папке, самое время использовать ее!
У объявления «Назад в школу» есть тип блока Mage_Core_Block_Template и шаблон callouts/right_col.phtml . Логотип PayPal имеет тип блока Mage_Paypal_Block_Logo и шаблон paypal/partner/logo.phtml .
После некоторой детективной работы мы находим блок PayPal, определенный как следующий в paypal.xml :
<block name="paypal.partner.right.logo" template="paypal/partner/logo.phtml"/>
А блок «Обратно в школу» определен в catalog.xml следующим catalog.xml :
<block name="right.permanent.callout" template="callouts/right_col.phtml"> <action method="setImgSrc"><src>images/media/col_right_callout.jpg</src></action> <action method="setImgAlt" translate="alt" module="catalog"><alt>Keep your eyes open for our special Back to School items and save A LOT!</alt></action> </block>
Не беспокойтесь об этих тегах action ; важно то, что теперь у нас есть наши имена: paypal.partner.right.callout и right.permanent.callout .
XML, который должен быть помещен в наш local.xml, выглядит следующим образом:
<?xml version="1.0"?> <layout> <default> <remove name="paypal.partner.right.logo" /> <remove name="right.permanent.callout" /> </default> </layout>по<?xml version="1.0"?> <layout> <default> <remove name="paypal.partner.right.logo" /> <remove name="right.permanent.callout" /> </default> </layout>по<?xml version="1.0"?> <layout> <default> <remove name="paypal.partner.right.logo" /> <remove name="right.permanent.callout" /> </default> </layout>
Обновите страницу, и вы увидите, что блоки исчезли!
Реорганизация боковой панели
Теперь, когда мы удалили эти блоки, у нас есть боковая панель с мини-корзиной, блоком «Сравнить товары» и опросом. Мы только начали, поэтому было бы неплохо сделать наш опрос более заметным, чтобы привлечь отзывы наших клиентов. Давайте переместим опрос в верхнюю часть колонки.
Мы сделаем это, удалив блоки, а затем добавив их обратно с правильными атрибутами before и after чтобы получить желаемый макет.
Давайте посмотрим на различные разделы, которые составляют боковую панель. Мы ищем <reference name="right"> , потому что блоки появляются в правом столбце; мы также ищем тип блока и имена шаблонов, которые мы можем видеть в красных полях на передней части.
Мы нашли наше самое важное определение опроса в нашей правой боковой панели:
<default> <reference name="right"> <block type="poll/activePoll"> <action method="setPollTemplate"><template>poll/active.phtml</template><type>poll</type></action> <action method="setPollTemplate"><template>poll/result.phtml</template><type>results</type></action> </block> </reference> </default>по<default> <reference name="right"> <block type="poll/activePoll"> <action method="setPollTemplate"><template>poll/active.phtml</template><type>poll</type></action> <action method="setPollTemplate"><template>poll/result.phtml</template><type>results</type></action> </block> </reference> </default>
Избегайте запугивания этими тегами action ; все, что они делают, это позволяют вам вызывать метод из класса блока из файла макета. Мы можем видеть, что в настоящее время нет никаких атрибутов before или after определенных для блока. Наш файл local.xml теперь может быть обновлен до:
<?xml version="1.0"?> <layout> <default> <remove name="paypal.partner.right.callout" /> <remove name="right.permanent.callout" /> <reference name="right"> <remove name="right.poll" /> <block type="poll/activePoll" before="cart_sidebar"> <action method="setPollTemplate"><template>poll/active.phtml</template><type>poll</type></action> <action method="setPollTemplate"><template>poll/result.phtml</template><type>results</type></action> </block> </reference> </default> </layout>по<?xml version="1.0"?> <layout> <default> <remove name="paypal.partner.right.callout" /> <remove name="right.permanent.callout" /> <reference name="right"> <remove name="right.poll" /> <block type="poll/activePoll" before="cart_sidebar"> <action method="setPollTemplate"><template>poll/active.phtml</template><type>poll</type></action> <action method="setPollTemplate"><template>poll/result.phtml</template><type>results</type></action> </block> </reference> </default> </layout>по<?xml version="1.0"?> <layout> <default> <remove name="paypal.partner.right.callout" /> <remove name="right.permanent.callout" /> <reference name="right"> <remove name="right.poll" /> <block type="poll/activePoll" before="cart_sidebar"> <action method="setPollTemplate"><template>poll/active.phtml</template><type>poll</type></action> <action method="setPollTemplate"><template>poll/result.phtml</template><type>results</type></action> </block> </reference> </default> </layout>
Добавить объявление
Хорошо, так что все идет отлично. Мы разобрали нашу правую колонку, и мы получаем множество отзывов пользователей через опрос. Super Big Corporation, Inc. обратилась к нам, и они хотели бы спонсировать наш сайт в обмен на показ рекламы в правом столбце. Фантастические новости! Давай сделаем это.
Первое, что нам нужно сделать, это сделать шаблон. Мы можем поместить это в любую папку в app/design/frontend/mycompany/default/template ; мы создадим новую папку с именем sponsor и файл внутри нее с именем superbig.phtml . Этот файл может содержать любой HTML-код, который вы хотите отобразить в качестве рекламы.
Далее нам нужно добавить его в макет XML. Мы можем использовать core/template типа блока, так как мы не собираемся требовать какой-либо функциональности, которая гарантирует создание нового блока:
<?xml version="1.0"?> <layout> <default> <remove name="paypal.partner.right.callout" /> <remove name="right.permanent.callout" /> <reference name="right"> <remove name="right.poll" /> <block name="right.poll" before="cart_sidebar"> <action method="setPollTemplate"><template>poll/active.phtml</template><type>poll</type></action> <action method="setPollTemplate"><template>poll/result.phtml</template><type>results</type></action> </block> <block type="core/template" template="sponsor/superbig.phtml" /> </reference> </default> </layout>по<?xml version="1.0"?> <layout> <default> <remove name="paypal.partner.right.callout" /> <remove name="right.permanent.callout" /> <reference name="right"> <remove name="right.poll" /> <block name="right.poll" before="cart_sidebar"> <action method="setPollTemplate"><template>poll/active.phtml</template><type>poll</type></action> <action method="setPollTemplate"><template>poll/result.phtml</template><type>results</type></action> </block> <block type="core/template" template="sponsor/superbig.phtml" /> </reference> </default> </layout>по<?xml version="1.0"?> <layout> <default> <remove name="paypal.partner.right.callout" /> <remove name="right.permanent.callout" /> <reference name="right"> <remove name="right.poll" /> <block name="right.poll" before="cart_sidebar"> <action method="setPollTemplate"><template>poll/active.phtml</template><type>poll</type></action> <action method="setPollTemplate"><template>poll/result.phtml</template><type>results</type></action> </block> <block type="core/template" template="sponsor/superbig.phtml" /> </reference> </default> </layout>
Добавление новой таблицы стилей
Мы хотим добавить некоторые настройки в текущую base/default таблицу стилей, которая загружается в данный момент. Давайте добавим еще один CSS-файл, чтобы мы могли добавить свои собственные настройки.
Загрузка ресурсов на странице, таких как JavaScript и CSS, обрабатывается head блоком Magento в файле макета.
head блок
Давайте посмотрим на head блок, как он стоит. Он находится в page.xml :
<block name="head" as="head"> <action method="addJs"><script>prototype/prototype.js</script></action> <action method="addJs" ifconfig="dev/js/deprecation"><script>prototype/deprecation.js</script></action> <action method="addJs"><script>lib/ccard.js</script></action> <action method="addJs"><script>prototype/validation.js</script></action> <action method="addJs"><script>scriptaculous/builder.js</script></action> <action method="addJs"><script>scriptaculous/effects.js</script></action> <action method="addJs"><script>scriptaculous/dragdrop.js</script></action> <action method="addJs"><script>scriptaculous/controls.js</script></action> <action method="addJs"><script>scriptaculous/slider.js</script></action> <action method="addJs"><script>varien/js.js</script></action> <action method="addJs"><script>varien/form.js</script></action> <action method="addJs"><script>varien/menu.js</script></action> <action method="addJs"><script>mage/translate.js</script></action> <action method="addJs"><script>mage/cookies.js</script></action> <action method="addCss"><stylesheet>css/styles.css</stylesheet></action> <action method="addItem"><type>skin_css</type><name>css/styles-ie.css</name><params/><if>lt IE 8</if></action> <action method="addCss"><stylesheet>css/widgets.css</stylesheet></action> <action method="addCss"><stylesheet>css/print.css</stylesheet><params>media="print"</params></action> <action method="addItem"><type>js</type><name>lib/ds-sleight.js</name><params/><if>lt IE 7</if></action> <action method="addItem"><type>skin_js</type><name>js/ie6.js</name><params/><if>lt IE 7</if></action> </block>
Как мы уже упоминали, теги action позволяют нам вызывать методы, связанные с классами блоков.
Для этого блока определено несколько методов, но нас интересует только пара:
-
addJs: это позволяет нам включать JavaScript, который находится в каталоге / js в корне нашей установки Magento. -
addItem: это позволяет нам включать ресурсы, которые мы имеем в нашем каталогеaddItemдля нашей темы.
Синтаксис для включения таблицы стилей:
<action method="addItem"><type>$type</type><name>$name</name><params>$params</params><if>$if</if></action>
Значения $type которые вы, скорее всего, будете использовать в своей карьере дизайнера / разработчика Magento:
-
skin_js -
skin_css
Как следует из их имен, они загружают JavaScript и CSS соответственно, расположенные в папке скина вашей темы, следуя иерархии включения, если не найдены.
$name skin/frontend/mycompany/default/ ссылается на местоположение вашего ресурса в папке skin/frontend/mycompany/default/ , поэтому таблица стилей в skin/frontend/mycompany/default/css/updates.css будет иметь $name css/updates.css ,
Для таблиц стилей значение $params может использоваться для передачи параметров в <link /> , например, носитель, к которому применяется таблица стилей.
Значение $if позволяет обернуть таблицу стилей в условные комментарии для Internet Explorer.
Добавление в head блока
Итак, у нас было введение в head блок и как мы можем использовать его для включения различных активов; давайте добавим нашу собственную таблицу стилей.
Нам бы хотелось, чтобы таблица стилей загружалась на каждой странице, поэтому мы будем использовать дескриптор макета по default . Мы обновляем уже определенный блок, поэтому будем использовать reference .
Наш обновленный код макета теперь выглядит так:
<?xml version="1.0"?> <layout> <default> <remove name="paypal.partner.right.callout" /> <remove name="right.permanent.callout" /> <reference name="right"> <remove name="right.poll" /> <block type="poll/activePoll" before="cart_sidebar"> <action method="setPollTemplate"><template>poll/active.phtml</template><type>poll</type></action> <action method="setPollTemplate"><template>poll/result.phtml</template><type>results</type></action> </block> </reference> <reference name="head"> <action method="addItem"> <type>skin_css</type> <name>css/updates.css</name> <params /> <if /> </action> </reference> </default> </layout>по<?xml version="1.0"?> <layout> <default> <remove name="paypal.partner.right.callout" /> <remove name="right.permanent.callout" /> <reference name="right"> <remove name="right.poll" /> <block type="poll/activePoll" before="cart_sidebar"> <action method="setPollTemplate"><template>poll/active.phtml</template><type>poll</type></action> <action method="setPollTemplate"><template>poll/result.phtml</template><type>results</type></action> </block> </reference> <reference name="head"> <action method="addItem"> <type>skin_css</type> <name>css/updates.css</name> <params /> <if /> </action> </reference> </default> </layout>по<?xml version="1.0"?> <layout> <default> <remove name="paypal.partner.right.callout" /> <remove name="right.permanent.callout" /> <reference name="right"> <remove name="right.poll" /> <block type="poll/activePoll" before="cart_sidebar"> <action method="setPollTemplate"><template>poll/active.phtml</template><type>poll</type></action> <action method="setPollTemplate"><template>poll/result.phtml</template><type>results</type></action> </block> </reference> <reference name="head"> <action method="addItem"> <type>skin_css</type> <name>css/updates.css</name> <params /> <if /> </action> </reference> </default> </layout>
Поздравляем!
Вот и вы! Вы узнали, как добавлять таблицы стилей, удалять блоки, добавлять новые блоки и вообще сгибать Magento в соответствии со своей волей. Конечно, есть огромное количество, которое мы не рассмотрели здесь, но я надеюсь, что я дал вам основу для развития ваших собственных тем Magento. Чтобы узнать больше, посетите раздел « Тематика и дизайн» в Базе знаний Magento , а также вики Magento .