Глава 3: Основы тем Magento.

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

•Как действует кэш в Magento и как отключить его для более легкого создания темы

•Изменение логотипа вашего магазина

•Изменение favicon вашего магазина

•Настройка стандартного изображения продукта

•Установка водяного знака изображения для автоматического применения Magento к изображениям продукта в вашем магазине

Кэш в Magento.

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

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

•Файлы конфигурации: обновление этого кэша корректирует файлы конфигурации Magento

•Файлы темы:

o Файлы макетов: обновление этого кэша корректирует все текущие активированные темы o Блоки Вывода в Формате HTML

oЛокализации (т.е. переводы)

•Коллекции

•Каталог:

oПерезаписи Каталога: обновление этого кэша восстанавливает дружественные поисковым системам URL-адреса для продуктов в каталоге Magento

oИзображения: обновление этого кэша автоматически восстанавливает водяные знаки и измененные размеры изображений продуктов в каталоге Magento

oМногоуровневая навигация: обновление этого кэша восстанавливает индексацию многоуровневой навигации в вашем магазине Magento

59

Отключение кэша в Magento.

Хотя кэш в Magento полезен, когда ваш магазин «живой» и продает продукцию покупателям, но становится неудобным, когда Вы разрабатываете вашу новую тему Magento.

Войдите в административную панель вашего магазина Magento и выберете

(Система)System | Управление кэшем(Cache Management):

60

На экране появится Управление Хранением Кэша(Cache Storage Management) Magento:

Далее, Вам необходимо выбрать опции Макеты(Layouts), Блоки Вывода в Формате HTML(Blocks HTML Output) и Переводы(Translations) из таблицы:

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

61

•Макеты(Layouts): Эта опция управляет кэшированием макетных XML файлов, для темы вашей Magento, которые сообщают Magento какие блоки добавлять на страницы вашего магазина и где.

•Блоки Вывода в Формате HTML(Blocks HTML output): Эта опция управляет кэширование для Magento шаблонных файлов (.phtml) которые создают общий скелет вашего магазина(к примеру, верхний колонтитул, нижний колонтитул и зона колонок), а также блоки компонентов (к примеру, раздел поиска и корзина покупок).

•Переводы(Translations): Эта опция управляет любыми изменениями внесенными в файлы локализации вашего магазина и в таблицу core_translate базы данных, которая контролирует переводы контента вашего магазина.

Для полного отключения этих кэшей, выберете значение Отключить (Disable) из выпадающего меню Действия (Actions) и затем нажмите кнопкуПередать (Submit):

Как только административная панель Magento обновится, Вы должны увидеть, что кэши Макетов(Layouts), Блоков Вывода в Формате HTML(Blocks HTML

Output) и Переводов(Translations) появились красными, а не зелеными и помечены как

ОТКЛЮЧЕНО (DISABLED) в колонке Статус(Status):

Вот и все, необходимые кэши отключены для тематизации вашего магазина Magento.

Повторное включение кэша.

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

62

Удаления кэша Magento в директории сайта

Удалить все папки из /var/cache

Также если вы получили ошибку при установке модуля или темы нужно удалить проблемную папку. Указывающую, в протоколе ошибки.

Удалить maintenance.flag из директории сайта

63

Кеш Magento расположен, в папке var/cache

64

Изменение логотипа вашего магазина

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

Войдите в административную панель вашего магазина Magento. Если ваш магазин Magento установлен по адресу http://www.example.com/magento, ваша административная панель доступна по

адресу http://www.example.com/magento/admin. Как только Вы успешно авторизуетесь, Выберете Система(System) | Конфигурация(Configuration) из навигационного меню:

65

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

Далее, выберете опцию Верхний Колонтитул (Header) справа чтобы раскрыть три опции:

•Файл логотипа (Logo Image Src)

•Описание Логотипа (Logo Image Alt)

•Текст Приветствия (Welcome Text)

66

Первое значение, Файл Логотипа (Logo Image Src), указывает путь к логотипу магазина, который в настоящий момент задан как images/logo.gif. Это путь относительно следующей директории, предполагая, что интерфейс, включенный по умолчанию известен как стандартный: skin/frontend/default/default. Наш новый логотипа магазина для M2, пример магазина упоминаемый ранее:

Лучшая практика оставлять стандартный логотип logo.gif, так что загрузим наш файл в директорию skin/frontend/default/default/images названный как m2-store-logo.gif:

Второе значение, Описание логотипа (Logo Image Alt), это то, что управляет контентом атрибута alt для элемента img. Поэтому в идеале, мы и хотим заменить это значение, на имя нашего магазина:

67

Наконец, поле Текст Приветствия (Welcome Text) позволяет вам настроить, что показывать покупателям вашего магазина, которые не авторизованы.

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

Мы изменим это на Welcome to the M2 Store:

Наконец, Вы можете начать на кнопку Сохранить Конфигурацию (Save Config), расположенной в верхнем правом углу вашего экрана чтобы сохранить эти изменения:

68

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

Вы также можете видеть измененное сообщение Welcome Text в верхнем правом углу экрана:

Это все, Вы успешно изменили логотип вашего магазина Magento!

Изменение логотипа вашего магазина используя статичные блоки

Magento

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

адресу: http://www.magentoco...d_header_image_ to_a_static_block.

Внимание этот метод не рекомендуется. Если вы намерены использовать вашу тему Magento в различных установках, к тому же это не настолько короткий способ как изменить настройки в Система (System) | Куонфигурация (Configuration) | Дизайн (Design) как Вы делали ранее, так как вам необходимо создавать статический блок в каждой установке и добавлять туда ваш файл логотипа.

69

Изменение favicon вашего магазина

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

Что такое favicon

favicon это 'избранная иконка', графическое изображение разрешением 16 x 16 пикселей, которое обычно показывается в адресной панели вашего браузера which is usually displayed in your browser's address bar, next to the URL of the current page you are looking at:

Favicons особенно полезен для различия вашего сайта от других веб сайтов в списке закладок у покупателя. Эффективные favicon, как правило, следующие:

•Выделяющийся: Ваш favicon должен быть виден среди огромного выбора закладок, которые покупатель открыл в своем браузере или в большом списке закладок веб сайтов

•Простой: 16 x 16 пикселей это очень маленькое пространство для дизайна и переполненные конструкции не очень хорошо работают! В частности, уменьшение логотипа вашего магазина до нужного размера редко работает так же хорошо как favicon; лучше создать отдельное изображение, которое либо часть логотипа вашего магазина либо использует отдельный элемент дизайна вашего магазина, такой как блок цветов или начало названия вашего магазина будет работать лучше, чем неразборчивая версия вашего логотипа.

•Совместимость с дизайном вашего веб сайта: Согласующийся favicon может помочь укрепить степень доверия к вашему магазину представляя надежное, устойчивое представление вашего бизнеса покупателям. В основном, чем более последовательный вид и поведение каждого элемента вашего магазина, тем безопаснее покупатель ощущает себя, когда заказывает через ваш магазин.

Может быть стоит поэксперементировать с различными вариантами favicon для вашего магазина Magento прежде чем остановится на предпочитаемом дизайнe.

70

Вдохновение.

Есть ряд сайтов посвященных разработке favicon, которые вы можете использовать для вдохновения. Для начала это The Favicon Gallery (http://thefavicongallery.com), который показывает favicons в виде значков. Это помогает в определении какими методами сделать дизайн favicon выделяющимся:

71

Во-вторых это Fineicons' Favicon Gallery (http://www.fineicons.com/en/ favicon-gallery). Этот сайт классифицирует favicons в три колонки; показывая их по внешнему

виду (Символьный(Symbol), Типографический(Typographical) и Другие(Other)):

Изменение favicon

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

72

Если Вы взглянете на элемент <head> исходного HTML вашего магазина Magento, Вы увидите следующие две линии HTML, предпологая что Magento установлена по адресу

http://www. example.com/magento/:

<link rel="icon" href="http://www.example.com/magento/skin/frontend/default/default/favicon.ico" type="image/x-icon" />

<link rel="shortcut icon" href="http://www.example.com/magento/skin/frontend/default/default/favicon.ico" type="image/x-icon" />

Это означает, что Вы можете заменить файл, называемый favicon.ico в директории skin/frontend/ default/default/ новым нашем файлом favicon:

Файлы Favicon должны быть в формате .ico; один из вариантов преобразования вашего файла в этот формат для использования в вашем магазине Magento это онлайн генератор favicon такой как Dynamic Drive's Favicon Generator, доступный по адресу http://tools.dynamicdrive. com/favicon/.

Другие форматы Favicon

Есть возможность использовать файлы и в других форматах, таки как PNG и GIF для favicon вашего магазина, но формат ICO (.ico) лучше работает, особенно в более старых версиях Internet Explorer.

73

После того как загрузите новый файл favicon, обновите ваш магазин и Вы должны увидеть ваш новый favicon:

Вот и все, новый favicon вашего магазина готов!

Новый favicon не показывается.

Если Вы не видите новый файл favicon в вашем браузере.

Попробуйте посмотреть директорию файла, в вашем браузере (например, посетите). http://www.example.com/magento/skin/frontend/ default/default/favicon.ico и обновите.

Отображение продуктов на домашней странице.

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

1.Добавление корневую категорию названную 'Featured'.

2.Добавление одного или более продуктов в это категорию.

3.Обновить макет вашего магазина, чтобы отобразить это на домашней странице.

74

Добавление категории 'Featured'

Войдите в административную панель вашего магазина и перейдите в Каталог(Catalog) | Управление категориями(Manage Categories):

Обратись к левой стороне последующего экрана и выберите Добавить Корневую Категорию(Add Root Category) под заголовком Категории(Categories):

75

Теперь Вы видите страницу Новая Категория(New Category):

Здесь Вы должны заполнить самые основные данные в секции

Общая Информация (General Information).

Во-первых, введите название категории Рекомендуемые (Featured) в поле Имя(Name) и измени поле Активна (Is Active) в Да (Yes).

76

Далее, добавьте описание в поле Описание (Description) если Вы желаете (это поле опциональное) и опционально выберите Изображение (Image) для самой категории:

Наконец, измените значение поля Включать в Навигационное Меню(Include in Navigation Menu) в Нет(No) и нажмите кнопку Сохранить Категорию(Save Category) в верхнем левом углу экрана чтобы обеспечить создание категории:

Следующим шагом в добавлении категории рекомендуемых продуктов на домашнюю страницу вашего магазина Magento является обеспечение наличие продуктов в категории featured.

77

Оставаясь в административной панели Magento, перейдите в Каталог(Catalog) | Управление Продуктами(Manage Products):

В получающемся экране Управление Продуктами(Manage Products) , который загрузится, создайте новый продукт нажав кнопку Добавить Продукт(Add Product) в верхнем правом углу экрана:

78

Добавление товара в Magento

Далее, Вы увидите изображение, которое позволит вам определить тип добавляемого вами товара. На данный момент предлагается вашем магазином использовать тип товара – простой товар, но также возможно работать и с другими типами товаров:

•Сгруппированный товар(Grouped Product)

•Настраиваемый товар(Configurable Product)

•Виртуальный товар(Virtual Product)

•Bundle Product

•Скачиваемый товар(Downloadable Product)

Таким образом, все что вам необходимо сделать на этом этапе это нажать кнопку Продолжить(Continue) в нижней части экрана:

79

Теперь вам необходимо заполнить форму Новый товар(Стандартный)(New Product (Default)). Убедитесь, что ввели значения во все необходимые поля, а это следующие:

•Имя(Name), имя вашего товара, которое будет демонстрироваться покупателю.

•Описание(Description), подробное описание для вашего товара, которое обычно отображается на странице представления товара для прочтения покупателями.

•Краткое Описание(Short Description), обычно используется как резюме для товара на страницах, где представляется множество товаров.

•SKU (Единица Хранящегося Запаса(Stock Keeping Unit)), это полезно для поддержания ссылки на товар в вашей системе.

•Масса(Weight), масса товара, которая обычно используется в расчетах стоимости доставки.

•Статус(Status), который необходимо установить в Доступен(Enabled) для того, чтобы ваш товар отображался в магазине.

•Видимость(Visibility), которая управляет тем, что будет ли Magento отображать товар в результатах поиска выдаваемых функцией поиска магазина и будет ли выводится на страницах каталога Magento. Обычно, рекомендуется оставить значение в этом поле Каталог,Поиск(Catalog, Search).

80

Поле Ключевой URL-адрес.

Также рекомендуется использовать поле Ключевой адрес(URL key) для установки адреса товара в Magento. Например, если зададите значение этого поля как m2-test-product, товар будет отображаться по адресу http://www.example.com/magento/a-category/m2-test-product или похоже на это, в зависимости от настроек. Вам не следует использовать знак пробела в этом поле.

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

81

Внутри секции Цены(Prices), Вы обнаружите, что есть два необходимых поля:

•Цена(Price), которая позволяет установить стоимость товара для покупателя. Обратите внимание, что код валюты, которую вы настраивали при установки Magento, отображается ниже поля (на следующей картинке показано как GBP, Английский Фунт Стерлингов).

•Класс Налога(Tax Class), который позволяет настроить вариант налога для товара, если необходимо. На этом примере, принимается класс налога какНикакой(None).

82

Наконец, перейдите на закладку Категории(Categories) (на левой стороне экране) в этом товаре:

Для окончания создания нового товара, нажмите кнопку Сохранить(Save) в верхнем правом углу экрана. Вот теперь ваш товар занесен в магазин Magento и в категорию Рекомендуемые(Featured)!

Выясняем ID категории.

Вам необходим номер ID рекомендуемой категории созданной вами ранее на предыдущем шаге. Для определения ID категории, перейдите вКаталог(Catalog) | Управления Категориями(Manage Categories) и выберите категорию Рекомендуемые(Featured) из списка категорий на левой стороне экрана:

83

После того как следующий экран загрузится, ID будет изображено рядом с именем в заголовке страницы:

Таким образом, в примере магазина ID для рекомендуемой категории равен 3.

Добавление категории рекомендуемые товары на домашнюю страницу.

Теперь вам необходимо добавить категорию рекомендуемые товары на домашнюю страницу магазина. Чтобы сделать это, перейдите в CMS | Страницы(Pages) в административной панели вашего магазина:

84

Из списка страниц в колонке Название(Title) выберите Домашняя страница(Home page) чтобы отредактировать ее содержимое:

По умолчанию, на странице будет показаны закладка Информация о странице(Page Information). Выберите закладку Содержимое(Content) на левой части экрана:

85

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

{{block type="catalog/product_list" template="catalog/product/list. phtml" category_id="3"}}

Вам может понадобится спрятать Расширенный Редактор Текста(Rich Text Editor (RTE)), Вы это можете сделать нажав на кнопку Показать/Скрыть Редактор(Show / Hide Editor) в верху слева над полем содержание:

86

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

Если Вы теперь нажмете кнопку Сохранить(Save) и посетите фронтэнд магазина Magento и обновите страницу, Вы увидите товары из категории которую вы определили ранее, отображенными на странице:

87

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

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

Настройка стандартного заполнителя изображения товара

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

88

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

Magento использует три размера этих изображений сквозь весь магазин: большой размер, маленький размер и миниатюра. Файлы изображения хранятся в директории skin/frontend/base/default/images/catalog/product/placeholder/ установки Magento.

Вспомнить Иерархию тем.

Если вам необходимо вспомнить иерархию тем в Magento, вернитесь к Главе 2, Изучение тем Magento.

Как всегда, лучше избежать производить изменения в основной теме, чтобы сделать вашу тему обновляемой, так что скопируйте эти файлы в директорию вашей пользовательской темы. Например, если Вы модифицируете Стандартную тему Magento, вам необходимо скопировать эти файлы в директорию skin/frontend/default/default/images/catalog/product/placeholder/ установки Magento.

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

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

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

•262 x 262 пикселей для изображения большого размера (image.jpg)

•135 x 135 пикселей для изображения малого размера (small_image.jpg)

•50 x 50 пикселей для изображений миниатюр (thumbnail.jpg)

89

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

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

Настройка водяного знака на изображение товара

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

90

Чтобы добавить изображение водяного знака в ваш магазин, перейдите в Система(System) | Настройка(Configuration) в административной панели вашего магазина:

Далее, перейдите в размер Дизайн(Design) на панели слева на экране:

91

Теперь выберите Изображения Водяных знаков Товара(Product Image Watermarks) в основной части контента, так чтобы поля в секции были такие же как показано:

Здесь четыре типа полей. Во-первых, существуют поля, которые позволяют установить размер применяемого водяного знака (например, Стандартный Размер Основного Изображения Водяного Знака(Base Image Watermark Default Size)). Во-вторых, есть поле непрозрачности

(например,Непрозрачность Основного Изображения Водяного Знака, Процент(Base Image Watermark Opacity, Percent)), которое позволяет установить непрозрачность (т.е. как сильно будет изображение водяного знака проступать сквозь фотографию товара). В-третьих, поле водяного знака

(например,Основное Изображение Водяного Знака(Base Image Watermark)) которое позволяет вам загружать изображение с вашего компьютера для использования как изображение водяного знака.

92

Последний тип поля, используемый здесь это позиционирование, например, Позиция Основного Изображения Водяного Знака(Base Image Watermark Position), которое позволяет вам настроить, где и как изображение водяного знака размещается относительно фотографии товара (возможные значения:Растяжение(Stretch), Мозаика(Tile), Верхний/Левый(Top/Left),

Верхний/Правый(Top/Right), Нижний/Левый(Bottom/Left), Нижний/Правый(Bottom/Right),

Центр(Center)).

Согласно этого примера, только большое (Основное) изображение будет иметь применненое изображение водяного знака, которое основано на стандартном изображении товара созданное ранее:

Определите изображение, которое Вы желаете использовать как водяной знак и низкое значение для непрозрачности (25 достаточно хорошая граница для большинства изображений). В этом случае, мы используем вариант Мозаику(Tile) для поля Позиция(Position) так что водяной знак будет повторяться на нашем изображении:

93

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

Вам может показаться, что трудно разглядеть водяной знак. Если предыдущий скриншот увеличить на 400%, Вы можете увидеть слабый логотип M2 на изображении по умолчанию товара:

Если водяной знак не отображается, перейдите в Система(System) | Управление Кэшем(Cache Management) в вашей административной панели Magento и нажмите на кнопку Сбросить Кэш

94

Изображений Каталога(Flush Catalog Images Cache) под Дополнительное Управление Кэшем(Additional Cache Management):

Резюме.

Вэтой главе, Вы начали изучение настройки контента в магазине Magento включая:

•Обзор кэша Magento's и руководство как его отключить

•Как изменить логотип вашего магазина

•Настройка favicon магазина Magento

•Настройка стандартного изображения товара в вашем магазине

•Как установить изображение водяного знака для наложения на изображение товара в вашем магазине

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

95

Глава 4: МакетыMagento темы.

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

•Определение терминологии в макетах Magento

•Включение подсказок по расположению шаблонов, чтобы облегчить настройку

•Включение подсказок имен блоков

•Введение в XML

•Изменение макета страницы Magento через макет XML

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

Терминология макетов Magento

Файлы Макетов(Layout) в Magento определяют какие контетн блоки, определяемые в файлах шаблонах Magento (.phtml), размещены в шаблонах каркаса Magento (который также в формате .phtml), что определяет полную структуру темы магазина. Файлы макета Magento в формате XML (.xml) и

располагаются в директории app/design/frontend/your_interface/your_theme/layout/ установки Magento.

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

1.Стандартный макет(Default layout)

2.Обновления макета(Layout updates)

96

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

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

Обновления макета

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

Подсказки путей к шаблонам и подсказки названий блоков

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

Magento являются, Подсказки Путей к Шаблонам(Template Path Hints) и Подсказки Названий Блоков(Block Name Hints). Подсказки путей к шаблонам отображают (относительный) путь к каждому из блоков темы Magento в структуре директорий, что облегчает вам, как дизайнеру темы Magento настройку необходимых файлов для изменения темы Magento.

97

Включение Подсказок Путей к Шаблонам

Включение Подсказок Путей к шаблонам(Template Path Hints) отображает путь к каждому шаблону используемому в теме Magento. Чтобы включить эту возможность Magento, авторизуйтесь в административной панели магазина Magento и перейдите в,

Система(System) | Конфигурация(Configuration):

Далее, вам необходимо изменить Область Текущей Конфигурации(Current Configuration

Scope) на Представление Основного Сайта(Main Website)или Представление Стандартного Магазина(Default Store View), так как опция не доступна в области Стандартной Конфигурации(Default Config):

98

Из левой колонки выберите Разработчик(Developer) из раздела РАСШИРЕННОЕ(ADVANCED):

Если Вы теперь раскроете секцию Наладка(Debug) в правой колонке страницы, Вы должны увидеть три пункта, а именно:

•Профайлер(Profiler)

•Подсказки Путей к Шаблонам(Template Path Hints)

•Добавить Подсказки с Названиями Блоков(Add Block Names to Hints)

На данный момент, вам необходимо воспользоваться только пунктом Подсказки Путей к Шаблонам(Template Path Hints), так что снимите галочку с флаговой кнопки рядом с ним и выберите Да(Yes) из выпадающего поля, чтобы включить эту возможность:

Если Вы теперь нажмете кнопку Сохранить Конфигурацию(Save Config) в верхнем правом углу экрана,

99

Подсказки путей к шаблонам(Template Path Hints) должны быть включены. Чтобы увидеть их просто обновите фронтэнд магазина:

100

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

Вот теперь Подсказки Путей к Шаблонам(Template Path Hints) включены. Если Вы будите смотреть на форму поиска, Вы увидите что отображенный на экране путь к шаблону связан относительно корневой директории установки Magento, значением: frontend/base/default/template/ catalogsearch/form.mini.phtml:

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

101

Включение Подсказок Имен Блоков

Как дополнительный уровень помощи при создании и изменении тем, Magento также имеет

опцию Подсказки Имен Блоков(Block Name Hints), которая полезна в отладке макета темы Magento, поскольку она выводит на экран имя атрибута используемого в файлах макетах Magento. Оставайтесь в секцииСистема(System) | Конфигурация(Configuration) | Расширенное(Advanced) |

Разработчик(Developer) административной панели магазина Magento, откройте

раздел Отладка(Debug) в правой колонке страницы, убедитесь что Вы как и ранее в области представлений Стандартного Магазина(Default Store) или Основного сайта(Main Website) вместо области Стандартной Конфигурации(Default Config).

Снимите галочку с флаговой кнопки рядом с Добавить Подсказки Названия Блоков(Add Block Names to Hints) и выберите Да(Yes) из выпадающего поля, чтобы включить эту возможность.

Сохраните эти изменения нажав кнопку Сохранить Конфигурацию(Save Config) в верхнем правом углу экрана.

Вы можете оставить (Подсказки Путей к Шаблонам(Template Path Hints) установленным в Да(Yes)).

102

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

Нижний колонтитул также имеет блоки и пути к шаблонам отображаемые в схожей манере:

103

Если Вы сново посмотрите на форму поиска, теперь, когда

Подсказки Имен Блоков(Block Name Hints) включены, Вы увидите, что значение имени блока отображено как Mage_Core_Block_Template:

Подсказки Имен блоков показывают вам как блок классифицируется в Фреймворке использованном для построения Magento. Так что, Mage_Core_Block_Template говорит вам, что этот блок классифицируется как 'block template' в Magento, что полезно, когда дело доходит до определения типа атрибута в файлах макетах вашей темы. Соответствующий макет этого блока может быть похож на следующий пример, взятый из файла catalogsearch.xml в директории the /app/ design/frontend/base/default/layout, с типом атрибута определенным как core/template:

<reference name="header">

<block type=”core/template” name=»top.search» as="topSearch" template="catalogsearch/form.mini.phtml"/>

</reference>

Долее подробная информация о имене блока

Вы можете найти более подробную информацию по именам блоков и другом в документации Magento

по адресу http://docs.magentocommerce.com.

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

<reference name="right">

<block type="cms/block" name="widget" after="-"> <action method="setBlockId">

<block_id>widget</block_id> </action>

</block>

</reference>

Здесь тип(type) атрибута говорит Magento чтобы ожидалос содержимое типа cms/block, которое будет отображено в инструменте подсказок имен блоков как Mage_Cms_Block_Widget_Block.

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

104

Ограничения на тех кто может видет подсказки

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

В зоне Система(System) | Конфигурация(Configuration) административной панели Magento, оставаясь в зоне Расширенно(Advanced) | Разработчик(Developer), где Вы ранее просматривали, чтобы включить подсказки путей к шаблонам и имен блоков. Раскройте раздел Ограничения Клиента Разработчика(Developer Client Restrictions) этой страницы:

Снимите галочку с флаговой кнопки для поля Использовать Сайт(Use Website), и введите ваш IP

адрес(са) в поле Допускаемые IP(Allowed IPs) (разделенные запятой):

105

Если вы хотите позволить нескольким IP адресам видеть эту возможность Magento, просто разделите их запятой, например 123.123.123.123, 123.123.123.124.

Определение вашего IP

Вы можете определить ваш IP используя сервис, такой как What Is My IP? ( http://www.whatismyip.com )

или What Is My IP Address? ( http://whatismyipaddress.com ).

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

Короткое руководство по XML

Файлы макетов в Magento используют XML—расширяемый язык разметки(eXtensible Markup Language). Может быть не понятно при первой встрече с XML—особенно если Вы не знакомы с XHTML, но это достаточно просто.

Существует одно простое правило при создании хорошо отформатированного XML: каждый элемент должен быть закрыт. Элемент в XML может быть закрыт двумя путями.

•Элемент мажет быть самозакрывающийся

•Элемент может быть закрыт закрывающимся тэгом такого же типа

Самозакрывающиеся элементы в XML

Самозакрывающийся элемент в XML это элемент который сам себя закрывает. Возьмем в качестве примера, XML элемент <thing>. Обычно, этот элемент будет выглядеть следующим образом:

<thing>Какие-то данные</thing>

Если этот элемент самозакрывающийся, он выглядит следующим образом:

<thing />

Если Вы хотите включить данные в элемент <thing>, это может быть похоже на следующее:

<thing data= "некоторые данные " />

Обычное закрытие XML элементов

Другой путь закрыть XML элемент это закрыть тэгом такого же типа как тэг открытия. Так что, тот же тэг <thing>, будет выглядеть правильно оформленным XML элементом следующим образом:

<thing>Значение (если необходимо)</thing>

106

Сущности маскируемые в XML.

Как в HTML (Язык гипертекстовой разметки) и XHTML, XML требует чтобы некоторые символы были замаскированы чтобы предотвратить неправильное толкование данных в XML файле. Символы за которыми Вы должны следить в XML файле следующие:

Например, если Вы хотите отобразить A & B > C < D 'E' "F" в вашем XML файле, это должно выглядеть следующим образом:

A & B > C < D 'E' "F"

Теперь, чтобы мы имели более понятный XML, мы можем посмотреть более внимательно на изменение разметки с использованием макета XML в Magento.

107

Изменение разметки страницы.

Существует три способа, которыми Вы можете изменить разметку страницы в Magento:

1.Страница за страницей, если она контролируется системой управления содержимом (CMS) Magento, выбрав макет страницы из выпадающего списка

2.С помощью CMS Magento, в закладке Дизай(Design) в поле Обновление макета XML(Layout

Update XML)

3.С помощью, файлов макетов XML

Для справки, оба этих метода охвачены далее.

Изменение разметки страницы с помощью административной панели

Magento

Авторизуйтесь в административной панели Magento (размещающейся по адресу http://www. example.com/magento/admin если ваша установка Magento находится по адресу http:// www.example.com/magento). Перейдите в CMS | Страницы(Pages):

Здесь, представлен список страниц, которые управляются CMS Magento:

108

Примите во внимание значение поля URL Key, который соответствует страницы со значением О нас(About Us) в колонке Название(Title). В этом случае, необходимым нам значением является about:

По умолчанию: импортируемые примеры данных

Это значение установлино в about-magento-demo-store если Вы импортировали примеры данных в ваш магазин Magento.

Чтобы увидеть эту страницу на фронтэнде вашего магазина(то есть, представление которое будут видеть ваши покупатели), напечатайте адрес по которому установлена ваша Magento в панель адресов вашего броузер а и затем добавьте значение отображенное в колонке URL Key только что вами веденное

Послее этого загрузится страница, Вы увидите что страница О нас(About Us) имеет трех колонную разметку:

109

Если вы посмотрите более подробно на административную панель Magento, на

вкладке Дизайн(Design) в левой части (отображается, если только вы в режиме редактирования страницы в CMS Magento's), однако, Вы видите что на этой странице Разметка, установлена в 1

колонка(1 column):

Если вы отключите редактор кнопкой Показать/Скрыть Редактор(Show/Hide Editor) и посмотрите на HTML представленный в текстовом виде, Вы увидите что три колонки достигаются при помощи контента в CMS, ссылка CSS класса .col3-set что окружает три тэга <div> s; .col-1, .col-2,

и .col-3:

110

Переключитесь назад в режим редактора нажав кнопку Показать/Скрыть Редактор(Show/Hide Editor) снова, замените заполненный контент для страницы about чем-нибудь соответствующим вашему магазину:

Для того чтобы изменить разметку страницы, выберите их выпадающего списка Разметка(

Layout) вариант 2 колонки с левой панелью(2 columns with left bar):

Нажмите кнопку Сохранить страницу(Save Page) в верхней правой части экрана чтобы принять изменения:

111

Если Вы сейчас обновите страницу на фронтэнде вашего магазина Magento, Вы увидите левую колонку, содержащую выноску (рекламное объявление) и форму регистрации для функции Magento - рассылки новостей:

Настройка страницы Magento при помощи поля Обновление Макета XML

Чтобы изменить разметку страницы при помощи поля в Обновление Макета XML(Layout Update XML) CMS Magento, перейдите в страницу, которую Вы желаете изменить в

разделе CMS административной панели Magento. В левой части экрана, выберите закладку Дизайн(Design):

112

Подготовьте макет XML, которым Вы хотите изменить конкретную страницу. В нашем случае, Вы добавите 'выноску' рекламного объявления в левую колонку вашего магазина:

<reference name="left">

<block type=”core/template” name=”left.permanent.callout” template=”callouts/left_col.phtml” />

</reference>

Если вы теперь нажмете кнопку Сохранить Страницу(Save Page)

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

О нас(About Us), Вы можете увидеть выноску, отображенную в левой колонке страницы:

Вы успешно воспользовались полем Обновление Макета XML(Layout Update XML) в CMS Magento чтобы изменить ваш магазин!

113

Настройка страницы Magento при помощи файлов макетов

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

фронтэнд Оформления Заказа(Checkout) вашего магазина:

Размещение Оформления Заказа в Magento

Вы можете обнаружить оформление заказа в вашем магазине нажав на ссылке

обозначенную Оформление заказа(Checkout) ниже формы поиска в Стандартной теме Magento, или посетив адрес http://www.example.com/magento/checkout/cart предполагается что Magento установлена по адресу http://www.example.com/magento/.

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

Так как на данный момент используется в магазине Стандартная тема, стандартная разметка для представления оформления заказа определено в файле checkout.xml директории app/design/frontend/base/default/layout. Если вы откроете этот файл, Вы увидите, что разметка задается в дескрипторе shopping_cart_index со следующим XML:

<reference name="root">

<action method="setTemplate"><template>page/1column.phtml</template></action> </reference>

Хотя в Magento 1.3 Вы могли редактировать прямо этот файл, чтобы поддерживать нашу версию Magento 1.4 возможной к обновлениям, вам необходимо создать файл checkout.xml в директории пакета Стандартный: app/design/frontend/default/default/layout. Возможно выяснится что необходимо создать подпапку /layout, если еще никаких изменений не производилось в этой теме.

114

В новый файл checkout.xml, вставьте содержимое старого файла checkout. xml из директории app/design/frontend/base/default/layout и найдите следующий XML:

<action method="setTemplate"> <template>page/1column.phtml</template> </action>

Замените значение в элементе <template> следующим:

<action method="setTemplate"> <template>page/2columns-left.phtml</template> </action>

Путь устанавливаемый в элементе <template> относителен директории /template, соответсвующей иерархии Magento которая была описана в ранних главах. Если вы сейчас обновите страницу оформления заказа, после того как загрузите checkout.xml в директорию app/design/ frontend/default/defaultlayout вашей установки Magento, Вы должны увидеть обновленную разметку:

Обратите внимание, что левая колонка пустая: вам необходимо убрать еще одну строчку из нового файла checkout.xml чтобы увидеть контент представленный здесь. Найдите линии, которые гласят:

<checkout_cart_index translate="label"> <label>Shopping Cart</label> <remove name="right"/> <remove name="left"/>

Закомментируйте линию со следующим содержание <remove name="left"/>:

<checkout_cart_index translate="label"> <label>Shopping Cart</label> <remove name="right"/> <!--<remove name="left"/>-->

115

Если вы теперь загрузите этот файл снова и обновите страницу Оформить заказ(Checkout), Вы увидите полность обновленную разметку:

Стандартные и не стандартные дескрипторы в макете Magento

Как Вы видели ранее, в Magento имеется два типа дескрипторов(handles) которые используются в файлах макетах:

1.Стандартные дескрипторы(Default handles), которые влияют (почти) на каждую страницу вашего магазина Magento

2.Не стандартные дескрипторы(Non-default handles), которые могут быть использованы для влияния на разметку определенных страниц в магазине Magento

Что такое дескриптор

Дескриптором является ссылочное имя, которое Magento использует для обращения к конкретному представлению (или группе представлений) в магазине Magento. Например, дескриптор <cms_page> использует поздний контроль разметки страниц в магазине Magento созданных в системе управления контентом (CMS).

116

Стандартный дескриптор

Дескриптор <default> определяет, что является стандартным поведением для расположения в пределах определенного представления. Так что, если макет для представления Оформление заказа(Checkout) в Magento является определенным стандартным дескриптором для показа в макете с двумя колонками с левой панелью, это и будет макет, который Вы увидите в вашем магазине, Если Вы не воспользуетесь не стандартным дескриптором чтобы изменить разметку определенного представления. Например, Вы можете изменить представление одностраничного Оформления заказа не стандартным дескриптором, чтобы помочь упростить выбор покупателя, когда приходит время офрмления заказа в вашем магазине.

Не стандартные дескрипторы

Если дескриптор не <default>, обновления вложенные в XML ниже его будут относиться к соответствующей странице(ам) в вашем магазине Magento. Давайте посмотрим на часть XML макета в файле cms. xml, размещенном в директории app/design/frontend/base/default/layout:

<layout version="0.1.0"> <!-- omitted layout XML -->

<cms_page>

<!-- omitted layout XML --> <reference name=”content”>

<block type="cms/page" name="cms_page"/> </reference>

<!-- omitted layout XML --> </cms_page>

<!-- omitted layout XML --> </layout>

Дескрипторы макетов для страниц CMS

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

Дескриптор <default> применяет разметку к любой страницы, которая имеет разметку, определенную в файле cms.xml. Не стандартным дескриптором в макете является <cms_page>, который контролирует разметку страниц созданных в CMS Magento. Предыдущий макет просто говорит Magento куда вставлять контент на странице.

117

Полезность дескрипторов в Magento

Дескрипторы макета в Magento полезны так как являются идентификаторами, которые позволяют вам выделить определенную страницу или секцию из магазина Magento, как следующие:

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

118

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

Резюме.

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

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

•Настройка разметки, используя CMS и редактируя файлы XML макетов

•Руководство по дескрипторам в файлах макетов Magento

•Введение в XML

•Изменение разметки, страницы в Magento используя XML макет.

Вследующей главе, Вы начнете создавать тему Magento с нуля.

119