Создание шаблона для Opencart 1.5.4. Базовые знания.
Opencart — система управления контентом для интернет-магазинов, популярная в России и за рубежом. Основными преимуществами CMS является простота установки и администрирования, маленький вес базы, надежность и хорошая скорость работы даже на сравнительно больших проектах. По сравнению со многими другими системами для opencart не так уж и много шаблонов, поэтому часто пользователи, пытаясь сделать шаблон самостоятельно, сталкиваются с трудностями в поисках ответов на вопросы - как сделать шаблон для Opencart, как его редактировать или изменить. В этой статье рассмотрим создание простого шаблона для Opencart, а в конце статьи у вас будет возможность скачать готовый бесплатный шаблон и использовать его для своих проектов.
Итак, имеем установленный Opencart версии 1.5.4, на данном этапе используется стандартный шаблон Default. Новый шаблон будем делать на базе стандартного, так как в нем есть все необходимые файлы структуры, а также можно будет использовать объявленные в нем стили. Вот так выглядит главная страница сайта сейчас:
Такая одноколоночная структура используется не очень часто, поэтому сначала приведем главную страницу сайта к более привычному виду. Зайдем в админку сайта, дописав к адресу /admin. Включим отображение категорий товаров на главной странице в левой колонке. Для этого перейдем в пункт Дополнения → Модули.
В открывшемся списке модулей выберем модуль Категории и нажмем Изменить. На странице редактирования модуля задается его расположение на сайте.
Для каждой страницы расположение можно задать свое (подробнее об этом можно прочитать в статье Схемы в Opencart. Различная структура сайта для отдельных страниц), но мы пока установим его только для главной страницы: щелкнем Добавить модуль, в появившейся строке выберем страницу Home, Расположение — левая колонка, Статус — Включено, отображение количества товаров и сортировка задаются по желанию. Нажмем Сохранить и вернемся на страницу списка модулей. Зайдем в настройки Слайдшоу (кнопкой Изменить), изменим размеры слайдера на 740х230, не забудем сохранить изменения. Теперь можно перейти на главную страницу сайта и оценить внесенные изменения — структура сайта стала двухколоночной с соответствующей шириной слайдера. Для всех остальных страниц можно настроить другое расположение модулей и другую структуру.
Шаблоны Opencart располагаются по следующему пути: Корень сайта/catalog/view/theme. Приступим к созданию простого шаблона на базе стандартного. Для начала сделаем копию папки шаблона Default. Копию стандартного шаблона назовем Space-cart и в последствии будем работать только с ним. Для того, чтобы активировать шаблон в административной части сайта, выберем его — Система → Настройки → Мой магазин(по умолчанию)[Изменить] → Витрина. На странице Витрина возле метки Шаблон магазина: выберем шаблон Space-cart из выпадающего списка и нажмем Сохранить. Пока новый шаблон не отличается от стандартного, но это первые шаги к созданию своего шаблона для Opencart. Теперь подойдем к редактированию шаблона Opencart поэтапно:
1. Работа с шапкой шаблона Opencart. Что будем делать? Увеличим высоту шапки, установим задний фон шапки, поменяем логотип, изменим вид ссылок и прочие небольшие изменения.
В первую очередь укажем путь к таблицам стилей css, так как все пути остались старые от стандартного шаблона default. Редактирование файла шапки осуществляется по пути space-cart/template/common/header.tpl. Находим в этом файле строку 19 и меняем в ней имя шаблона default на наш space-cart, не забываем сохранить:
- Меняем высоту шапки Opencart. Высоту можно поменять в файле stylesheet.css, который находится по следующему пути: space-cart/stylesheet/stylesheet.css. Находим строку 93 #header и меняем значение height на 270px.
- Установим некликабельный задний фон шапки сайта. Для этого будем использовать заранее подготовленное изображение shining_space. jpg размером 980х270px, которое положим в папку space-cart/image.
Пропишем путь к файлу с изображением:
- Теперь надо поработать с логотипом. Для этого будем использовать картинку space-logo.png. Картинка логотипа меняется в админке сайта: Система → Настройки → Мой магазин(по умолчанию)[Изменить] → Изображения. На странице Изображения нам будет предложено загрузить логотип для сайта. Загрузим наш логотип и нажмем Сохранить. Скачать изображение для логотипа можно здесь - Скачать логотип.
Сейчас логотип расположен наверху шапки, не совсем по центру, что не очень красиво. Разместим его пониже, изменив 102 строку:
(Сейчас и далее в статье вносимые изменения будут выделены полужирным шрифтом)
#header #logo
- Подвинем переключатель языков немного вправо, чтобы он не наползал на логотип и изменим цвет заголовка на белый. Редактируем строку 108:
#language
- Изменим внешний вид Корзины, для начала уберем задний белый фон и установим закругленные края для неактивной корзины. Внимательно вносим следующие изменения на строке 145:
#header #cart .heading
- В строке 158 установим цвет заголовка корзины белый, наклонный шрифт, уберем полужирность:
#header #cart .heading h4
- Уберем белый фон у количества товаров неактивной корзины, редактируем строку 170 следующим образом, удаляем #FFFFFF:
#header #cart .heading a span
- Не забываем отредактировать стиль на строке 194 для активной корзины:
#header #cart.active .heading
- Редактируем поиск. Поиск нужно сделать короче, расположить его по центру между краем шапки и корзиной, убрать лишнюю тень. Правим строку 266:
#header #search
и строку 278, удаляем там строки box-shadow и меняем ширину width:
#header #search input
- Перенесем строчку Войти или зарегистрироваться ближе к середине шапки: Строка 289:
#header #welcome
- Отредактируем расположение и стиль меню ссылок в шапке, начиная со строки 298:
#header .links #header .links a #header .links a + a
- Изменим цвет ссылок и заголовка настройки валюты на строке 117:
#currency #currency a
- В заключение настройки шапки установим ей отступ от верхнего края, рамку и закругленные углы в строке 92:
#header
С шапкой можно сделать еще очень много всего интересного, но это явно не уложится в одну статью, поэтому на этот раз хватит изменений. Шапка в данный момент выглядит так:
2. Этот этап совсем небольшой, но тоже очень важный — изменим задний фон всего сайта, редактируя тег body на строке 6 нашего файла стилей:
body
Задний фон сайта качаем тут - Скачать
3. Меняем внешний вид Главного горизонтального меню сайта. Редактируем строку 328 (удаляем строки box-shadow, меняем border-bottom на общий border, меняем цвет фона):
#menu
4. Редактируем стиль боксов (блоков). Изменим фон и цвет текста, а также цвет рамки у заголовков блоков: Строка 660:
.box .box-heading
Поменяем цвет рамки на черный для тела блока на строке 674:
.box .box-content
5. Изменяем футер: сделаем его темным, закруглим края и изменим цвет текста на белый. Редактируем, начиная со строки 1593:
#footer #footer h3 #footer .column a
6. Сейчас может показаться, что шаблон практически готов, но перейдем на страницу товара или категории и увидим, что у правой колонки нет фона. Это нельзя оставить просто так, поэтому надо добавить стиль, описывающий главный блок контента. Он называется #content, и добавим мы его под строку 770. Придерживаясь нашего основного дизайна, опишем закругленные углы и черную рамку:
#content
7. Установим другой цвет для кнопок сайта. Для неактивных — строка 572:
a.button, input.button
Для активной кнопки строка 596:
a.button:hover, input.button:hover
Результат проделанной работы:
Наш простой шаблон для Opencart готов. Его можно еще очень долго изменять, редактировать и преобразовывать до неузнаваемости, но целью статьи было ознакомление с основами создания шаблонов для Opencart, и, думаю, общее представление вы получили. Скачать готовый бесплатный шаблон для Opencart 1.5.4 можно нажав на ссылку: