Глава 2: Изучение тем Magento.

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

•Magento терминология

•Из чего состоит тема Magento: элементы, которые содержит Magento тема

•Иерархия тем в Magento

•Незаполненная Magento тема

•Установка и активация Magento тем

Magento терминология

Прежде чем рассматривать темы Magento, полезно понять различие между тем, что Magento

называет интерфейсами(interfaces) и что называеттемами(themes), и отличительные факторы веб

сайтов(websites) и магазинов(stores).

Вэб сайты Magento и Magento магазины

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

•Blue Store

•Red Store

•Yellow Store

34

В этом случае Magento относится к M2 как веб сайту, а Blue Store, Red Store и Yellow Store являются

магазинами. Каждый магазин в свою очередь может иметь одно или несколько представлений(store

views). Самый простой веб сайт Magento состоит из магазина и представления(обычно называются одинаково):

Немного более сложный магазин Magento может иметь одно представление для каждого магазина. Это полезная техника, если Вы хотите управлять более чем одним магазином из одной инсталляции Magento, в каждом магазине продаются разные продукты (например, Blue Store продает синие товары, а Yellow Store продает желтые товары).

35

Если в магазине были использованы более одного представления, возможно, для того чтобы представить покупателям двуязычный сайт. Например, наш магазин Blue Store может иметь представление на Английском, Французском и Японском языках связанных с ним:

36

Интерфейсы Magento

Интерфейс содержит одну или несколько тем Magento которые содержат как магазин выглядит и какие функции предоставляет покупателям. Интерфейс может быть связан на двух уровнях в Magento:

•На уровне веб сайта

•На уровне представления

Если связать интерфейс на уровне веб сайта Magento, все магазины, связанные с этим интерфейсом унаследуют его. Например, предположим, ваш сайт известный как М2 в Magento и содержит три магазина называемые:

•Blue Store

•Red Store

•Yellow Store

Если вы назначите интерфейс на уровне веб сайта(т.е. M2), тогда последующие магазины Blue Store, Red Store и Yellow Store унаследуют этот интерфейс:

37

Если Вы назначите интерфейс на уровне представлений Magento, тогда каждое представление может хранить разный интерфейс:

Пакеты в Magento

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

Давайте возьмем пример типичного Magento магазина, M2. Он может иметь два пакета: основной пакет, расположенный в папке app/design/frontend/base/ и еще один пакет который сам может содержать две темы:

38

Основная тема располагается в папке app/design/frontend/base/. Второй пакет содержит стандартную

тему пользовательской темы в папке app/design/frontend/default/, которая выступает в качестве основной темы в этом пакете. Сама пользовательская тема, которая не является стандартной темой,

располагается в следующих директориях app/design/frontend/our-custom-theme/default/ и

app/design/frontend/our-custom-theme/custom-theme/.

По умолчанию, Magento будет искать требуемые файлы в следующем порядке:

1.Директория пользовательской темы: app/design/frontend/our-custom-theme/custom-theme/

2.Директория по умолчанию пользовательской темы: app/design/frontend/our-custom-theme/default/

3.Директория основного пакета: app/design/frontend/base/

Темы в Magento

Тема Magento вписывается в иерархию Magento в нескольких местах: она может вести себя как интерфейс или представление. Есть еще много что открыть о темах Magento, хотя есть два вида

Magento тем: основная тема(base theme) (она называлась стандартной темой(default theme) в

Magento 1.3) инестандартная тема(non-default theme).

Основная тема

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

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

39

Не изменяйте основной пакет!

Важно, чтобы Вы не редактировали какие либо файлы в основном пакете и не пытались создать пользовательскую тему в основном пакете, так как это сделает обновление Magento очень трудным. Убедитесь что все пользовательские темы с которыми Вы работаете находятся внутри своих пакетов; например, ваши файлы темы должны располагаться в директориях app/design/ frontend/your-package-name/default и skin/frontend/ your-package- name/default.

Стандартные темы

Стандартные темы в Magento 1.4 изменяют внешний вид вашего магазина, но при этом не нужно включать каждый требующийся Magento файл, как это делается в основной теме, он должен содержать, по крайней мере, один файл для изменения, по меньшей мере, одного аспекта темы (то есть локализация(locales), оболочка(skins), шаблоны(templates), макет(layout)):

Стандартная тема в Magento 1.3

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

40

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

Нестандартная тема меняет внешний вид магазина Magento,но нет необходимости включать каждый файл требующийся Magento, как это делается в основной теме; она может просто содержать по меньшей мере один файл для изменения по меньшей мере одного аспекта темы (то есть локализация(locales), оболочка(skins), шаблоны(templates), макет(layout)):

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

41

Блоки в Magento

Magento использует блоки(blocks) чтобы различать различные компоненты по их функциональности, с той идеей что это облегчит Magento разработчикам и дизайнерам Magento тем настраивать функциональность Magento и внешний вид соответственно. Существует два вида блоков в Magento:

1.Контент блоки

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

Контент блоки

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

•Функция поиска

•Списки продукции

•Мини корзина

•Списки категорий

•Навигационные ссылки по сайту

•Выноски (рекламные блоки)

Следующая диаграмма иллюстрирует как могут быть размещены в магазине Magento контентные блоки внутри их структурных блоков:

Просто, контент блоки являются тем в Magento, что определяет какое содержание, появится в пределах любой данной страницы или представления в Magento.

42

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

В Magento, структурные блоки существуют только для того чтобы поддерживать визуальную иерархия

встраницы. Типичные структурные блоки в Magento теме включают:

•Верхний колонтитул

•Основная область

•Левая колонка

•Правая колонка

•Нижний Footer

Что делает Magento тема

Magento тема это коллекция файлов, которые определяет внешний вид, расположение и другие

выводы из системы Magento.

43

Уникальные аспекты темы Magento

Темы Magento отличаются от осуществления дизайна в других CMS и электронных коммерческих платформ несколькими ключевыми особенностями:

1.Максимальные возможности для настройки Magento

2.Поддержка нескольких одновременных тем

3.Непрерывный рабочий поток

4.Сведено к минимуму время отладки ошибок

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

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

Типичные файлы для тем Magento

Файлы в теме Magento могут быть разбиты на несколько категорий:

•Оболочки

•Макеты

•Шаблоны

•Локализации

Оболочки

Оболочки(Skins), наверное, наиболее легкий аспект для понимания веб дизайнеров, которые не знакомы с Magento. Оболочка в Magento состоит из CSS (Cascading Style Sheets), картинок и какогонибудь JavaScript требуемого для вашей темы.

Оболочка располагается в директории /skin/frontend/interface-name/theme-name в Magento 1.4, где interface-name это имя вашего интерфейса в Magento и theme-name это имя темы внутри интерфейса.

Директория оболочки в Magento 1.3

В Magento 1.3, директория оболочки темы была похожа на что-нибудь такое app/design/frontend/default.

44

Макеты

Макеты (Layouts) определяют структуру блоков для различных страниц магазина Magento в файлах

XML (.xml). Файлы макетов темы размещаются в директории app/design/frontend/ interface-name/theme- name/layout/ (так же как в Magento 1.3).

Файлы макетов, также могут определять мету информацию для страниц и в каком наборе символов закодирована страница (например, utf-8).

Шаблоны

Шаблоны (Templates) используются в темах Magento чтобы генерировать любую необходимую (X)HTML разметку для различных контент блоков в вашем магазине, таких как корзина, ссылки на категории и представление продукта. Там используется смесь (X)HTML и PHP и сохраняется как файл

.phtml. Вы можете найти файлы шаблонов тем в директории app/design/frontend/interface-name/theme- name/template/ вашей Magento.

Локализация

Локализация (Locales) возможно наименее распространенный элемент тематизации Magento; локализация используется для настройки языка магазина Magento. Например, локализация может переводить элементы магазина на Испанский для представления магазина на Испанском.

Локализация хранится в директории app/design/frontend/interface-name/theme-name/locale/ относительно того где установлена Magento, там же где и размещалась в Magento 1.3. Файлы локализации хранятся в виде текстового файла, как .csv (comma-separated variable формат).

Иерархия тем в Magento: резервная модель

Magento имеет свои правила чтобы определять какой приоритет имеет файл для отображения если есть несколько активированных тем в магазине.

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

Основная тема

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

Добавление основной темы в Magento 1.4 должно исключить эту проблему, onwards should negate this problem, пока Вы строите вашу тему корректно, создавая только те файлы, которые должны быть изменены при настройки вашей темы, и не дублируются в существующей теме, как это было обычной практикой в Magento 1.3.

45

Пример иерархии тем

Возьмем в качестве примера магазин Magento, M2. На самом верху иерархии ваша пользовательская тема.

Если эта тема запрашивает файл —использовать стили, style.css как пример—Magento сначала будет искать в app/design/frontend/your-custom-package/your-custom-theme, затем в skin/frontend/your-custom- package/your-custom-theme. Если style.css не будет найден в этих директориях, Magento обратиться за помощью к следующей теме в иерархии; вашей стандартной теме пользовательского пакета. Это означает, что Magento дальше будет искать файл app/design/frontend/your-custom-package/default и skin/frontend-your-custom-package/default:

46

Если запрошенный файл все еще не будет найден Magento, она вернется к основному пакету, и будет

искать в директориях app/design/frontend/base/default и skin/frontend/base/default.

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

47

Пустая тема

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

Пустая тема для Magento была обычно доступна через Magento Connect, но в Magento 1.4 она идет установленной по умолчанию. Вы найдете Пустую тему в директориях /app/design/frontend/default/blank

и /skin/frontend/default/blank установленной Magento.

Хотя многие дизайнеры использовали Пустую тему как основу для своих пользовательских тем для Magento в Magento 1.3 и ниже, рекомендуется не делать этого в Magento 1.4 так как это сделает вашу тему мене обновляемо пригодной в будущем.

48

Установка и активация темы Magento

Одна из основных задач для дизайнеров является возможность установить и активировать тему. Для начала, выберете тему из сообщества Magento Connect по

адресу http://www.magentoco...mmunity/design. Для этого примера Вы будете использовать Пустую тему доступную по адресу http://www.magentocommerce.com/magento-connect/Magento+Core/extension/518/blank-theme:

Пустая тема уже установлена в Magento 1.4, но предоставляет простой пример, чтобы продемонстрировать установку и активацию внутри Magento.

Если Вы выберете Получить ключ расширении(Get Extension Key), Вам будет предоставлено текстовое значение, которое Вы можете использовать в административной части вашего магазина Magento, чтобы загрузить автоматически тему при помощи Magento Connect.

49

Установка темы Magento

После того как у вас появился ключ расширения, войдите в административную панель и проследуйте

по пути Система(System) | Magento Connect |Менеджер Magento Connect (Magento Connect

Manager):

50

Вы можете увидеть страницу с информацией об ошибки после этого, если установлены не корректные

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

51

После того как вы исправите это, если необходимо, Обновите (Refresh) страницу и увидите Менеджер

Connect Manager(Magento Connect Manager):

Ниже Установка Нового Расширения(Install New Extensions), Вам необходимо вставить ключ расширения для пакета в поле Вставьте ключ расширения для установки(Paste extension key to install). Наконец, нажмите кнопку Установить(Install)

52

Вы увидите процесс показанный ниже:

Ваша тема теперь установлена; следующий шаг это ее активация.

53

Активация темы Magento

После того как тема установлена через Magento Connect, она не будет видна вашим посетителям. Чтобы сделать тему видимой для посетителей вашего магазина Magento, Вам надо ее активировать.

Выберете Система(System) | Конфигурация(Configuration) из навигации в административной панели:

Слева выберите опцию Дизайн(Design) из раздела ОСНОВНОЕ(GENERAL):

54

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

Первым шагом является определения Области Текущей Конфигурации (Current Configuration

Scope) в верхнем левом углу административной панели как Основной Веб-сайт (Main Website). Это определяет интерфейс магазина в вашем магазине:

55

Теперь Вам надо указать значения в секции Темы (Themes), которую вам необходимо раскрыть, чтобы

увидеть. Стоит отметить, что необходимо оставить поле Имя Текущего Пакета (Current Package

Name) как стандартный (default).

Остающиеся значения — Переводы (Translations), Шаблоны (Templates),

Оболочка (Skin (Images/ CSS)), Макет (Layout) и Стандартная (Default) в пустой (blank):

56

Если теперь обновить frontend вашего магазина Magento, Вы увидите вновь активированную тему:

Не можете увидеть вашу тему?

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

Если Вы хотите изменить тему на уровне представления магазина Magento, просто

выберите Стандартное Представление(Default Store View) или эквивалентное значение, вложенное

в соответствующее значение выпадающего списка поля Область Текущей Конфигурации(Current

Configuration Scope):

Если теперь Вы снова перейдете на закладку Дизайн(Design), Вы сможете настроить тему связанную

с этим уровнем вашего магазина аналогичным образом, интерфейс настройки виденную ранее.

57

Хорошая практика в тематизации Magento

Есть ряд моментов, которые в хорошей теме Magento, как правило, соблюдают:

•Используют только один файл макета, называемый local.xml, где объявлены конкретные обновления любых макетов для пользовательской темы Magento. Кроме того, считается плохой практикой создавать файлы макетов с таким же именем как у файлов макетов в основной теме

Magento's.

•Аналогично, не должно быть CSS файлов в вашей оболочке темы, которые используют такое же имя как CSS файл в стандартной оболочке.

•Ограничены .phtml (файлы шаблона Magento) только теми которые были изменены для использования в пользовательской теме.

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

Резюме

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

•Терминология используемая в темах Magento

•Элементы, из которых состоит тема Magento

•Что такое иерархия тем и как это работает

•Несколько правил, которые нужно учитывать, когда создаете пользовательскую тему Magento

•Что такое пустая тема Magento

•Установка и активация тем, используя Magento Connect

Вследующей главе, Вы начнете настраивать тему Magento и посмотрите на тематизацию Magento более детально.

58