Руководство для дизайнеров по Magento

Вы слышали о невероятных способностях Magento с открытым исходным кодом, выходящих за рамки разумного.
У Вас не будет времени увидеть его в действии, Вы будете охать и ахать над всем этим - снова и снова.

...И теперь Вы хотите сделать всё самостоятельно. У Вас уже есть готовые PSD-файлы и Вы жаждете начать создавать и интегрировать. Так, что же дальше — С чего Вы начнёте?

Руководство дизайнера для Magento было подготовлено, чтобы Вы учились и расширяли свои знания о структурированной, концептуальной работе и методах проектирования для Magento — Оно будет в основном учить Вас тому, что вам нужно знать, чтобы начать создавать собственные темы для Magento. При этом из-за степени гибкости, которую предлагают возможности Magento, не представляется возможным документировать все возможные способы, которыми Magento может быть настроена для использования. За помощь в этом, вы можете проконсультироваться на форумах о Magento и вики, где реальные люди с жизненым опытом смогут указать Вам нужное направление. Кроме того, следует помнить, что Magento является приложением, которое постоянно развивается, поэтому, несмотря на то, что мы прилагаем максимальные усилия, эта документация не может точно отражать ту версию, с которой вы сейчас работаете.

Этот документ разделён на четыре большие главы, и Вы можете читать их в любом порядке, что бы быстро найти необходимую Вам информацию. Однако, поскольку каждая глава является прелюдией к следующей, мы советуем Вам читать документацию в том порядке, в котором она была написана.

Используемые термины и определения

Чтобы правильно пользоваться документацией, крайне важно понимать терминологию, используемую для описания аспектов Magento. Вводимые в данной главе термины вероятнее всего новая для Вас территория, поэтому - не торопитесь, прочитайте ее полностью. Но что есть важно: не расстраивайтесь если не сможете полностью охватить всю концепцию. Эта глава как раз и существует для быстрого ввода в курс дела - последующие уведут Вас глубже, расширяя поле этих простых определений. Терминология, включенная в эту главу следующая:

Сайт, Магазин и Store View

Интерфейс

Темы (визуальный вид)

Схемы (определяют блоковую структуру)

Шаблоны (разметка и логика)

Скины (файлы оформления)

Блоки

Структурные блоки

Блоки контента

Веб сайт и магазин

Веб-сайт (website) — это совокупность магазинов, которые совместно используют информацию об одном и том же покупателе и заказах, а также корзине. Магазин (store) — это совокупность его [магазина] отображений (store view). Это очень широкие термины, которые могут быть применены для определения специфических потребностей отдельных торговцев. Вот несколько сценариев, объясняющих различные применения сайта, магазина и его отображений:

Сценарий 1

Компания под названием Dubloo Inc создает он-лайн представительство с тремя отдельными магазинами одежды, каждый из которых ориентирован на свою аудиторию по уровню цен. Dubloo Inc хочет, чтобы все три ее магазина имели возможность разделять информацию о покупателе и заказах. При таком сценарии у Dubloo Inc были бы: один вебсайт и три магазина под ним. Магазин будет определять индивидуальный уровень цен, а вебсайт будет объединяющим куполом для Dubloo Inc.

Сценарий 2

Компания My Laptops хочет открыть два отдельных сайта, оба которых будут продавать ноутбуки, но по различным ценами. Они так же хотят предложить выбор языка на каждом из сайтов: Английский и Испанский, где каждый товар имеет свое описание соответственно выбраному языку. Им также нужно синхронизировать информацию о покупателе и заказе для сайта. В данном сценарии отображения магазина определялись бы Английской и Испанской ветвью для каждого из веб-сайтов. Сайтами в данном случае будут "Мои Ноутбуки" и "Дешёвые Ноутбуки".

Сценарий 3

Компания Bongo's Instruments желает создать он-лайн представительство. Без каких-либо лишних разделений, веб-сайт Bongo's Instruments является магазином.

Интерфейс

Интерфейс — это совокупность тем, которые определяют визуальный вид и функциональность фронтенда (внешнего интерфейса) Вашего магазина. Интерфейс может быть назначен любому уровню веб-сайта и/или части отображения магазина через административную панель. (Посмотрите, как назначить интерфейс веб-сайту или магазину).

Если Вы примените интерфейс на уровне веб-сайта, то его унаследуют и все Ваши магазины. В дальнейшем Вы можете назначить интерфейс на уровне магазинов и отображений магазинов, эффективно подменяя тем самым первоначальный. К примеру, Вы работаете с четырьмя разными магазинами, под главным веб-сайтом “John's Panacea”. Изучая эффекты каждого метода, как показано ниже, Вы можете легко определить метод, подходящий к потребностям дизайна для Вашего бизнеса.

Объявление на уровне веб-сайта

Если Вы хотите создать общий вид для всех четырех магазинов, Вам следует применить интерфейс на уровне веб-сайта. В таком случае все четыре магазина унаследуют интерфейс веб-сайта.

Объявление на уровне отображения магазина

Если вы хотите включить разный вид для магазинов, Вы можете применить интерфейс к каждому из них. В этом варианте все четыре магазина будут иметь свой уникальный вид.

Темы

Тема есть любая комбинация схем, шаблонов, локальных файлов перевода и/или файлов оформления, которые создают внешний вид вашего магазина. Magento построен с возможностью использовать разнообразные темы одновременно, поэтому существует их [тем] разделение на два больших класса:

Тема по умолчанию

Каждый интерфейс идет с темой, называемой "default" (тема по умолчанию), которая является главной для данного интерфейса. Когда вы применяете интерфейс к Вашему магазину, программа автоматически ищет тему "default" и загружает ее на фронтенд (внешний интерфейс). Чтобы модифицировать дизайн магазина, Вы можете либо изменить, собственно, тему, или же создать нестандартную, и загрузить как дефолтную. Тема по умолчанию должна содержать все необходимые схемы, шаблоны и файлы оформления, чтобы магазин работал без ошибок; и следовательно, является самой низкоуровневой в иерархии тем.

Нестандартная тема

Нестандартная тема может содержать как множество так и небольшие файлы темы: сколько посчитаете целесообразным согласно Вашим потребностям. Данный вид тем предназначен для внесения в дизайн магазина временных сезонных изменений, без необходимости создания полного набора темы по умолчанию. Создав несколько изображений и изменив некоторые CSS (таблицы стилей), Вы легко переключите Ваш магазин из обычного, без изюминки - в безусловного победителя Рождественских скидок.

Тема содержит любой из нижеперечисленных компонентов или их все:

Схема (layout) (расположена в app/design/frontend/your_interface/your_theme/layout/)

Это простые XML-файлы, которые определяют структуру блоков для различных страниц, так же как и контроль META-информации и кодировки страниц. (Для более глубокого рассмотрения схем читайте Введение в Схемы).

Шаблоны (templates) (расположены в app/design/frontend/your_interface/your_theme/template/)

Это PHTML-файлы, содержащие разметку (X)HTML и необходимые PHP-теги для создания логики визуального представления.

Локальные файлы перевода (locale) (расположены в app/design/frontend/your_interface/your_theme/locale/)

Это простые текстовые документы, организованные по языковому признаку, которые содержат переводы для локальных копий магазина.

Скины (файлы оформления, skins) (расположены в skin/frontend/your_interface/your_theme/)

Это специфичные для блоков Javascript, файлы стилей CSS и изображения, которые украшают Ваш (X)HTML.

Блоки

Диаграмма 1. Структурные блоки (показаны голубым)

Диаграмма 2. Блоки контента (показаны оранжевым)

Блоки — способ, которым Magento рассматривает область функциональных возможностей в системе и создает модульный подход к управлению этим с визуальной и функциональной точки зрения. Есть два типа блоков, и они работают вместе для создания внешнего отображения.

Структурные блоки

Это блоки, созданные с единственной целью — назначить визуальную структуру на странице магазина, такую как: заголовок, левая колонка, главная область и нижний колонтитул («подвал») (Диаграмма 1).

Блоки контента

Это блоки, которые выводят фактическое содержимое в каждом структурном блоке. Они есть представление каждой из функциональных возможностей на странице, и используют файлы шаблона, чтобы генерировать (X)HTML, который будет вставлен в его родительский структурный блок. Список категорий, мини-корзина, метки товаров, их список и т.д., являются каждый своим собственным отдельным блоком (Диаграмма 2).

Вместо включения шаблона за шаблоном, как в типичном приложении для электронной коммерции, Magento для полного вывода (X)HTML собирает и организовывает контент страницы через блоки.

Вот и все с терминологией, ребятки! — Коротко и сладенько. В следующей главе мы подробно разберемся с темами Magento.

Работаем с темами Magento

В этой главе мы погрузимся в детали того, как Magento обращается с темами, и научим Вас тому, как создать и управлять своей собственной [темой]:

В чем особенность тем Magento

Как создать тему

Как применить интерфейс и тему к магазину

Скажи "Привет!": разнообразию в темах

Иерархия тем, или как Magento управляется с многочисленными темами

В чем особенность тем Magento

Термин «тема», возможно, звучит для вас знакомо. Как обычный пользователь, как разработчик, или в обоих этих качествах Вы имели дело с морем опций доступных веб-приложений через их темы. Тема имеет в основном два типа пользователей. Первый тип — обычная аудитория, которая рассматривает тему с точки зрения эстетики и удобства просмотра магазина. Второй тип — разработчики, которые, принимая участие в создании темы, проходят через дополнительный уровень работы с ними.

Для пользователя первого типа опыт работы с магазином определяется возможностью магазина удовлетворить его/ее тактические и эмоциональные запросы. Для пользователя второго типа, который должен выполнять роль разработчика, — это эффективность, с которой он/она способен завершить набор задач разработки, определяемый магазином. Мы признаем, что накопленный опыт обоих типов пользователей определяет окончательную прибыльность магазина, поэтому ни один пользовательский опыт не может быть проигнорирован.

Поскольку мы знаем, что как дизайнер вы уже получили графическую часть ваших великолепных "шкурок" для сайта (служащих для отображения информации, которую можно представить визуально), мы посчитали, что просто поможем вам создать неземную структуру темы для максимального увеличения эффективности вашего рабочего процесса и поднятия вашей креативности на новый уровень. Вот несколько вещей, которые, как мы надеемся, застаят вас пускать слюни:

Максимальные возможности кастомизации

С помощью Magento вы можете изменить внешний вид вашего магазина на уровне категорий и товаров, что дает вам больше возможностей для маркетинга и рекламы, также как и для магазина с бесконечно уникальным дизайном. Когда-нибудь представляли себе каждый товар на своей собственной, по-своему настроенной информационной странице? Magento предоставляет Вам возможность сделать именно это и даже больше, обеспечивая быстрый способ кастомизации представления вашего товара на основе категорий и товаров.

Множественные темы

Magento предоставляет вам возможность одновременно загружать множество тем, позволяя вам переключаться между дизайном магазина по умолчанию и временным дизайном (сезонным и связанным с какими-то событиями). Все это — нажатием нескольких клавиш.

Непрерывный рабочий процесс

Magento полностью основано на объектно-ориентированном программировании, все модули доступны изначально при помощи шаблонных тэгов в файлах любого шаблона. И поскольку комплект Magento уже многофункционален, вы никогда более не будете вновь и вновь зависеть от программиста для решения простейших задач. Magento вырастает в обширную сеть опытных членов сообщества (в том числе официальная команда Magento Team), так что вам никогда не придется дважды подумать о том, где получить консультацию если вам это нужно.

Минимизируй время отладки

Любой дизайнер может вспомнить те драгоценные часы и минуты, которые были потрачены впустую в поиске незакрытой разметки, тщательно проверенной вашим валидатором. Валидатор может сказать вам, что случилось, но он никогда не скажет вам, где это происходит. Модульная админ-панель Magento несет в себе модульную систему шаблонов, которая минимизирует объем (X)HTML, который вам нужно обрабатывать одновременно. Меньше беспорядка означает меньше хлопот и больше здравого смысла для действительно важных вещей в жизни.

В самом деле, лучшая часть, которую Magento предлагает вам - это приложение, которое расцветает в своей гибкости, не оставляя вам беспокойства ни о чем кроме разработки ваших блестящих планов для вашеого очередного великолепного переднего плана. Только небо является пределом для этого приложения, и мы надеемся, что вы позабавитесь, применяя его для вашего магазина.

Как создать тему

Давайте для начала раскроем смысл некоторых папок. Откройте следующие директории в корневой папке Magento:

Папка 1: app/design/frontend/default/default/ — эта директория содержит схему, перевод (локаль) и шаблоны.

Папка 2: skin/frontend/default/default/ — эта директория содержит изображения, CSS и специфичные для блоков файлы Javasript.

При работе с темами эти две директории будут оставаться вашей базовой стартовой точкой.

Как вы могли заметить, мы разделили файлы темы на две части. Отделив файлы, которые должны быть доступны через интернет (такие как изображения и Javascript), от тех, которые могут быть скрыты от него, мы убедились в том, что Magento предоставляет вам максимальный уровень безопасности для вашего магазина.

Давайте продолжим и исследуем две директории.

Вы с первого взгляда отметите использование директории под названием "default/default" в обеих папках — 1 и 2:

Папка 1: app/design/frontend/default/default/

Папка 2: skin/frontend/default/default/

В обоих случаях * обозначает имя интерфейса, а * — имя темы. Таким образом, если вы работаете над темой, называющейся "my_theme", вы будете работать в директории 'app/design/frontend/my_interface/my_theme/'.

Вы можете сохранить в директории вашего интерфейса столько тем, сколько захотите, но во время написания ваш магазин может обрабатывать загрузку только темы, называемой 'default', и одной дополнительной темы по вашему выбору для вашего магазина. (Примечание: Возможность загрузки неограниченного количества тем станет доступна в ближайших релизах. Чтобы понять, как Magento управляет одновременной загрузкой множества тем, прочтите «Иерархия тем»). Это дает вам две темы для работы, так что вы можете сохранить вашу тему по умолчанию для дизайна магазина не во время сезона и использовать дополнительную тему для сезонных и привязанных к событиям случаев (Чтобы узнать, как работают множественные темы и как вы можете извлечь выгоду, читайте "Скажи Hello множественным темам")

Создание новой темы по умолчанию

Для того чтобы создать новую тему по умолчанию, сначала необходимо скопировать существующую тему по умолчанию, которую вы можете взять за основу вашей новой темы. Сделайте дубликат директории app/design/frontend/default/default/ и переименуйте новый каталог желаемым образом (названия интерфейса и название темы должны быть одним алфавитно-цифровым словом, начинающимся с буквы алфавита [a-z]. Для примера, 'My New Theme' и '02123_my_theme' не годятся. 'my_new_theme' — подходит). Имя каталога Вашей темы — это имя, по которому приложение будет распознавать вашу тему. Теперь сделайте то же для папки skin/frontend/default/default. И все! Вы успешно создали новую тему по умолчанию. Чтобы узнать, как назначить эту тему вашему магазину, читайте «Назначение новой темы» ниже.

Создание новой нестандартной темы

Диаграмма 1

При создании новой нестандартной темы, не нужно дублировать любые существующие каталоги тем по умолчанию. Скорее всего, вы просто вносите изменения в определенные файлы, и, следовательно, нужно будет лишь продублировать соответствующие файлы в качестве отправной точки вашей новой темы. Вы должны всегда помнить и соблюдать одно правило, которое заключается в том, чтобы убедиться, что вы сохраняете правила структурирования подкаталогов Magento. Например, если все, что содержит ваша нестандартная тема, — это шаблон 'home.phtml' из модуля catalog, внутри app/design/frontend/your_interface/your_non_default_theme/ вам нужно будет создать папку ‘template/catalog’, в которую Вы сохраните файл шаблона. Когда вы откроете директорию темы Magento по умолчанию (Диаграмма 1), вы увидите, как структурированы папки — убедитесь в связи правил этой папки с вашей новой темой для нормальной загрузки последней.

Назначение магазину интерфейса и темы

Теперь, когда вы создали свою собственную тему (будь то тема по умолчанию или нестандартная тема), чтобы применить ее, вам нужно назначить эту тему вашему веб-сайту/магазину. Перейдите в админ-панель Magento (т.е. www.mydomain.com/admin), затем на конфигурационную вкладку Design (System -> Configuration -> Design tab).

Диаграмма 2

В верхнем углу левой колонки Диаграммы 2 вы увидите блок с меткой ‘Current Configuration Scope’.

Чтобы управлять дизайном вашего магазина на уровне веб-сайта, выберите из выпадающего списка имя вашего веб-сайта и примените следующие шаги.

Чтобы управлять дизайном на уровне представлений магазина, выберите из выпадающего списка имя представления вашего магазина и примените следующие шаги.

Шаг 1

На вкладке Design в поле Current package name (Имя текущего пакета) введите имя интерфейса, в котором находится ваша новая тема. Если это поле оставлено пустым, Magento автоматически загрузит интерфейс 'default'.

Шаг 2