Добавил:

Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.

Вуз:

Белорусский государственный университет информатики и радиоэлектроники

Предмет:

[НЕСОРТИРОВАННОЕ]

Файл:

Magento 1.4 Theme Design_RU.pdf

Скачиваний:

318

Добавлен:

11.05.2015

Размер:

19.56 Mб

Скачать

☆

<<< < Предыдущая 1 2 34 / 74 5 6 7 > Следующая >>>

Глава 5: Нестандартные темы Magento.

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

•Начало новой Magento 1.4 темы

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

•Настройка общих аспектов центральной области контента вашего иагазина

•Настройка нижней часть вашего Magento магазина

Начало новой Magento 1.4 темы

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

Дизайн для обучения

Тема пример для магазина M2—эти примеры с целью создания темы подходящей для Magento для приспособления этого дизайна:

120

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

Первым шагом в создании новой темы является создание две новых директории. Во-первых, вам нужно создать директорию для хранения файлов макетов и шаблонов новой Magento темы: так как в качестве примера у нас Магазин M2, мы назовем ее m2. Имея это ввиду, вам необходимо создать директорию называемую /app/design/frontend/default/m2, где m2 является именем директории вашей новой темы.

Имя директории темы

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

Внутри только, что созданной директории, Вы теперь должны создать две дополнительные директории: директорию /app/design/frontend/default/m2/layout для файлов макетов для нашей новой темы

и /app/design/frontend/default/m2/template для файлов шаблонов, которые мы решим изменить в процессе настройки нашего проекта.

После создания директории /app/design/frontend/default/m2/layout, создайте новый файл макет, называемый local.xml (Вы можете оставить его пока пустым, мы воспользуемся им вскоре). Во-вторых, Вы должны создать директорию для файлов оболочки вашей новой темы Magento (стилей и изображений) в /skin/design/frontend/default/m2. В этой новой директории оболочки создайте новый файл, называемый local.css внутри другой поддиректории называемой /css (опять же, мы вернемся к нем позже). Вы также можете захотеть создать поддиректорию

называемую /skin/design/frontend/default/m2/images для любых связанных изображений для вашей новой темы.

Сохранение иерархии каталогов в Magento теме

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

121

Базисный файл макет local.xml

Далее, вам необходим исходный файл local.xml для вашей темы, сообщающий что

файл local.css находится в директории/skin/design/frontend/default/m2/css. Используя следующий макет XML, говорим Magento, что ваша новая тема теперь имеет новый ассоциированный с ней файл стилей (local.css, созданный ранее):

<?xml version="1.0" encoding="UTF-8"?> <layout>

<stylesheet>css/local.css</stylesheet>

</action>

</reference>

</default>

</layout>

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

<remove name="left.permanent.callout"/> <remove name="right.permanent.callout"/> <remove name="paypal.partner.right.logo"/>

</default>

</layout>

122

Активация новой темы

Вы теперь можете активировать новую тему и начать настраивать Magento. Для активации новой темы авторизуйтесь в административной панели и перейдите

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

123

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

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

124

Стилизация заголовка вашего магазина

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

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

</div>

</div>

Тэг <div> с классом .header-container обеспечивает фон области верхнего колонтитула на всю ширину экрана, в то время как <div> с классом .header относится к элементу, который содержит логотип, форму поиска и ссылки учетной записи в центре экрана.

Начнем стилизацию, области верхнего колонтитула добавив CSS в ваш новый файл local.css темы в директории /skin/frontend/default/m2/css. Сначала у элемента .header-container удалим фоновую картинку с цветовыми атрибутами и темно-синюю границу, примененную к верхней и нижней части элемента:

.header-container {

background: none; border-width: 0

}

В этом пункте, также стоит стилизовать элемент .header, изменив его цвет фона:

.header {

background: #f76300

}

125

Далее, вам необходимо применит стиль к элементу <body>, чтобы удалить темно-синюю полосу все еще очевидно присутствующую в элементе .header-container:

body {

background: #f7f6f4

}

После обновления магазина, Вы увидите, что фон вокруг области верхнего колонтитула становится цвета бледно коричневого/серого:

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

a.logo:hover img { opacity: 0.6

}

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

126

Кросс-браузерная поддержка прозрачности

Хотя атрибут прозрачности CSS поддерживается большинством браузеров, таких как Opera, Firefox, Safari, and Chrome, Вы найдете что этот эффект не работает в более старых версиях Internet Explorer.

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

Стилизация ссылок учетной записи пользователя

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

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

.quick-access .links a { color: #803300; font-weight: bold

}

.quick-access .links a: hover { color: #FFF

}

Здесь, Вы добавили CSS чтобы изменить цвета ссылок и разделителей на более оранжевый чем фон элемента .header измененный вами ранее. Не менее важно, Вы также изменили в CSS

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

127

Нашей следующей задачей является удаление вертикальных линий между элементами ссылок учетной записи пользователя. Они устанавливаются как фоновое изображение элемента <li> в

элементе .quick access <div>:

.quick-access .links li {background: none}

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

Настройка приветственного сообщения

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

в Система(System) |Конфигурация(Configuration) и в область Стандартного Представления Магазина(Default Store View) (выбрав из выпадающего списка в верхнем левом углу экрана), выберите закладку Дизайн(Design) в левой колонке:

128

В разделе Заголовок(Header) в области основного контента, измените значение

поле Приветственный Текст(Welcome Text) чтобы отразить приветственное сообщение, которое Вы хотите чтобы отображал ваш магазин:

Стилизация поля поистка

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

129

Поле поиска (упоминаемое в Magento как 'search mini form') содержится в элементе <form> под id = search_mini_form:

<form id="search_mini_form" action="http://www.example.com/magento/index.php/catalogsearch/result/"

method="get">

<label for="search">Search:</label>

<input id="search" type="text" name="q" value="" class="input-text"/> <button type="submit" title="Search" class="button"> <span><span>Search</span></span>

</button>

</div>

</form>

Вы можете применить стили CSS в файле local.css вашей темы к элементам внутри индентификатора #search_mini_form. Во-первых, удалим фоновое изображение из .form-search <div> внутри элемента формы, так что поле поиска интегрируется с нашим новым дизайном темы. Вы также можете предусмотреть небольшой отступ для элемента .form-search от вершины, чтобы расположить его с интервалом от вершины окна браузера:

#search_mini_form .form-search { background: transparent; padding-top: 10px

}

Ваши успехи на данный момент должны быть следующими:

На данном этапе, Вы также можете стилизовать кнопку Поиск(Search), которая является элементом <button> с классом .button примененным к ней:

#search_mini_form .button { background: #803300; border-radius: 5px;

color: #FFF; padding: 5px

}

130

Этот CSS устанавливает цвет фона темно-оранжевым и создает закругленные углы вокруг нее, для тех браузеров, которые поддерживают атрибут border-radius CSS. Хотя, если Вы обновите вашу страницу сейчас, Вы увидите, что элемент <button> все еще имеет синий фон, как и в предыдущем скриншоте, хотя и с оранжевой границей вокруг нее:

Это происходит, потому что элемент <button> использует два элемента <span> вложенных внутрь него, чтобы создать кросс браузерную совместимость, масштабируемую кнопку поиска с закругленными углами и градиентный фон:

<span>

<span>Search</span>

</span>

</button>

Существует два возможных решения для этого:

1.Вы можете стилизовать элементы <span> используя CSS, чтобы убрать фоновые изображения которые создают этот эффект.

2.Вы можете отредактировать соответствующий файл шаблона Magento чтобы удалить излишни элементы <span> из разметки вашей Magento темы.

Вэтот момент, Вы выберите второй вариант, чтобы изучить шаблоны Magento более детально.

131

Настройка файлов шаблонов Magento

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

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

Авторизуйтесь в вашей административной панели Magento и перейдите

в Система(System) | Конфигурация(Configuration). Убедитесь, что Вы находитесь в областиСтандартного Представления Магазина(Default Store View) и не в области Стандартной Конфигурации(Default Config). В закладке Разработчик(Developer), раскройте

секцию Отладка(Debug) и установите Подсказки Путей Шаблонов(Template Path Hints) в Да(Yes), и затем нажмите Сохранить Конфигурацию(Save Config).

Более детальное руководство этой возможности в предыдущей главе.

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

Значение отображаемое в красном прямоугольнике теперь

видимое frontend/base/default/template/catalogsearch/form.mini.phtml. Скопируйте этот файл в директорию шаблонов вашей новой темы

(т.е., /app/frontend/default/m2/template/ catalogsearch/form.mini.phtml ). Теперь откройте файл для редактирования и найдите строку, которая гласит:

<button type="submit" title="<?php echo $this->__('Search') ?>" class="button">

<span>

<span><?php echo $this->__('Search') ?></span> </span>

</button>

Удалите элемент <span> оттуда, так что строка теперь гласит следующее:

<button type="submit" title="<?php echo $this->__('Search') ?>" class="button">

<?php echo $this->__('Search') ?>

</button>

132

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

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

Методы доступа к данным и областям в Magento

Для большей информации по доступу к данным используемым в ваших темах Magento, Вы можете you can обратится к Magento Wiki:http://www.magentoco..._various_scopes.

133

Стилизация зоны контента вашего магазина

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

Взгляните на структуру HTML этой области вашего магазина. Вы увидите, что ее основная структура похожа на верхний колонтитул вашего магазина, с элементом .main-container охватывающим полную ширину и высоту области контента и элементом <div> с классом .main используемый как обертка вокруг всего контента, центрируя в центр экрана:

</div>

</div>

Откройте файл темы local.css снова

(помните, он расположен в директории skin/frontend/default/m2/css),и удалите background-image связанный с элементом.main-container:

.main-container { background: transparent

}

134

На этом этапе, Вы также можете удалить фоновое изображение и цвет связанные с элементом .main, как показано ниже:

.main-container,

.main {

background: transparent

}

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

135

Стилизация колоночных блоков

Ваша новая тема потихоньку начинает обретать форму! Вашей следующей задачей является стилизовать блоки которые выводятся в левой и правой колонках вашего магазина, таких как блоки МОЯ КОРЗИНА(MY CART), СРАВНЕНИЕ ТОВАРОВ(COMPARE

PRODUCTS) и ОПРОС(COMMUNITY POLL) показанных на главной тсранице:

Хотя существует довольно большое их количество, все они содержатся в <div> с классом .sidebar по умолчанию, дополнительный класс -.col-right или .col-left– определяет выводятся ли блоки в левой или правой колонке соответственно. Все блоки следуют единой HTML структуре:

<div class=”block-title”> <strong><span>(Block title)</span></strong>

</div> <div class="">

</div>

</div>

136

Здесь несколько задач, которые Вы можете решить:

1.Настроить соответствующие шаблоны, чтобы сделать текст в элементе .block-title семантически пригодным используя элементы <h3> вместо <strong>.

2.Настроить внешний вид этих блоков в целом (Вы можете вернуться к настройке конкретных блоков позднее).

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

Работая с вверху вниз в боковой панели, начнем с блока МОЯ КОРЗИНА(MY CART):

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

расположенный в директории /app/frontend/base/default/template/checkout/cart

Скопируйте файл sidebar.phtml в соответствующую директорию в вашей новой теме

( /app/frontend/default/m2/template/checkout/cart ). Откройте файл и найдите строку гласящую:

<span>

<?php echo $this->__('My Cart') ?> </span>

</strong>

137

Удалите элементы <strong> и <span>, замените их единственным элементом <h3> что бы обернуть PHP, который выводит имя блока (Моя Корзина(My Cart), в этом блоке):

<h3>

<?php echo $this->__('My Cart') ?> </h3>

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

Это потому что элемент <h3> еще не стилизован, как должен быть: это будет раскрыто позже в этой главе.

Настройка блока COMPARE PRODUCTS боковой панели

Блок СРАВНЕНИЕ ТОВАРОВ(COMPARE PRODUCTS) располагается ниже блока Моя Корзина(My Cart) в боковой панели:

Воспользовавшись подсказками путей шаблонов снова, Вы обнаружите что блок 'compare products'

расположен в директории/app/frontend/base/default/template/catalog/product/compare и

называется sidebar.phtml, как это было в случае с блоком Моя Корзина(My Cart):

138

Скопируйте и вставьте sidebar.phtml в соответствующию директорию, вашей новой темы и начните его редактировать, как мы делали с блоком Моя Корзина(My Cart), найдите строку гласящую:

<span>

<?php echo $this->__('Compare Products') ?>

<?php if($this->helper(‘catalog/product_compare’)¬>getItemCount()>0): ?>

<small>

<?php

echo $this->__('(%d)', $this->helper('catalog/product_compare')->getItemCount()) ?>

</small> <?php endif; ?>

</span>

</strong>

Как и ранее, замените элементы <strong> и <span> единственным элементом <h3>, оставляя фрагмент <?php>, предполагая, что Вы хотите, чтобы сохранялось количество сравниваемых товаров. Новый код будет следующим:

<h3>

<?php echo $this->__('Compare Products') ?>

<?php if($this->helper(‘catalog/product_compare’)¬>getItemCount()>0): ?>

<small>

<?php

echo $this->__('(%d)', $this->helper('catalog/product_compare')->getItemCount()) ?>

</small> <?php endif; ?>

</h3>

Если Вы загрузите файл и обновите фронтэнд вашего магазина, Вы увидите заголовок отображаемый в таком же стиле как заголовок блока Моя Корзина(My Cart):

139

Настройка блока опроса боковой панели.

В такой же манере как для блоков 'cart' и 'compare products' для боковой панели, Вы можете настроить разметку для блока опрос.

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

/app/design/ frontend/default/m2/layout и найдите строку гласящую следующее, которую Вы добавили ранее:

Ниже строки которая гласит

<removename="paypal.partner.right.logo"/> но выше </default>

Добавьте эту новую инструкцию макета чтобы удалить блок опрос из левой и правой боковых панелей:

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

140

Стилизация блоков боковой панели

Теперь, когда Вы закончили изменение разметки блоков боковой панели, Вы можете начать стилизовать ее. Вернемся к редактированию файла local.css темы Magento, расположенный в директории /skin/frontend/default/m2/css вашей установки Magento.

Во-первых, имеет смысл стилизовать блок в целом, т.е. применить CSS к элементу .block внутри области .sidebar. Здесь, Вы можете удалить границу, примененную вокруг всех блоков и заменить ее пунктирной границей 2 пикселя шириной по нижнему краю блока, а также применить небольшой отступ от низа блока, чтобы придать большее значение пространству между элементами:

.sidebar .block { border-color: #b3b3b3; border-style: dotted; border-width: 0 0 2px 0; padding-bottom: 5px

}

Далее, вернемся к стилизации заголовков блоков. Как Вы только что видели, заголовки блоков содержатся в элементе <div> класса .block-title, так что Вы можете применить следующий стиль к ним:

.sidebar .block-title { background: none; border-bottom: none

}

.sidebar .block-title h3 { color: #f76300;

font-size: 125%

}

141

Этот CSS возвращает заголовкам оранжевый цвет, уменьшает размер используемого текста, а также удаляет градиент фонового изображения, примененный к элементу .block-title ранее. Если Вы теперь обновите ваш магазин, Вы должны увидеть, что название блока теперь болеешь вписывается в наш новый дизайн:

Стилизация конкретного блока боковой панели

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

Чтобы найти класс, ссылающийся на элемент <div> который необходимо стилизовать, Вы можете использовать браузер 'Inspect Element', Панель Инструментов Разработчика, такой как Dragonfly в Opera, расширение Вэб Разработчик в Firefox, или 'Inspect Element' в Google Chrome. В противном случае Вы можете просто посмотреть на исходный код страницы.

В любом случае, Вы увидите, что классом необходимого нам блока Моя Корзина(My

Cart) является .block-cart (обычно, классы соответствуют шаблону .block-имя функции с которой связан блок). Вы теперь можете добавить конкретную стилизацию к этому блоку! Для этого примера, Вы добавите иконку корзинки на фон блока Моя Корзина(My Cart). Само изображение выглядит следующим образом, увеличенное:

142

Откройте файл local.css вашей темы (в директории /skin/frontend/default/m2/css) и добавьте следующий CSS, чтобы показать на фоне изображение корзины, и задать ему отступ справа, так чтобы контент не перекрывал фоновое изображение, уменьшая его удобочитаемость:

.sidebar .block-cart .block-content {

background: transparent url("../images/sidebar_cart_bg.png") no-repeat right center;

padding-right: 50px

}

Если Вы обновите фронтэнд вашего магазина после загрузки файла local.css заодно и изображение sidebar_cart_bg.png (которое необходимо поместить в директорию /skin/frontend/default/m2/images) и посмотрите на блок Моя Корзина(My Cart), Вы увидите что иконка отображается в блоке боковой панели:

Стилизация нижнего колонтитула вашего магазина

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

Еще раз редактируем файл local.css вашей новой темы. Также как верхний колонтитул и область основного контента, нижний колонтитул состоит из внешней 'обертки' <div>, с классом .footer-container, который включает еще один <div>, с классом .footer, который уже содержит актуальный контент нижнего колонтитула вашего магазина.

143

Во-первых, воспользуемся CSS чтобы удалить светло-синею границу вдоль верхней части области нижнего колонтитула и отключим background-color для полной ширины экрана, сохраняя дизайн нашей темы фиксированной ширины:

.footer-container { background:transparent; border-width: 0

}

Также сейчас хорошее время для изменения цвета фона, чтобы сделать контент отчетливее и вернуть отступ в элементе .footer ровно на 10 пикселей (10px) с верхнего, правого, нижнего и левого краев элемента <div>:

.footer { background: #803300; padding: 10px

}

Если Вы сохраните и загрузите ваш файл local.css и посмотрите на фронтэнд вашего магазина еще раз Вы увидите разницу, ваш нижний колонтитул выглядит так:

Нижний колонтитул вашего магазина Magento 1.4 в основном стилизован! Теперь Вы можете перейти к более детальной настройке.

Изменение ссылок нижнего колонтитула

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

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

144

Вы увидите, что подсказки путей шаблонов сообщат нам, что файл шаблона нижнего колонтитула расположен в директории /app/design/frontend/default/m2/template/page/html:

Также как и в другие разы, когда Вы изменяли файла шаблонов вашей темы, вам необходимо скопировать footer.phtml из/app/design/frontend/base/default/template/page/html в директорию шаблона вашей темы в /app/design/frontend/default/m2/template/page/html. Содержимое этого файла является относительно небольшим по сравнению с другими файлами шаблонов Magento, которых Вы могли видеть:

<?php echo $this->getChildHtml() ?>

<p class="bugs"><?php echo $this->__('Help Us to Keep Magento Healthy') ?> - <a href="http://www.magentocommerce.com/bug-tracking" onclick="this.target='_blank'"><strong><?php echo $this->__('Report All Bugs') ?></strong></a> <?php echo $this->__('(ver. %s)', Mage::getVersion()) ?></p>

<address><?php echo $this->getCopyright() ?></address>

</div>

Выражение PHP <?php echo $this->getChildHtml()?> извлекает содержимое, связанное с областью нижнего колонтитула. Вы можете редактировать его при помощи функции CMS Magento.

Строки, содержащиеся в элементе <p> с классом .bugs, это то что вставляет версию Magento в область нижнего колонтитула, так что мы удалим их. Ваш файл footer.phtml теперь должен выглядеть следующим образом:

<?php echo $this->getChildHtml() ?>

<address><?php echo $this->getCopyright() ?></address>

</div>

145

Оставшаяся строка, <address><?php echo $this->getCopyright() ?></address>, вставляет сообщение об авторских правах, который Вы могли видеть в нижнем колонтитуле ранее:

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

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

146

Стандартное значение объявление об авторских правах

Стандартное значение располагается в файле config.xml в директории Magento /app/code/core/Mage/Page/etc, но не рекомендуется редактировать этот файл ядра Magento, чтобы сохранить возможность легкого обновления Magento в будущем.

Тема на данный момент

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

Magento:

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

147

Резюме.

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

• Как настраивать общие элементы верхнего колонтитула вашего магазина Magento, включая:

o Форму мини поиска

o Логотип вашего магазина

oСсылки учетной записи пользователя 'быстрого доступа'

•Как стилизовать основные структурные элементы области основного контента вашего магазина Magento, включая блоки боковой панели такие как: ° БлокМоя Корзина(My Cart)

oБлок Сравнения Товаров(Compare Products)

oБлок Опрос(Community Polls)

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

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

148

Глава 6: Продолжаем тематизациюMagento.

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

•Внедрение необычных шрифтов в ваш магазин Magento используя @font-face

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

•Стилизация дополнительных областей магазина Magento включая страницу авторизации

•Создание и настройка навигации вашего магазина

Тема на данный момент.

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

149

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

Использование @font-face с Magento 1.4

Для дизайнеров и разработчиков один и самых разочаровывающих моментов при создании вэб-сайтов и магазинов было отсутствие поддержки пользовательской типографии на сайтах. CSS атрибут @fontface позволяет вам более надежно отображать специфические шрифты посетителям вашего сайта.

Лицензирование шрифта.

Многие шрифты не лицензированы для использования с @font-face, как существует возможность для скачивания всеми оригинальных файлов шрифтов. Воспользовавшись сервисами такими как Google Webfonts ( http://code.google.com/webfonts ) и

Font Squirrel ( http://www.fontsquirrel.com ) предлагающих огромное количество шрифтов с открытой лицензией.

Логотип магазина M2 использует шрифт Franchise (http://derekweathersbee.com/franchise/) от Derek Weathersbee, который - к счастью –пригоден для использованию с @font-face.

150

Преобразование шрифтов для @font-face

Есть целый ряд доступных форматов шрифтов, которые используются с @font-face. Обычно, Вы можете использовать шрифт только одного формата, такого как TrueType или OpenType. Чтобы обеспечить наибольший выбор шрифтов доступных вашему магазину Magento, Вы можете захотеть преобразовать в различные форматы.

Существует целый ряд онлайн сервисов преобразования @font-face, которые генерируют необходимые вам CSS и шрифты, включая

Генератор Шрифта Font Squirrel http://www.fontsquirrel.com/fontface/generator

Кросс браузерная поддержка @font-face

Обеспечивается удивительно хорошая поддержка для @font-face даже в самых старых версиях браузеров.

EOT: Internet Explorer

Формат шрифтов EOT (Embedded Open Type) поддерживается во всех версиях Internet Explorer.

TTF: Safari, Opera, Chrome, и Firefox

Safari с версии 3.2 и далее, Opera с версии 10 и далее, Firefox с версии 3.5 и далее и все версии

Chrome поддерживают шрифты TTF (TrueType Format) в@font-face.

OTF: Safari, Opera, Chrome, и Firefox

Аналогично формату TrueType, OTF (OpenType Format) поддерживается Safari с версии 3.2 и далее, Opera с версии 10 и далее, Firefox с версии 3.5 и далее и все версии Chrome.

SVG: iPhone и Chrome

Формат SVG (Scalable Vector Graphics format) поддерживается браузерами iPhone и Chrome. Файлы шрифтов SVG особого формата, который содержит векторное изображение для каждого символьного знака и буквы, приводя к легкому масштабированию.

WOFF: Firefox

Формат WOFF (Web Open Font Format) на данный момент поддерживается Firefox, но постепенно становится стандартом для всех основных браузеров, включая Opera, Microsoft, и Mozilla.

151

CSS для @font-face

Скрипт CSS использующий атрибут @font-face достаточно простой.

В файле local.css вашей новой темы (в директории /skin/frontend/default/m2/css), добавьте

следующее, в самом верху файла:

@font-face {

font-family: 'FranchiseRegular';

src: url('../types/franchise-webfont.eot');

src: local('?'), url('../types/franchise-webfont.woff') format('woff'), url('../types/franchise-webfont. ttf') format('truetype'), url('../types/franchisewebfont. svg#webfontgvcdROVT') format('svg');

font-weight: normal; font-style: normal;

}

Обратите внимание на порядок, в котором различные форматы шрифтов представлены в CSS, это максимизирует браузерную поддержку.

Теперь загрузите преобразованные файлы шрифтов в директорию /skin/frontend/default/m2/types. В

итоге, Вы можете просто ссылаться на @font-face в атрибуте CSS font-family в вашем файле local.css:

h1, h2, h3, h4, h5, h6 {

font-family: FranchiseRegular, sans-serif;

}

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

Так что Вы, можете добавить text-transform: uppercase в CSS тоже:

h1, h2, h3, h4, h5, h6 {

font-family: FranchiseRegular, sans-serif; text-transform: uppercase

}

152

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

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

Аналогично, в других заголовках, которые используют элемент <h1>, <h2>, <h3>, <h4>,

<h5> или <h6> в вашем магазине Magento, этот новый шрифт будет отображаться.

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

153

После добавления декларации @font-face, Вы должны видеть, что ваш заголовок выглядеть

следующим образом:

Регулирование размера шрифта

Различные шрифты имеют тенденцию к использованию различных, x-heights (то есть, вертикальную высоту символа в шрифте).

Вы можете учесть это в ваших стилях используя атрибут CSS font-size-adjust в:

h1, h2, h3, h4, h5, h6 {

font-family: FranchiseRegular, sans-serif; text-transform: uppercase font-size-adjust:0.5;

}

Вы можете найти больше информации об атрибуте font-size-adjust по адресу http://www.quackit.com/css/properties/ font-size-adjust.cfm.

154

Better results for different weights of a typeface

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

/* Определение нового утолщенного шрифта Franchise */

@font-face {

font-family: 'FranchiseBold';

src: url('../types/franchisebold-webfont.eot');

src: local('?'), url('../types/franchisebold-webfont. woff') format('woff'), url(../'types/franchisebold-webfont. ttf') format('truetype'), url(../'types/franchisebold-webfont. svg#webfontgvcdROVT') format('svg'); font-weight: normal;

font-style: normal;

}

h1 strong{

font-family: FranchiseBold, sans-serif;

}

Представление учетной записи пользователя Magento

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

•Представление авторизации пользователя в учетной записи

•Представление создания учетной записи

Стилизация представления авторизации

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

на Авторизоваться(Log In):

155

Как Вы можете видеть, к представлению авторизации уже применен стиль из основного пакета

Magento:

Как Вы делали ранее, включите функцию Magento Подсказки Путей Шаблонов(Template Path Hints) в

административной панели

в Система(System) |Конфигурация(Configuration) | Разработчик(Developer) и Вы увидите что соответствующий файл шаблона находится в директорииapp/design/frontend/base/default/template/customer/form и называется login.phtml. Скопируйте этот файл в директорию app/design/frontend/default/m2/template/customer/form и откройте

его для редактирования: ваша цель сделать блокСоздать Учетную Запись(Create An Account) более понятным для пользователей пытаясь увеличить количество регистрирующихся клиентов на вашем сайте. В файле login.phtml перейдите к следующим линиям:

<h2><?php echo $this->__('New Customers') ?></h2>

<p><?php echo $this->__('By creating an account with our store, you will be able to move through the checkout process faster, store multiple shipping addresses, view and track your orders in your account and more.') ?></p>

</div>

156

Добавьте изображение под параграфом.

Заключая его в элемент параграф класса create-an-account-image для более легкой стилизации в

будущем:

<h2><?php echo $this->__('New Customers') ?></h2>

<p><?php echo $this->__('By creating an account with our store,you will be able to move through the checkout process faster, store multiple shipping addresses, view and track your orders in your account and more.') ?></p>

<a href="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB);

?>customer/account/create"><img src="<?php echo $this->getSkinUrl('images/get-an- account.png');?>" alt="Get an account" />

</a>

</p>

</div>

Обратите внимание на использование метода getSkinUrl():

Он вставляет путь к директории оболочек (то есть, /skin/frontend/default/m2) на страницу без необходимости помнить его каждый раз когда он вам необходим.

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

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

названием get-an-account.png в директорию /skin/frontend/default/m2/images:

157

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

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

колонки на странице – блок Новый Покупатель(New Customers) слева и блок Зарегистрированный

Покупатель(Registered Customers) справа—содержащиеся в элементе <div> класса .account-login. Каждая колонка имеет класс .col-1 и затем добавляется класс определяющий ее назначение: .newusers и .registered-users соответственно. Внутри этих элементов следующий

элемент <div> класса .content, который является к чему применяется в настоящий момент стилизация

фона. Кнопки Создать Учетную Запись(Create an Account) и Авторизоваться(Log In) внизу этих колон с их собственными элементами <div> с классом .buttons-set.

Удалите фоновое изображение этих элементов <div>, используя CSS в файле local.css вашей темы в

директории /skin/frontend/default/m2/css и установите белый цвет фона этих элементов:

div.new-users div.content, div.registered-users div.content, div.new-users div.buttons-set, div.registered-users div.buttons-set { background: #FFF

}

158

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

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

фокусируется на одном из полей в блоке Зарегистрированные Пользователи(Registered

Customers).

159

На данный момент, Если Вы установите фокус на поле Адрес Электронной Почты(Email

Address) перейди при помощи клавиши Tab или кликнув на него мышкой,

Вы увидите, что цвет фона изменится на голубой:

Как только вновь откроете файл local.css вашей новой темы и примените следующий код, чтобы

изменить поведение всех текстовых и парольных типов <input>

input[type="text"]:focus,

input[type="password"]:focus,

input[type="file"]:focus,

textarea:focus, select:focus { background: #fff0e7

}

160

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

конкретный:

.registered-users input[type="text"]:focus,

.registered-users input[type="password"]:focus,

.registered-users input[type="file"]:focus,

.registered-users textarea:focus,

.registered-users select:focus { background: #fff0e7

}

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

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

Функция Запомнить меня на странице авторизации

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

по адресуhttp://www.magentoco...wthread/196359/.

161

Стилизация представления регистрации учетной записи

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

нажать кнопку Создать Учетную Запись(Create an Account) добавленную вами в представление авторизации Magento ранее. Альтернатива этому, перейти в браузере к

адресу http://www.example.com/magento/customer/account/create/, если ваша Magento установлена в

директорию /magento домена example.com.

Вы увидите что представление Создать Учетную Запись(Create an Account) вашего магазина все еще похоже на основную тему.

Вы увидите что соответствующий файл шаблона называемый register.phtml в

директории app/frontend/base/default/template/customer/form/ если Вы воспользовались сервисом подсказок путей шаблонов:

Вы можете оставить app/design/frontend/base/default/template/customer/widget/name.phtml как есть; этот

файл шаблона, который используется для генерации полей Имя(First Name) и Фамилия(Last Name). На этой стадии Вы сфокусируетесь на стилизации этого представления вместо редактирования шаблона, так что перейдем к стилизации этих блоков, как Вы делали, это ранее добавив CSS в

файл local.css вашей темы:

div.fieldset { background: #FFF

}

162

Поскольку обе формы ПЕРСОНАЛЬНАЯ ИНФОРМАЦИЯ(PERSONAL

INFORMATION) и РЕГИСТРАЦИОННАЯ ИНФОРМАЦИЯ(LOGIN INFORMATION)заключенные в элементы <div> с классом .fieldset, сравнительно легко убрать стиль через эти элементы:

Навигация в Magento

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

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

директории app/design/frontend/base/default/template/catalog/navigation и называется top.phtml.

163

Вы видите, что файл на данный момент выглядит так:

<?php $_menu = $this->renderCategoriesMenuHtml(0,'level-top') ?> <?php if($_menu): ?>

<?php echo $_menu ?> </ul>

</div>

<?php endif ?>

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

<li>

<a href="<?php echo $this->getUrl('')?>"> <?php echo $this->__('Home') ?>

</a>

</li>

<li>

<a href="<?php echo $this->getUrl('about')?>"> <?php echo $this->__('About') ?>

</a>

</li>

<li>

<a href="<?php echo $this->getUrl('customer-service')?>"> <?php echo $this->__('Customer Service') ?>

</a>

</li>

</ul>

</div>

Обратите внимание на использование метода getUrl() чтобы вставить путь к каждой странице. Если Вы возьмете ссылку Customer Service в качестве примера—<?php echo $this->getUrl('customer-service')?>—

Вы увидите, что Вы создаете ссылку к странице с URL.

164

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

Стилизация для навигации унаследована из основного пакета стандартного интерфейса, так что Вы можете переписать это в local.css в директорииskin/frontend/default/m2/css, превратив навигационную панель в темно-оранжевую:

.nav-container { background: none

}

ul#nav { background: #803300

}

Вы также можете стилизовать цвет ссылок что бы:

#nav li a { color: #999

}

#nav li a:hover {

color: #FFF

}

Вот и все, навигация стилизована под ваш новый магазин Magento:

Вам также может оказаться полезным Magento вики, если Вы хотите непосредственно кодировать домашнюю ссылку в навигации вашей темы, но хотите оставить оставшуюся часть меню для динамической генерации в Magento: http://www.magentoco...ink_to_menu_bar.

165

Сокрытие пунктов меню в CSS

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

используя display: none. Смотрите Magento вики по адресу: http://www.magentocommerce.com/wiki/4_-

_themes_and_template_customization/catalog/hide_navigation_item_s_with_css.

Представление товара Magento

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

На складе

Если Вы не можете найти ваш товар используя поисковые возможности вашего магазина, вам необходимо изменить установку Отображать Товары Отсутствующие на Складе(Display Out of

Stock Products) в административной панели Magento

(Система(System) | Конфигурация(Configuration) |Запасы(Inventory)) в Да(Yes) вместо значение по умолчанию Нет(No).

166

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

удалите возможность Отослать Письмо Другу(Email to a Friend), а так же возможность Оставить

Первым Отзыв о Товаре(Be the first to review this product) и добавите новый блок в правую

колонку.

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

Как Вы видели, первой задачей является убрать опцию Отослать Письмо Другу(Email to a

Friend) отображаемое под названием товара:

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

Скопируйте файл view.phtml в директории:

app/design/frontend/base/default/template/catalog/product и вставьте в директорию

app/design/frontend/default/m2/template/catalog/product (вам может понадобится создать эту

директорию, если она до сих пор еще не существует).

167

Перейдите к линиям, которые гласят следующее, и удалите их:

<?php if ($this->canEmailToFriend()): ?>

<p class="email-friend"><a href="<?php echo $this->helper('catalog/ product')-

>getEmailToFriendUrl($_product) ?>"><?php echo $this->__('Email to a Friend') ?></a></p>

<?php endif; ?>

Теперь сохраните этот файл в вашу установку Magento и обновите фронтэнд вашего магазина и

ссылка Отправит Письмо Другу(Email to a friend) не должно отображаться:

Как альтернатива, Вы можете установить значение Mage_Sendfriend в Отключено(Disabled) в

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

Отключение отзывов при помощи CMS

Вы можете также отключить возможность Оставить Первым Отзыв о Товаре(Be the first to review

this product) отключив функцию отзывов в Magento если Вы сделаете следующее: Настройка вам

необходимая называется Mage_Review расположенная в

секции Система(System) |Конфигурация(Configuration) | Расширенные(Advanced) административно

й панели Magento. Установите это значение в Отключено(Disable) и обновите кэш если необходимо:

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

Magento должны быть отключены.

168

Настройка макета представления товара

Вашей следующей задачей является убрать блок СРАВНИТЬ ТОВАРЫ(COMPARE PRODUCTS) из правой колонки этой страницы, упростив страницу товара, максимизировав воздействие описание товара и его изображения:

Откройте файл макета local.xml вашей темы и добавьте следующие строки чтобы убрать

блок СРАВНЕНИЯ ТОВАРОВ(COMPARE PRODUCTS):

<!—пропущенный макет --> <catalog_product_view>

</ layout>

Если Вы теперь обновите представление товара, на фронтэнде этот блок, не будет отображаться:

169

Резюме.

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

•Использование атрибута @font-face в CSS с Magento

•Стилизация представлений авторизации и регистрации Magento

•Добавление и настройка навигации в Magento

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

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

170

Глава 7: Расширенная НастройкаМакета Magento.

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

•Стилизация сообщений об ошибках для лучшей помощи покупателям, когда происходят ошибки в Вашем магазине или запрашивается страница, которая более не существует

•Стилизация «Хлебных крошек» Вашего магазина

•Создание собственных блоков для использования в макете магазина

•Добавление эффекта Lightbox на страницы товаров вашего магазина

•Создание собственного файла translate.csv для перевода надписей во всем магазине Magento

•Добавление собственного блока на страницы, контролируемые через систему управления контентом(CMS) Magento

Сообщения об ошибках в Magento и представения

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

•Представление The 'not found', выводится когда посетитель вашего магазина пытается запросить страницу, которая больше не существует

•Сообщение об ошибки при отсутствии JavaScript

•Стандартное 'справочное сообщение', которое выдает информацию покупателю, как правило в отношении действий, которые они только что произвели

171

Настройка представления 404 — not found

Начинем настраивать представление 'не найден' в вашем магазине Magento. Для начала, перейдите на страницу, которая не существует в Вашем магазине Magento.

Например, http://www.example.com/magento/thispagedoesnotexist должно работать, если Ваша установка Magento сделана по адресу http://www.example.com/magento

Ваше следующее действие является определение, какой шаблон Magento используется для предоставления этой страницы;

172

Вы делали ранее, активируйте инструмент Подсказки Путей Шаблонов(Template Path Hints) в административной панели Magento (помните, это находится на страницеСистема(System) |

Конфигурация(Configuration) | Разработчик(Developer)):

Как Вы видите, не существует отдельного шаблона связанного с этой страницей; это реализовано на CMS в Magento. Оставаясь авторизованным в административной панели вашего магазина, перейдите в CMS | (Страницы)Pages и изучите список страниц там представленных:

Назначение страниц 404 ошибка в CMS Magento

Вы можете назначить пользовательскую страницу 404 ошибка в CMS Magento перейдя в (Система)System | (Конфигурация)Configuration | (Вэб)Web | (CMS Страница Нет Маршрута)CMS No Route Page в административной панели вашего магазина.

173

Вы должны увидеть страницу со значением 404 Not Found 1 в колонке Заголовок(Title) (если такой страницы нет – создайте новую страницу и убедитесь что значение URL Key задано как no-route). Кликнете на нее и затем выберите закладку Контент(Content) на левой стороне экрана:

Теперь Вы можете наблюдать содержимое, представленное на этой странице, включая заголовок Whoops, our bad представленный ниже:

174

Целью создания новой темы является создание более похожего вида страницы ошибки 'not found' на ваш магазин, так что сейчас самое время изменить слова, если Вы желаете этого и настроить внешний вид отличный от Default темы Magento.

Удаление значений по умолчанию из содержимого Magento

Если Вы воспользовались содержимым по умолчанию Magento при установке Magento, Вы почти наверняка захотите изменить слова 'Magento Store' в названии вашего магазина!

Отключите Расширенный Редактор Текста(RTE) для поля контент, нажав кнопку Показать/Скрыть Редактор(Show/Hide Editor). Будет показан HTML, который определяет содержимое мтраницы.

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

175

Для справки, следующее является разметкой содержащейся в поле контента этой страницы по умолчанию:

<h1>Whoops, our bad...</h1>

</div>

<dl>

<dt>The page you requested was not found, and we have a fine guess why.</dt> <dd>

<li>If you typed the URL directly, please make sure the spelling is correct.</li> <li>If you clicked on a link to get here, the link is outdated.</li>

</ul>

</dd> </dl> <dl> <dt>What can you do?</dt> <dd>Have no fear, help is near! There are many ways you can get back on track with Magento Store.</dd> <dd>

<li><a onclick="history.go(-1); return false;" href="#">Go back</a> to the previous page.</li>

<li>Use the search bar at the top of the page to search for your products.</li> <li>Follow these links to get you back on track!<br /><a href="{{store url=""}}">Store Home</a> <span class="separator">|</ span> <a href="{{store url="customer/account"}}">My Account</a></li>

</ul>

</dd>

</dl>

176

Обратите внимание на использование {{store url="customer/account"}} в конце этого отрывка, который вставляет корректную ссылку на учетную запись покупателя вашего магазина Magento. Заключить содержимое, исключив элемент <div> с классом .page-title, в новый элемент <div> с

классом .error-page-background-image-wrapper:

<h1>Whoops, our bad...</h1>

</div>

<dl>

<dt>The page you requested was not found, and we have a fine guess why.</dt> <dd>

<li>If you typed the URL directly, please make sure the spelling is correct.</li>

<li>If you clicked on a link to get here, the link is outdated.</li> </ul>

</dd> </dl> <dl> <dt>What can you do?</dt> <dd>Have no fear, help is near! There are many ways you can get back on track with Magento Store.</dd> <dd>

<li><a onclick="history.go(-1); return false;" href="#">Go back</a> to the previous page.</li>

</ul>

</dd>

</dl>

</div>

Сохраните эти изменения, нажав кнопку Сохранить Страницу(Save Page) в верхнем правом углу экрана и затем откройте файл local.css вашей темы (расположенный в

директории /skin/frontend/default/m2/css) и добавьте следующий CSS:

.error-page-background-image-wrapper {

background: transparent url("../images/error-page-background-image¬wrapper.png") no-repeat center left;

min-height: 200px; padding-left: 125px

}

177

Вам необходимо создать изображение под названием error-page-background-image-wrapper. png в директории вашей темы /images (например,/skin/frontend/default/m2/images). Для магазина , Вы можете использовать это изображение:

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

Наконец, Вы можете стилизовать страницу для представление в виде единственной колонки, исключив блоки Моя Корзина(My Cart) и Сравнение Товаров(Compare Products) отображаемые в правой колонке.

178

Вернемся в административную панель вашего магазина Magento и изменим страницу 404 Not Found 1 в разделе CMS | (Страницы)Pages, выбрав закладку Дизайн(Design) на левой стороне экрана:

В секции Макет Страницы(Page Layout), выберите 1 column из выпадающего поля Макет(Layout):

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

Теперь представление 'not found' вашего магазина настроено!

179

Сообщение об ошибки нет JavaScript

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

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

Путь к файлу шаблона интересующего Вас

расположен /app/design/frontend/base/default/template/page/html/notices.phtml:

180

Определите файл в вашей инсталляции Magento и скопируйте его в

директорию /app/design/frontend/default/m2/template/page/html и откройте его для редактирования;

раздел интересующий нас выделен далее:

<?php if ($this->displayNoscriptNotice()): ?> <noscript>

<p><strong><?php echo $this->__('Hi! JavaScript seem to be disabled in your browser.'); ?></strong></p>

<p><?php echo $this->__('You will need to enable JavaScript in your browser to use our store. If you are really stuck, you can call us on 555 6849626 and we will do our best to help'); ?></p>

</div>

</noscript> <?php endif; ?>

<?php if ($this->displayDemoNotice()): ?>

<p class="demo-notice"><?php echo $this->__('This is a demo store. Any orders placed through this store will not be honored or fulfilled.') ?></p>

<?php endif; ?>

Замените текст внутри выражения $this->__(), который содержится внутри элемента <noscript>:

<?php if ($this->displayNoscriptNotice()): ?>

<p><strong><?php echo $this->__(‘Hi! JavaScript seem to be disabled in your browser.’); ?></strong></p>

<p><?php echo $this->__('Hi there! Welcome to the M2 Store.'); ?></p>

<p><?php echo $this->__('You will need to enable JavaScript in your browser to use our store. If you are really stuck, you can call us on 555 6849626 and we will do our best to help'); ?></p>

</div>

</noscript> <?php endif; ?>

181

Если Вы сохраните этот файл и обновите внешний интерфейс Magento с отключенным JavaScript, Вы увидите новое сообщение об ошибки:

Далее, Вы можете стилизовать сообщение об ошибки, добавив CSS в ваш файл local.css (опять же, он расположен в директории /skin/frontend/default/m2/css). Существующий стиль применяется к элементам div.noscript и div.noscript-inner:

.noscript { background: #ffefe4;

border-bottom: 1px #f76300 solid

}

.noscript-inner {

background-position: center 10px !important; padding-top: 65px !important

}

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

182

Стилизация стандартных сообщений в Magento (.note-msg)

Наконец Вы можете стилизовать стандартное сообщение вашего магазина Magento. Чтобы добиться его появления попробуйте найти в вашем магазине что-то что не существует (например, найдите This does not exist):

На результирующей странице в Magento, которую Вы увидите после исполнения этого запроса, будет сообщение которое Вы хотите стилизовать будет показано сообщение Ваш запрос не вернул результатов(Your search returns no results):

Короткое исследование исходного кода этой страницы показывает что элемент необходимый для стилизации в нашем новом CSS файле темы Magento является p.note-msg. Структура исходного HTML для этого сообщения следующая:

Your search returns no results. </p>

Это определяет общую структуру этих сообщений, где Вы видите их появление в Magento. Откройте файл local.css вашей темы в директории/skin/frontend/default/m2/css и настройте вид этих сообщений так чтобы они выводились более согласующимися с остальным дизайном вашей новой темы, в тоже время отличались от основного содержания вашего магазина:

p.note-msg { background: #f76300;

border: 2px #e45b00 solid; border-radius: 10px; color: #FFF;

padding: 10px; text-align: center;

}

183

Теперь изменив цвета фона и переднего плана и изменив выравнивание текста внутри сообщения, сохраните и загрузите новый файл local.css, затем обновите результирующую страницу поиска сгенерированную ранее:

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

Отображение системных ошибок для разрабатываемых сайтов

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

разработки: http://www.magentocommerce.com/wiki/3__store_setup_and_management/configure_magento_error_ page.

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

наткнулась PHP ошибку во время выполнения, и она не может восстановиться от этого; самое легко что можно сделать это посмотреть файл протокола ошибок сервера для определения проблемы.

184

Стилизация «Хлебных крошек» вашего магазина

Элементом, который можно увидеть в магазине Magento, но который все еще не был, упомянут, является «Хлебные крошки». Чтобы увидеть «хлебные крошки», перейдите на одну из страниц в верхней навигации дизайна вашего магазина, такую как Услуги (Customer Service). «Хлебные крошки» выводятся ниже навигации и отображают где находится покупатель в структуре вашего сайта:

«Хлебные крошки» так же отображаются на страницах товаров, таких как следующая страница товара называемого M2 Test Product:

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

185

Файл шаблона Magento называемый breadcrumbs.phtml и расположенный в директории /app/design/frontend/base/default/template/page/html. Скопируйте файл breadrcumbs.phtml из этой директории в директорию вашей темы

(например, /app/design/frontend/default/m2/template/page/html) и откройте его для редактирования:

<?php if($crumbs && is_array($crumbs)): ?>

<?php foreach($crumbs as $_crumbName=>$_crumbInfo): ?> <li class="<?php echo $_crumbName ?>">

<?php if($_crumbInfo['link']): ?>

<a href="<?php echo $_crumbInfo['link'] ?>" title="<?php echo $this- >htmlEscape($_crumbInfo['title']) ?>"><?php echo $this->htmlEscape($_crumbInfo['label'])

?></a>

<?php elseif($_crumbInfo['last']): ?>

<strong><?php echo $this->htmlEscape($_crumbInfo['label']) ?></strong>

<?php else: ?>

<?php echo $this->htmlEscape($_crumbInfo['label']) ?>

<?php endif; ?>

<?php if(!$_crumbInfo['last']): ?>

</li>

<?php endforeach; ?> </ul>

</div>

<?php endif; ?>

Этот код по существу вставляет «Хлебные крошки» внутрь страницы как элемент неупорядоченный список (<ul>) с заключенным в элемент списка (<li>) каждого раздела вашего сайта связанного с ним.

186

Теперь Вы можете настроить «Хлебные крошки» для вашего сайта, изменив символ слэша ( / ), который разделяет каждую позицию, символом стрелки, представленной в HTML как ( → )

<?php if($crumbs && is_array($crumbs)): ?> <div class="breadcrumbs">

<ul>

<?php foreach($crumbs as $_crumbName=>$_crumbInfo): ?> <li class="<?php echo $_crumbName ?>">

<?php if($_crumbInfo['link']): ?>

<a href="<?php echo $_crumbInfo['link'] ?>" title="<?php echo $this- >htmlEscape($_crumbInfo['title']) ?>"><?php echo $this->htmlEscape($_crumbInfo['label'])

?></a>

<?php elseif($_crumbInfo['last']): ?>

<strong><?php echo $this->htmlEscape($_crumbInfo['label']) ?></strong>

<?php else: ?>

<?php echo $this->htmlEscape($_crumbInfo['label']) ?>

<?php endif; ?>

<?php if(!$_crumbInfo['last']): ?>

<?php endif; ?> </li>

<?php endforeach; ?> </ul>

</div>

<?php endif; ?>

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

187

Теперь Вы можете также стилизовать «Хлебные крошки» сосредоточившись на div.breadcrumbs в вашем файле local.css, изменив цвет ссылок на оранжевый магазина M2 Store со стандартного синего цвета и добавив немного пространства ниже «Хлебных крошек» чтобы сделать более равные расстояния сверху и снизу «хлебных крошек»:

div.breadcrumbs { padding-bottom: 12px;

}

.breadcrumbs li { color: #666;

}

.breadcrumbs li a { color: #f76300

}

После сохранения и загрузки измененного вами файла local.css, Вы увидите, что стиль который Вы только что применили отображается на элементе «хлебные крошки»:

Вы можете также определить «хлебные крошки» в других файлах шаблонов (.phtml) включенных в файлы вашей темы Magento.

<?php

echo $this->getLayout()->getBlock('breadcrumbs')->toHtml(); ?>

188

Вы также можете настроить «хлебные крошки» используя функцию addCrumb():

<?php

$breadcrumbs = $this->getLayout()->getBlock(‘breadcrumbs’); $breadcrumbs->addCrumb('home', array('label'=>Mage::helper('cms')->__('Home'), 'title'=>Mage::helper('cms')->__('Home'),'link'=>Mage::getBaseUrl()));

echo $this->getLayout()->getBlock('breadcrumbs')->toHtml();

Функция addCrumb() принимает следующие параметры:

•Внутреннее имя крошки (Home, в предыдущем примере)

•Массив, состоящий из:

o Текст, отображаемый между элементами <a> (метка) (label)

o Заголовок title ссылки, связанный с атрибутом title внутри элемента ссылки

oЗначение link ссылки, которым является адрес «хлебной крошки»(то есть URL этой страницы в «хлебных крошках»)

Внедрение JavaScript в вашу тему Magento: Эффекты в стиле Lightbox на странице товара Magento

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

Добавление файла JavaScript используя макет Magento

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

Альтернативный метод

Вы также можете скопировать файл основной темы head.phtml из

директории /app/design/frontend/base/default/page/html в соответствующую директорию вашей темы и включите JavaScript внутрь элемента <head>, но метод используемый ранее более правильный и менее вероятно возникновение ошибок во время обновления Magento.

189

Скачайте Lightbox2 по адресу http://www.huddletogether.com/projects/lightbox2/ и сохраните файлы

JavaScript в директорию расположенную в папках вашей темы /js. Сохраните файл lightbox.css в директории вашей темы /skin/frontend/default/m2/css, а затем сохраните изображения в директорию

/skin/frontend/default/m2/images.

Откройте файл local.xml вашей темы, размещающийся в

директории /app/design/frontend/default/m2/layout, и откройте его для редактирования. Используя элемент <action> разметки Magento с методом addJs набора атрибутов:

<catalog_product_view>

<action method="addJs"> <script>lightbox/lightbox.js</script>

</action>

</reference> </catalog_product_view>

Обратите внимание, Вы можете установить загрузку этих файлов только на страницах товаров, используя идентификаторы разметки Magento (<catalog_product_view>), так как это единственное место где они требуется в вашем магазине. Атрибут name=head в элементе <reference> сообщает Magento чтобы применялось это действие к элементу <head> вашего магазина Magento.

Вам всего лишь необходимо добавить файл lightbox.js, так как Magento включает prototype.js и scriptaculous.js по умолчанию.

Далее, Вым необходимо включить соответствующий файл CSS чтобы стилизовать Lightbox:

<catalog_product_view> <reference name="head">

<action method="addJs"> <script>lightbox/lightbox.js</script>

</action>

<action method="addCss"> <stylesheet>css/lightbox.css</stylesheet>

</action>

</reference> </catalog_product_view>

190

Редактирование шаблон файла товара чтобы внедрить Lightbox

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

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

называется media.phtml в директории

/app/design/frontend/base/default/template/catalog/product/view:

Как обычно, скопируйте и вставте файл в директорию /template вашей собственной темы (например, /app/design/frontend/default/m2/template) и откройте его для редактирования, перейдя к следующей линии:

<?php

$_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')- >resize(265).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this- >htmlEscape($this->getImageLabel()).'" />';

echo $_helper->productAttribute($_product, $_img, 'image'); ?>

</p>

191

Оберните элементом <a> вокруг элемента <img> сгенерированного здесь, так чтобы он ссылался на большую версию изображения, изменив размер до 500 пикселей в ширину

обратите внимание на использование resize(500)

<p class="product-image"> <?php

$_img = ‘<a rel="lightbox" href="’.$this->helper(‘catalog/image’)->init($_product, ‘image’)->resize(500).’" title="’.$this->htmlEscape($_product->getName()).’">

<img src="'.$this->helper(‹catalog/image›)->init($_product,‹image›)->resize(265).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this- >getImageLabel()).'" />

</a>’;

echo $_helper->productAttribute($_product, $_img, 'image');

</p>

Обратите внимание, что здесь используется rel="lightbox" применительно к элементу <a> , который вызывает использование всплывающего Lightbox-са, если посетитель кликнет на изображение и имеет активированный JavaScript. Также нужно учитывать, что атрибут ссылки title используется в качестве значения заголовка всплывающего изображения (в предыдущем примере вставлено имя товара).

Вы также можете применить эту технику к предыдущему коду, применяется к изображению,

формируемого в <p class="product-image product-image-zoom">.

192

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

Не всплывает

Если всплывающие окно не появляется, два раза кликнете, чтобы убедится, что в исходном коде страницы Magento rel="lightbox" используется корректно и убедится, что файлы JavaScript в правильной директории; в противном случае в вашем магазине может использовать товары разного типа, тогда Вам необходимо изменить другой раздел файла шаблона media.phtml, также как и ранее. Расстояния и разрывы строк в PHP также важны; Вам может понадобится удалить разрыв строк между линиями, чтобы увидеть PHP функцию корректно.

Изменение путей изображений в файле JavaScript

Вы можете заметить, что здесь пропущена картинка в нижнем левом углу всплывающего окна. Это определяется в файле lightbox.js сохраненный вами в директории /js/lightbox ранее;

Откройте lightbox.js для редактирования и расположитесь на следующих линиях:

fileLoadingImage: 'images/loading.gif', fileBottomNavCloseImage: 'images/closelabel.gif',

193

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

директории /images вашей темы (следующий пример предполагает что Magento установлена в под-

директорию /magento, например example.com/magento):

fileLoadingImage: ‘/magento/skin/frontend/default/m2/images/loading.gif’, fileBottomNavCloseImage: ‘/magento/skin/frontend/default/m2/images/closelabel.gif’,

Теперь Вы должны перезагрузить этот файл и обновить страницу и снова вызвать всплывающее окно, чтобы кнопка Закрыть(Close) отображалась корректно:

Это все, Вы установили эффект Lightbox2 в ваш магазин!

Расширения Lightbox для Magento 1.4

Есть также ряд расширений Lightbox для Magento 1.4, включая Magento Easy Lightbox, который Вы можете найти в Magento Connect по адресу http://www.magentoco...o-easy-lightbox.

Добавление условных стилей для Internet Explorer в Magento

Как Вы уже видели, Вы можете использовать файлы макетов Magento чтобы вставлять пользовательские файлы CSS в каждый просмотр во всем магазине. Также Magento позволяет добавлять условные стили в ваши темы, чтобы локализовать несовместимости и ошибки в Internet Explorer.

194

Однажды такая несовместимость ранних версий Internet Explorer может потребовать корректировки (особенно для версий 6 или ниже), такой несовместимостью является неспособность корректно отображать изображения в формате PNG (.png). Заменив любую фоновою картинку используя файл GIF (.gif), Вы можете сохранить прозрачность изображения для удержания посетителей вашего сайта как это только возможно.

Существует JavaScript корректирующий это, такой как IE PNG Fix http://www.twinhelix.com/css/iepngfix/

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

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

Как таковой это хороший пример для демонстрации условных стилей в Magento.

Первой вашей задачей будет сделать версию изображения в .gif; для лучшего вида, лучше всего создать псевдоним изображения бледно-оранжевого цвета, который Вы использовали в фоновом изображении вашей Magento темы (так же как применено к элементу <body>):

Сохраните эту картинку в директорию /images вашей темы (например, /skin/frontend/ default/m2/images) под именем sidebar_cart_bg-ie.gif.

195

Создание новых стилей для предыдущей версии Internet Explorer

Создайте новый файл CSS в директории /css вашей темы Magento (например, /skin/ frontend/default/m2/css ) назвав ie6.css и добавьте следующий CSS, чтобы заменить фон изображения в блоке корзина покупок версией .gif, которую Вы только что создали:

.sidebar .block-cart .block-content {

background-image: url("../images/sidebar_cart_bg-ie.gif");

}

Вам не нужно определять атрибуты background-repeat, background-color или background-position так как они уже определены в вашей теме в файле local.css: Вам просто необходимо здесь переопределить атрибут background-image для IE6.

Варианты для тестирования вашего магазина Magento в IE

Если Вы не имеете предыдущую версию Internet Explorer установленной, Вы можете установить прогрпмму называемую IETester по адресу http://www.my-debugbar.com/wiki/IETester/HomePage чтобы одновременно запустить несколько версий Internet Explorer на вашем PC. IETester имеет несколько ограничений, так что обязательно прочитайте подробности на сайте перед использованием!

Использование макета Magento для установки условных стилей

Следующей задачей стоящей перед вами это сообщить Magento чтобы она загружала новые стили созданные Вами для IE6. Откройте файл local.xml в вашей теме и добавьте следующее действие макета Magento в идентификатор <default>:

<reference name="head">

</action>

</reference> </default>

196

Сохраните и загрузите этот файл в вашу сборку Magento и просмотрите внешний интерфейс вашего магазина Magento в Internet Explorer 6:

Без использования условных стилей и GIF формата, эта область вашего магазина Magento будет выглядеть примерно так в Internet Explorer 6, как ниже показано (обратите внимание на отличающуюся тень серого цвета вокруг иконки корзины):

Если Вы посмотрите исходник страницы, Вы увидите, что соответствующий HTML был добавлен в элемент <head> вашей темы:

<!--[if IE 6]>

197

Добавление нового блока в вашу тему Magento

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

Несмотря на то, что Вы можете просто отредактировать файл footer.phtml вашей темы в директории /app/design/frontend/default/m2/template, имеет смысл создать новый блок для этого содержимого. Например, если Вы решите переместить логотипы поставщиков на другую позицию внутри вашего магазина в будущем, Вы бы смогли это сделать легко при помощи макета Magento.

Создание статического блока в CMS Magento

Авторизуйтесь в административной панели вашей установки Magento и перейдите в CMS |

Статические Блоки(Static Blocks):

Нажмите кнопку Добавить Новый Блок(Add New Block) в верхнем правом углу экрана:

198

Заполните поля Название Блока(Block Name) и Идентификатор(Identifier) и убедитесь что поле Статус(Status) установлено в Активировано(Enabled):

Далее, Вам необходимо заполнить поле Содержимое(Content), вставив несколько логотипов поставщиков, используя Расширенный Текстовый Редактор(Rich Text Editor) поставляемый в CMS Magento. Нажмите на иконку 'вставить изображение' (изображение дерева):

Появится всплывающее окно, чтобы позволить Вам выбрать изображения, которые Вы хотите вставить в этот статический блок,

199

Нажмите иконку, которая появляется рядом с полем ввода текста для URL Картинки(Image URL):

Следующее всплывающее окно появится над исходным; Закройте исходное всплывающее окно и нажмите на кнопку Обзор файлов(Browse Files), и выберите файлы, которые Вы хотите использовать в блоке логотип поставщиков:

200

Как только Вы выберите файлы, который Вы желаете использовать, выберете кнопку Загрузить Файлы(Upload Files) и Вы увидите изображение(я), которые Вы загрузили:

Закройте это всплывающее окно и вернитесь в редактор этого статического блока и опять нажмите на иконку 'вставить изображение' в Расширенном Редакторе Текста(Rich Text Editor). Еще раз нажмите иконку рядом с полем URL Изображения(Image URL) и затем выберите изображение(я), которые Вы хотите использовать, нажав на них и нажмите кнопку Вставит Файл(Insert File) в верхнем правом углу экрана:

201

Теперь Вы вернулись в первоначальное всплывающее окно и Magento заполнило за Вас поле URL

Изображения(Image URL). Заполните поля Описание Изображения(Image description) и Название(Title) и нажмите на кнопку Вставить(Insert) в нижнем левом углу всплывающего окна:

Ваше изображение теперь будет отображаться в поле Содержимое(Content):

202

Добавьте сколько нужно логотипов поставщиков и нажмите на кнопку Сохранить Блок(Save Block) в верхнем правом углу экрана чтобы сохранить изменения, которые Вы только что сделали. Теперь откройте файл local.xml в вашей теме Magento (например, в директории

/app/design/frontend/default/m2/layout) и добавьте следующий макет внутрь идентификатора <default>:

<block_id>supplier-logos</block_id> </action>

</block>

</reference>

Предыдущий Magento макет сообщает вашему магазину, чтобы тот отобразил блок supplier-logos, только что Вами сделанный в CMS (обратите внимание на type="cms/block") в области нижнего колонтитула (<reference name="footer">) пред всем другим содержимым (before="-"). Если Вы теперь посмотрите на нижний колонтитул вашего Magento магазина, Вы увидите отображение логотипов поставщиков:

Для более «бесшовного» эффекта перехода Вы можете воспользоваться PNG изображениями с прозрачным фоном.

203

Настройка надписей вашего магазина Magento при помощи translate.csv

Вы можете изменить текст который отображается во всем интерфейсе вашего магазина Magento создав пользовательский файл локализации для вашей темы. К примеру, Вы будете менять формулировку ссылки Моя Учетная Запись(My Account) на Ваша Учетная Запись(Your Account):

Откройте директорию /app/design/frontend/default/m2/locale/ru_RU вашей установки Magento, где ru_RU является ISO кодом языка вашего магазина (Вам может понадобится создать эту директорию, если она не существует). Создайте файл назвав translate.csv и добавьте следующее содержимое в него:

My Account,Ваша учетная запись

Вы также можете добавить 'перевод' 'translations'или изменение для существующих названий ссылок в этот блок добавив дополнительные линии:

My Account,Ваша учетная запись

My Wishlist,Ваш лист пожеланий

My Cart,Ваша корзина

Заметьте что оригинальное значение названия слева, а новое значение для названия справа после разделителя.

Сохраните этот файл в директорию вашей

установки Magento/app/design/frontend/default/m2/locale/ru_RU

204

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

Не видите изменений

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

Управление Кэшем(Cache Management).

Обратите внимание, что предыдущий пример будет затрагивать названия, только назначенных магазинов локализации M2 в вашей панели администрирования. Если Вы желаете чтобы затрагивались названия всех магазинов управляемых вашей установкой Magento, Вам необходимо отредактировать файлы в директории /app/locale.

Добавление пользовательского блока в страницы CMS Magento

Порой в Magento может быть полезным добавить пользовательский блок в вашу тему. Чтобы сделать это откройте административную панель вашей установки Magento и перейдите на страницу в которую Вы хотите добавить пользовательский блок CMS | Страницы(Pages) (в этом примере, воспользуемся страницу О Нас(About) с левоколонночным макетом). На закладке Разработка(Design) добавьте этот макет в поле XML Обновление Макета(Layout Update XML):

</reference>

205

Теперь Вам необходимо создать файл шаблона Magento назвав address.phtml и сохранить его в директорию /app/design/frontend/default/m2/template/pageвашей установки. Добавьте некое содержимое в этот файл в форме адреса вашего магазина:

<h2>M2 Store's Address</h2> <p>

M2 Store <br /> A Street <br /> A City <br /> United Kingdom

</p>

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

Вот и все, Вы вставили новый пользовательский блок в вашу тему Magento!

Резюме.

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

Скачайте книгу: Magento 1.3 Theme Design_RU

На первом этате установки Модулей и Тем. Вы сталкнётесь с ошибками установки.

В этой книге есть несколько советов, как исправить ошибки. В разделе:

Дополнения: Внештатные ситуации и их исправления.

206

<<< < Предыдущая 1 2 34 / 74 5 6 7 > Следующая >>>

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]

#
26.09.2019212.48 Кб29L_04_05_Urok_informatiki.doc
#
26.09.2019161.28 Кб6L_06_Kontrol_na_urokakh_informatiki.doc
#
26.09.2019103.42 Кб8L_08_Metodika_izuchenia_AO_i_PO.doc
#
26.09.2019123.39 Кб10L_11_Obuchenie_obrabotke_grafiki.doc
#
26.09.201984.48 Кб5L_15_Obuchenie_sozdaniyu_kompyuternykh_prezenta...doc
#
11.05.201519.56 Mб318Magento 1.4 Theme Design_RU.pdf
#
11.05.2015970.24 Кб10Mairakova_Galina_Pavlovna.doc
#
11.05.2015976.38 Кб6Mairakova_Galina_Pavlovna1.doc
#
11.05.2015711.46 Кб21Makroekonomika_lektsii.pdf
#
11.05.20151.3 Mб9matan.pdf
#
16.03.201630.79 Mб90Matan_voprosy_1.docx