Руководство для дизайнеров по 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
В поле Default (под заголовком Themes) введите имя новой темы, которую вы хотели бы загрузить на свой веб-сайт/магазин. Если вы оставите это поле пустым, Magento будет автоматически загружать только тему 'default' (Помните, что независимо от того, как вы настроите вкладку дизайна, Magento будет автоматически загружать тему, называемую 'default'. Если вы назначаете тему в админ-панели, эта тема будет просто загружаться выше в иерархии, но загружаться вместе с темой 'default'. Это будет изменено в предстоящем стабильном релизе, чтобы дать вам полный контроль над темами, загруженными в магазин). Если вы выбрали загрузку темы отдельно в зависимости от типа файла (схемы, шаблоны, файлы скинов или переводов), введите название темы, из которой нужно получить соответственно типы файлов.
Шаг 3
Закончив, нажмите кнопку “Save config” и перегрузите ваш магазин — вуаля! Теперь вы видите вашу новую тему, отраженную во фронтенде.
Теперь, когда мы получили навыки создания тем и управления ими, перейдем к тому, как Magento работает с этими темами.
Поздоровайтесь с множественными темами
Примечание: способность к использованию неограниченного числа тем будет доступна в следующих релизах. Хотя сейчас можно загрузить всего две темы одновременно, работа за кулисами остается той же самой, и вы сможете воспользоваться этой документацией.
Holiday seasons by far offer the most extensive sales opportunity for any eCommerce store — Customers line up to buy Christmas gifts for their family and friends, and moms line up to buy Halloween costumes for their child’s special night of trick ‘or treating. In order to tailor to the seasonal shoppers, your store must faithfully reflect the occasions in order to inspire your shoppers to explore your store. A shop like Diagram 3 just doesn’t cut it during Christmas – What this store needs is a few reds, snowflakes and Santa Claus – just like the store below in Diagram 4!
Diagram 3. This just doesn’t cut it
Diagram 4. This is what you need
Мы, разработчики, учли, что вам в некоторые периоды времени может потребоваться особое оформление витрины магазина.
Именно поэтому мы наделили Magento способностью хранить сразу несколько видов оформления витрины магазина.
Поэтому в новогодние праздники вы можете украсить ваш магазин новогодним оформлением, а потом вернуть магазину обычное, будничное, оформление.
At close examination of the two designs above, you’ll notice similarities in the underlying design. The façade has gone Christmas in Diagram 4, but underneath it you can still see the structure of the off-season store design. The only real difference between the two store designs, are just a few CSS and image files and wording changes in the template files. Because the changes are in fact minor, you don’t need a whole new default theme to accommodate your Christmas theme. What you need is just a few file replacements, and you’re on your way to a much spicier and merrier store. Magento’s multiple themes functionality was created to accommodate exactly that need, putting the power on your fingertips to turn on and off the seasonal themes while preserving your default theme.
Magento handles loading multiple themes by assigning something called hierarchy to the themes which is simply a process of cancelling out redundant files to load only that which resides highest in hierarchy.The hierarchy is determined by you in the Admin Design configuration tab and your ability to do so will become fully functional with the upcoming stable version. At the time of writing, the hierarchy of themes is already decided for you, as Magento loads the 'default' theme in the system first (placing it in the lowest hierarchy), then loading the second theme you assign in the admin (placing it in highest hierarchy).
Иерархия тем
Когда вы назначаете вашему магазину множественные темы, вы, в сущности, используете тот факт, что в то время как ваша главная цель при создании темы заключается в том, чтобы создать наиболее удобный и визуально приятный графический интерфейс, цель Magento состоит в том, чтобы приложению удалось найти и загрузить все файлы темы, необходимые для продолжения работы приложения без ошибок.
Например, если ваша страница со списком категорий вызывает шаблон с названием ‘view.phtml’ (в случае, когда этот шаблон становится необходимым файлом), но приложение не может найти файл в высшей теме иерархии (Примечание: во время написания высшая тема в иерархии — та, которую вы назначили через админ-панель, и низшая тема в иерархии — тема 'default', которую Magento автоматически загружает в магазин. В ближайших релизах Magento будет предоставлять вам возможность полного контроля над иерархией ваших тем), приложение будет смотреть в следующую тему выше по иерархии, чтобы найти файл. Если это не удалось, приложение продолжит работу, двигаясь вниз по иерархии тем до тех пор пока не сможет найти файл ‘view.phtml’, которое приложение сможет загрузить в магазин и закончить поиск. Этот метод построения дизайна называется нейтрализацей неисправностей (fallback), потому что приложение отступает назад к следующему возможному источнику требуемых файлов для получения и загрузки их.
Пусть, скажем, у вас есть три темы, назначенные вашему магазину, и каждая из этих тем содержит следующие файлы:
Таблица 1
default my_theme_1 my_theme_2
Все необходимые файлы templates/3-col-layout.phtml templates/3-col-ayout.phtml
templates/header.phtml css/base.css
images/logo.gif
css/base.css
css/boxes.css
Допустим, три темы составляют такую иерархию:
Таблица 2
ВЫСШАЯ my_theme_2
my_theme_1
НИЗШАЯ default
При внимательном рассмотрении вы увидите, что в таблице 1 есть несколько лишних файлов, таких как templates/3-col-layout.phtml и css/base.css. Теперь давайте упорядочим таблицу таким образом, чтобы избыточные файлы были выстроены параллельно друг другу:
Таблица 3
default my_theme_1 my_theme_2
Все необходимые файлы
templates/3-col-layout.phtml templates/3-col-layout.phtml
templates/header.phtml
images/logo.gif
css/base.css css/base.css
css/boxes.css
"ОК, отлично. Но что это означает?" — можете вы спросить.
Ну, позвольте напомнить вам, что файлы в таблице 3 — это то, как вы видите файлы в каждой из папок тем, а не то, как Magento видит их.
Давайте далее посмотрим, как Magento видит ту же самую файловую структуру (Таблица 4).
Таблица 4
default my_theme_1 my_theme_2
Все необходимые файлы
templates/3-col-layout.phtml
templates/header.phtml
images/logo.gif
css/base.css
css/boxes.css
Вы заметите, что Magento игнорирует версию избыточного файла ниже по иерархии и распознает только версию выше по иерархии. Это потому, что необходимый файл уже найден и не нужно искать его далее, следовательно, поиск этого определенного файла прекращается, пока продолжается поиск других требуемых файлов, еще не найденных.
В этой главе вы узнали, как создавать темы и управлять ими. В следующей главе мы шаг за шагом пройдем через процедуру построения темы. Вы познакомитесь со схемами, шаблонами и скинами — убедитесь, что вы полностью усвоили главу "Терминология дизайна в Magento" перед тем как переходить к следующей главе.
Построение вашей темы
Magento построен на целиком модульной модели, которая передает вашему магазину неограниченные масштабируемость и гибкость. По характеру применения, этот подход к программированию находит отражение в том, как вы будете разрабатывать темы для вашего магазина. В этой главе мы рассмотрим, что это означает для вас и как именно приступить к разработке темы для вашего магазина с помощью Magento.
Блоки и схема: введение
Вы, скорее всего, работали с другими приложениями электронной коммерции, прежде чем прийти к Magento, с таким опытом мы знаем — у вас, вероятно, есть несколько вещей, которые стали вашей второй натурой при разработке темы для вашего магазина. Прежде чем начать эту документацию, мы хотели бы убедиться, что вы собрали эти ожидания, которые, возможно, имеете, и безжалостно выбросили их из окна. Нет, нет, это вовсе не означает, что вы должны выучить целый новый язык. Это даже не означает, на самом деле, что многое изменится в связи с вашей работой. Все это реально означает, что есть пара новых трюков, которые вам понадобится узнать, а вместе с ними — новые инструменты, которые мы бы сейчас хотели вам представить. Сочетайте эти средства, всегда храните их под рукой, и убедитесь, что вы уделяете им много-много внимания. Вы делаете все это, - и мы обещаем вам, вы будете любить себя за это. Готовы ли вы? Вот они:
Структурные блоки
Блоки контента
Схема
Создание мысленной заметки
Для того чтобы дать вам чистое понимание того, что такое блоки и схемы, вот мысленная картинка, которую вы можете нарисовать для себя:
Представьте каркас блока (как на рисунке 1 — не связывайте себя картинкой. Вообразите его и следуйте дальше).
Теперь представьте каркас блока заполенный одним блоком.
Теперь представьте себе два блока и каркас, растущий вместе с блоками.
Теперь представьте себе три блока и каркас, растущий вместе с блоками.
Теперь представьте четыре блока и каркас, растущий вместе с ними.
Рисунок 1
Теперь посмотрите на этот снимок категории целевой страницы в Magento:
Рисунок 2
А теперь посмотрите на разбивку показанного выше снимка на два типа.
Рисунок 3
Рисунок 4
Мысленная картина, только что созданная Вами, служит для того, чтобы дать вам параллельное сравнение концепции и фактической реализации блоков. Я знаю, вы, вероятно, полностью растеряны. Давайте разберемся.
В концепции, каркасы на рисунке 2 — это структурные блоки. Это родительские блоки по отношению к блокам контента и в реализации они служат для позиционирования их блоков контента в контексте страницы магазина (как на рисунке 3). Эти структурные элементы существуют в виде областей заголовка, левой колонки, правой колонки... и т.д., которые нужны для создания визуальной структуры для страницы магазина.
Блоки контента, с другой стороны, в концепции, — это индивидуально окрашенные блоки, которые составляют структурный блок. В контексте магазина они являются подлинной сущностью страницы магазина. Они являются представлениями каждой функциональной возможности, предоставляемой страницей (например, список категорий, выноска и теги товаров и т.д.), и используют шаблоны для генерации (X)HTML, который должен быть вставлен в их родительские структурные блоки.
Макет (layout) является инструментом, с помощью которого можно назначить блоки контента для каждого созданного вами структурного блока. Макет существует в виде текстового XML-файла, и, изменяя макет, вы можете передвигать блоки по странице и назначать шаблоны блокам контента для создания разметки структурных блоков. Фактически, с помощью нескольких отдельных файлов макета, вы можете изменить визуальный макет каждой страницы в вашем магазине. Читайте дальше о макетах в «Введении в макеты».
С Magento у вас больше не будет файлов шаблонов с именами вроде left_column.ext с бесконечным спагетти из разметки, которой необходимо вручную управлять в зависимости от каждой из функций, необходимых для этой страницы. Вместо этого управление вашими шаблонами осуществляется на функциональном уровне, и вы можете загружать и выгружать функциональные возможности на странице вашего магазина
Построение темы: пошаговое руководство
Вот полный список инструментов, предоставляемых вам Magento для построения ваших тем:
Шаблоны (templates)
Макеты (layouts)
Блоки
Скины (изображения, CSS и блочный Javascript)
Для построения темы для вашего магазина ваш рабочий процесс будет включать следующие шаги:
ОДИН: Отключите ваш системный кэш
Чтобы подготовить ваш Magento к работе, вам нужно для начала отключить системный кэш, зайдя в админ-панель (http://yourhost.com/admin) и перейдя в System -> Cache Management. Выберите 'Disable' из списка выбора 'All Cache' и сохраните настройки. Это обеспечит вам верное отображение во фронтэнде вашего магазина всех сделанных вами изменений.
ДВА: Определите все возможности структурных типов вашего магазина
В самом начале, даже перед созданием разметки магазина, вам нужно будет спросить себя, какую структуру страниц вы хотите иметь для каждой из страниц вашего магазина. Сделайте себе список наподобие следующего:
Главная страница будет использовать трехколоночную структуру.
Страница со списком категорий будет использовать двухколоночную структуру, включающую правую колонку.
Страницы покупателя будут использовать двухколоночную структуру, включающую левую колонку.
Скелетный шаблон
Когда ваш список будет готов, вы создадите разметку X(HTML) для каждого типа структуры и сохраните ее как скелетные шаблоны в папке app/design/frontend/your_interface/your_theme/template/page/. Скелетный шаблон называется так из-за его предназначения — все, что он содержит (за исключением элементов ), — это разметка представления, служащая для позиционирования каждого структурного блока в соответствующей области разметки.
Пример скелетного шаблона
При внимательном изучении приведенного выше примера скелетного шаблона вы заметите PHP-метод под названием getChildHtml()?> внутри каждого блока разметки представления. Это способ, которым Magento загружает структурные блоки в скелетный шаблон и, следовательно, имеет возможность позиционировать все содержимое из структурных блоков на странице магазина.
Каждый getChildHtml вызывает имя как в