Russian (Pусский) translation by Victor Efimov (you can also view the original English article)
В этой серии мы рассмотрим базовые принципы разработки тем для Magento.
Magento сегодня заработала репутацию одной из наиболее гибких и мощных платформ электронной коммерции.
Документация для нее скудная и у разработчиков иногда возникают трудности в нахождении решений. Это сравнительно просто, как только вы освоите основы, особенно, если вы комфортно себя чувствуете в фронтенд разработке.
Прежде чем мы начнем двигаться дальше, важно понять цель серии этих уроков и что мы будем делать в течение нескольких недель.
Эта серия направлена на только начинающего и будет покрывать основы фронтенд разработки тем. Если вы продвинутый Magento разработчик, то, возможно, эти уроки не для вас.
В этой серии мы рассмотрим следующие темы:
- Иерархия Magento
- Пакеты и темы
- Откат иерархии
- Файлы макетов
- Файлы шаблонов
К концу серии вы будете хорошо подготовлены, по крайней мере вы будете иметь твердое понимание о принципах разработки тем Magento и иметь возможность создавать и изменять ваши собственные темы, как профессионал!
Итак, с учетом сказанного, мы готовы начать работу.
Иерархия Magento
Во-первых, мы должны понять иерархию Magento и где наша тема расположена. Здесь сотни папок и тысячи файлов, слишком много, чтобы показать список, я буду фокусироваться только на тех, которые нам нужны для работы.
1 |
app/design/frontend/base/default/ |
2 |
app/design/frontend/default/default/ |
3 |
app/design/frontend/<package_name>/<theme_name>/ |
4 |
|
5 |
skin/frontend/base/default/ |
6 |
skin/frontend/default/default/ |
7 |
skin/frontend/<package_name>/<theme_name>/ |
Magento, по своей сути, имеет две папки app и skin, которые взаимодействуют друг с другом. Директория app содержит файлы, которые контролируют как шаблоны страниц будут отображаться, структура. Директория skin содержит файлы, которые контролируют внешний вид сайта, это CSS, JavaScript и изображения.
В подпапках app и skin расположены наши пакеты и темы, типичная установка Magento идет с двумя пакетами base и default.
Итак, прежде чем идти дальше важно понять что такое пакеты и темы. Если мы поймем все правильно, остальное будет предельно ясно.
Все о Пакетах и Темах
Пакет это коллекция связанных тем, нет ограничений сколько пакетов мы можем использовать и у нас должен быть хотя бы один пакет. Magento идет со специальным пакетом называемым base. Это хранилище (репозиторий), которое служит для того, чтобы основные файлы фронтенда Magento были доступны. Никогда не редактируйте файлы пакета base, делайте это на собственный страх и риск - более об этом позже!
Тема находится во вложенной папке пакета, которая содержит файлы, которые составляют ваш магазин, опять же нет никаких ограничений на количество тем, которое мы можем иметь в пакете. Тема может принадлежать только одному пакету и по соглашению каждый пакет должен содержать тему с названием "default", которая является главной темой для этого пакета.
Все о том, что такое base?
Пакет base содержит в себе только одну тему default. Он идет с каждой установкой Magento и содержит файлы фронтенда, которые позволяют запускаться нашему магазину. Вот пара правил, которые мы должны принять с базовым пакетом.
Первое правило, как я упоминал ранее, не править эти файлы, это значит, что и в app/design/frontend/base/ и в skin/frontend/base/ они должны быть использованы только для справки. Файлы, которые должны быть отредактированы должны быть скопированы из base в ваше package/theme. Тут пару причин для этого, которые я объясню.
Эти файлы используются для того, чтобы файлы ядра в app/code/core/ были доступны на фронтенде. Мы просто не должны редактировать файлы ядра, эта теория применима не только для Magento, но и для других платформ, включая WordPress.
Во-вторых, если вы обновите Magento, то файлы в пакете base будут перезаписаны. Так вся ваша работа и правки, которые вы сделали будут утеряны. Если вы сделали резервную копию, то это замечательно!
Второе правило - файлы в пакете base часть системы откатов, о которой я расскажу далее. Коротко, Magento откатится до файлов ядра, найденных в base после утилизации вашего пакета и темы При откате должны быть оригинальные нетронутые файлы не отредактированной версии.
Третье правило не создавайте никаких тем внутри пакета base.
Резюме, используйте base только для справки и если вам нужно отредактировать файл скопируйте его в вашу собственную package/theme. Если вам нужно отредактировать base делайте это на собственный страх и риск и отслеживайте ваши изменения чтобы вы могли вручную восстановить их после обновления.
Все о том, что такое Default?
Пакет default тоже идет с каждой установкой Magento, но в этот раз в нем есть несколько тем. Так для community edition 1.8.1.0 в нем есть четыре разных тем:
- default
- blank
- iphone
- modern
Так же как и для пакета base те же правила применимы и тут. Темы в пакете default по сути используются только для демонстрационных целей. Идеально для демо магазинов или если вы хотите продемонстрировать, что Magento подходит для ваших клиентов.
Логика отката
Magento полагается на логику отката, чтобы сделать темы более легкими в обслуживании и более способными к модернизации. Это позволяет нам редактировать и управлять только файлами необходимыми для нашей темы. Если нам не нужно редактировать файл, то он нам не нужен в нашей теме, файл будет получен где-то в другом месте. Чтобы объяснить это в деталях нам нужен живой пример.
Скажем у нас есть собственный вебсайт, который настроен использовать ваш собственный пакет и тему как тут:
1 |
app/design/frontend/our_package/our_theme/ |
2 |
skin/frontend/our_package/our_theme/ |
Наш вебсайт запрашивает файл шаблона с именем 1column.phtml и файл CSS с именем styles.css, но Magento не может найти этот файл в нашей теме. Логика отката Magento будет искать теперь следующую тему в иерархии файлов и продолжать искать пока не найдет запрошенные файлы.
Следующий порядок демонстрирует логику отката Magento, которая используется при поиске наших файлов:
1 |
app/design/frontend/our_package/our_theme/template/page/1column.phtml |
2 |
app/design/frontend/our_package/default/template/page/1column.phtml |
3 |
app/design/frontend/base/default/template/page/1column.phtml |
4 |
|
5 |
skin/frontend/our_package/our_theme/css/styles.css |
6 |
skin/frontend/our_package/default/css/styles.css |
7 |
skin/frontend/base/default/css/styles.css |
С этой логикой отката у нас может быть чистая база кода, оставляя при этом наши темы минимально пустыми. Копируйте файлы из base только если они требуют модификации, иначе уберите эти файлы из нашей темы. Если наш вебсайт запрашивает файл и его нет в нашей теме он будет расположен следуя логике выше:
Примечание: если Magento при логике отката не найдет файл, то будет ошибка отображения, если это в директории app и 404 ошибку, если это директория skin
Создание и включение нашего Пакета / Темы
Правильно, хватит разговоров, давайте настраивать это.
Во-первых, мы создадим настройку нашего пакета/темы. Мы начнем с создания следующих папок:
1 |
app/design/frontend/jasonalvis/default/ |
2 |
skin/frontend/jasonalvis/default/ |
Сейчас у нас есть пакет с названием jasonalvis и тема с названием default, вы можете переименовать ваш пакет как вам угодно. Мы оставим имя темы default так как каждый пакет должен всегда иметь тему default, запомните также, что default автоматически часть логики отката.
Все что осталось сделать сейчас это выбрать пакет в админке Magento. После входа в систему выберите system > configuration (система > конфигурация). Здесь нажмите design (дизайн) в левом меню и затем введите в поле Current Package Name (Имя текущего пакета) имя вашего пакета.
Пока мы здесь обратите внимание здесь есть ниже секция Themes (Темы). Это место, где мы можем ввести имя нашей темы, но так как мы будем использовать default, то тут не нужно ничего вводить, так Magento автоматически будет искать это имя.
Для демонстрации скажем у нас есть, например, тема, которую мы хотим использовать во время продажи, мы можем создать тему вот так:
1 |
app/design/frontend/jasonalvis/sale/ |
2 |
skin/frontend/jasonalvis/sale/ |
Потом нам нужно активировать тему в админке также как мы это делали для пакета:
Когда использовать Пакет или Тему?
Так что теперь вы знаете, как настроить ваш пакет/тему, но что лучше всего для какого сценария?
Итак, тут может быть бесконечное множество сценариев и я уверен, что у каждого найдется свой. Это также становится сложнее если вы установили Magento с настройкой мультимагазина. Основное правило темы в пакете в том, что они должны быть схожими, иначе они должны быть разделены на разные пакеты.
Тема default должны быть основой сайта, а дополнительные темы должны просто дополнять эту основу. Если вы радикально меняете каждый элемент сайта в теме, то это может быть основанием для разделения на пакеты.
Примечание: Когда создаются дополнительные темы с нашим пакетом нам не нужно создавать одновременно в папках app и skin, создавайте тему там где это нужно. Возьмем для примера нашу тему sale, она используется только для стилизации, другая цветовая схема и т.п. а файлы шаблона не меняются. Поэтому создавайте тему только в папке skin и редактируйте соответствующие файлы как требуется.
С учетом сказанного давайте закругляться. Сейчас у вас должно быть твердое понимание иерархии Magento, которое вы должны использовать в последующих сериях. Как всегдя, если есть вопросы, оставьте сообщение в комментариях ниже.
Что дальше?
В следующей статье мы рассмотрим основы макетов XML. В это время, задавайте любые вопросы, комментарии или обратную связь ниже!
