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

Терминология; Иерархия тем; Установка и активация тем

[10 ноября 2016 г.]    Российская сборка Magento 2.49.12
Magento 2: модули и услуги
#1 svetkin
  • Группа: Пользователь
  • Сообщений: 7
  • Регистрация: 02.03.2011

06.04.2011 22:20

Изучение тем 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


Прикрепленное изображение: img2_1.JPG

В этом случае Magento относится к M2 как веб сайту, а Blue Store, Red Store и Yellow Store являются магазинами. Каждый магазин в свою очередь может иметь одно или несколько представлений(store views). Самый простой веб сайт Magento состоит из магазина и представления(обычно называются одинаково):

Прикрепленное изображение: img2_2.JPG

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

Прикрепленное изображение: img2_3.JPG

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

Прикрепленное изображение: img2_4.JPG

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

Если связать интерфейс на уровне веб сайта Magento, все магазины, связанные с этим интерфейсом унаследуют его. Например, предположим, ваш сайт известный как М2 в Magento и содержит три магазина называемые:
• Blue Store
• Red Store
• Yellow Store
Если вы назначите интерфейс на уровне веб сайта(т.е. M2), тогда последующие магазины Blue Store, Red Store и Yellow Store унаследуют этот интерфейс:

Прикрепленное изображение: img2_5.JPG

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

Прикрепленное изображение: img2_6.JPG

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

Прикрепленное изображение: img2_7.JPG

Основная тема располагается в папке app/design/frontend/base/. Второй пакет содержит стандартную тему пользовательской темы в папке app/design/frontend/default/, которая выступает в качестве основной темы в этом пакете. Сама пользовательская тема, которая не является стандартной темой, располагается в следующих директориях app/design/frontend/our-custom-theme/default/ и app/design/frontend/our-custom-theme/custom-theme/.
По умолчанию, Magento будет искать требуемые файлы в следующем порядке:
  • Директория пользовательской темы: app/design/frontend/our-custom-theme/custom-theme/
  • Директория по умолчанию пользовательской темы: app/design/frontend/our-custom-theme/default/
  • Директория основного пакета: app/design/frontend/base/


Темы в Magento
Тема Magento вписывается в иерархию Magento в нескольких местах: она может вести себя как интерфейс или представление. Есть еще много что открыть о темах Magento, хотя есть два вида Magento тем: основная тема(base theme) (она называлась стандартной темой(default theme) в Magento 1.3) и нестандартная тема(non-default theme).

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

Прикрепленное изображение: img2_8.JPG

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

Цитата

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


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

Прикрепленное изображение: img2_9.JPG

Цитата

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


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

Прикрепленное изображение: img2_10.JPG

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

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


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

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

Прикрепленное изображение: img2_11.JPG

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

Структурные блоки
В Magento, структурные блоки существуют только для того чтобы поддерживать визуальную иерархия в страницы. Типичные структурные блоки в Magento теме включают:
  • Верхний колонтитул
  • Основная область
  • Левая колонка
  • Правая колонка
  • Нижний Footer


Прикрепленное изображение: img2_12.JPG

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

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


Система тематизации 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.


Макеты
Макеты(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.


Пример иерархии тем
Возьмем в качестве примера магазин 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:

Прикрепленное изображение: img2_13.JPG

Если запрошенный файл все еще не будет найден Magento, она вернется к основному пакету, и будет искать в директориях app/design/frontend/base/default и skin/frontend/base/default. В крайнем случае, если файл не будет найден ни в одном из этих пакетов, Magento ответит ошибкой, так как не найден запрашиваемый файл необходимый для отображения.

Прикрепленное изображение: img2_14.JPG

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

Прикрепленное изображение: img2_15.JPG

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

Цитата

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


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

Прикрепленное изображение: img2_16.JPG

Цитата

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


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

Установка темы Magento
После того как у вас появился ключ расширения, войдите в административную панель и проследуйте по пути Система(System) | Magento Connect | Менеджер Magento Connect (Magento Connect Manager):

Прикрепленное изображение: img2_17.JPG

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

Прикрепленное изображение: img2_18.JPG

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

Прикрепленное изображение: img2_19.JPG

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

Прикрепленное изображение: img2_20.JPG

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

Активация темы Magento
После того как тема установлена через Magento Connect, она не будет видна вашим посетителям. Чтобы сделать тему видимой для посетителей вашего магазина Magento, Вам надо ее активировать. Выберете Система(System) | Конфигурация(Configuration) из навигации в административной панели:

Прикрепленное изображение: img2_21.JPG

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

Прикрепленное изображение: img2_22.JPG

Здесь Вы должны сообщить Magento, какой пакет демонстрировать. Как Вы видели ранее, Вы можете связать пакет на двух уровнях: на уровне веб-сайта и представления магазина. Установите этот пакет на уровне веб-сайта, поскольку магазин в качестве примера содержит только представление магазина. Первым шагом является определения Области Текущей Конфигурации(Current Configuration Scope) в верхнем левом углу административной панели как Основной Веб-сайт(Main Website). Это определяет интерфейс магазина в вашем магазине:

Прикрепленное изображение: img2_23.JPG

Теперь Вам надо указать значения в секции Темы(Themes), которую вам необходимо раскрыть, чтобы увидеть. Стоит отметить, что необходимо оставить поле Имя Текущего Пакета(Current Package Name) как стандартный(default). Остающиеся значения — Переводы(Translations), Шаблоны(Templates), Оболочка(Skin (Images/ CSS)), Макет(Layout) и Стандартная(Default) в пустой(blank):

Прикрепленное изображение: img2_24.JPG

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

Прикрепленное изображение: img2_25.JPG

Цитата

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


Если Вы хотите изменить тему на уровне представления магазина Magento, просто выберите Стандартное Представление(Default Store View) или эквивалентное значение, вложенное в соответствующее значение выпадающего списка поля Область Текущей Конфигурации(Current Configuration Scope):

Прикрепленное изображение: img2_26.JPG

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

Хорошая практика в тематизации Magento
Есть ряд моментов, которые в хорошей теме Magento, как правило, соблюдают:
  • Используют только один файл макета, называемый local.xml, где объявлены конкретные обновления любых макетов для пользовательской темы Magento. Кроме того, считается плохой практикой создавать файлы макетов с таким же именем как у файлов макетов в основной теме Magento's.
  • Аналогично, не должно быть CSS файлов в вашей оболочке темы, которые используют такое же имя как CSS файл в стандартной оболочке.
  • Ограничены .phtml (файлы шаблона Magento) только теми которые были изменены для использования в пользовательской теме.


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

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


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

Поделиться темой: