Стандартная тема по умолчанию, которая предлагается при установке OpenCart 2.x является базой для ваших новых идей. В ней заложен стандартный дизайн, основанный на популярном CSS фреймворке Bootstrap.
Если Вы желаете изменить стандартную тему, Вам необходимо иметь базовые знания CSS и HTML. Но для некоторых частей дизайна вам понадобятся знания php и javascript.
Структура папок темы по умолчанию (Default)
Перед тем как приступить к созданию или изменение темы, изучите структуру папок и назначение файлов.
Тема по умолчанию (а так же другие темы) разработаны с использованием паттерна MVC (это необходимо помнить т.к ни одна переменная в шаблоне, не может быть выведена просто так, если она не объявлена в текущем контроллере).
Файлы представления, таблицы стилей и изображения для шаблона, расположены по пути catalog/view/theme/default
Папкаdefault содержит следующие папки:
template — папка с «шаблонами» (представлениями)
stylesheet — папка с таблицами стилей
image — папка с изображениями для шаблона (фоны, указатели,итд)
Папка template содержит файлы шаблона c расширением tpl. Данные файлы не используют какой либо сторонний шаблонизатор, а шаблонизация производится с помощью php.
Давайте рассмотрим назначение файлов, в директориях указанных ниже.
common/
header.tpl — шаблон для верхней части страницы (в.т.ч. подключение стилей и скриптов)
footer.tpl — шаблон нижней части страницы (ссылки информация, служка поддержки итд)
home.tpl — шаблон главной страницы (структура и расположение header.tpl, footer.tpl, column_left, column_right.tpl, content_bottom.tpl, content_top.tpl )
column_left.tpl – левая колонка страницы
column_right.tpl – правая колонка страницы
content_bottom.tpl – нижняя часть области контента
content_top.tpl – верхняя часть области контента
currency.tpl – вывод шаблона модуля для переключения валют магазина
language.tpl – вывод шаблона модуля для переключения языков магазина
search.tpl – шаблон модуля поиска (выводится в header.tpl как переменная $search)
buttons.tpl – шаблон кнопок для модуля PayPal Экспресс-платежи
cart.tpl — шаблон модуля корзины в шапке
maintenance.tpl – шаблон страницы при переключении магазина в режим обслуживания
success.tpl – страница о успешном результате выполнения операции (пример, оформление заказа)
product/
product.tpl – шаблон для карточки товара (основная страница товара)
category.tpl – страница списка товаров в категории
manufacturer_info.tpl – информация о производителе
manufacturer_list.tpl – страница список производителя
compare.tpl – страница сравнения товаров
review.tpl – отзывы о товаре в product.tpl (загружается Jquery через load() )
search.tpl – шаблон страницы поиска и вывода результатов
special.tpl – шаблон страницы Акции
information/
contact.tpl – шаблон для станицы контактов (страница Связаться с нами)
information.tpl – шаблон для вывода статей
sitemap.tpl – станица Карта сайта
extension/module/ — шаблоны для модулей
category.tpl – модуль Категории
filter.tpl — Фильтр
html.tpl — HTML контент
information.tpl — Информация
slideshow.tpl — Слайдшоу
banner.tpl — Баннер
carousel.tpl — Карусель
bestseller.tpl – Хит продаж
featured.tpl — Рекомендуемые
latest.tpl — Последние
special.tpl — Акция
store.tpl – шаблон модуля Магазин (выбора магазина при мультимагазине)
account.tpl – модуль Личный кабинет
affiliate.tpl – Модуль партнерская программа
google_hangouts.tpl – Модуль Google Hangouts
pp_layout.tpl — PayPal Экспресс-платежи
amazon_checkout_layout.tpl – не используется в РФ
checkout/ — шаблоны страниц Оформления заказа и Корзины покупок
cart.tpl – страница Корзины покупок
login.tpl – страница Авторизации
register.tpl – страница Регистрации
checkout.tpl – общий шаблон станицы оформления заказа
guest.tpl – шаг, оформление без регистрации
guest_shipping.tpl – шаг, ввод данных доставки (при оформлении без регистрации)
payment_address.tpl – шаг, ввод личных данных адреса плательщика
shipping_address.tpl – шаг, ввод данных нового адреса доставки
payment_method.tpl – шаг, выбор способа оплаты
shipping_method.tpl – шаг, выбор способа доставки
confirm.tpl – шаблон шага подтверждения заказа
account/ — шаблоны страниц Личного кабинета
account.tpl – шаблон главной страницы Личного кабинета
login.tpl – страница авторизации
register.tpl – страница регистрации
address_form.tpl – страница формы редактирования адреса
address_list.tpl – страница Мои адреса
edit.tpl – страница редактирования контактной информации
password.tpl – изменение пароля
forgotten.tpl – восстановление пароля
download.tpl – страница Файлы для скачивания
newsletter.tpl – подписка на новости
order_info.tpl – информация о заказе
order_list.tpl — список заказов
recurring_info.tpl – информация о периодическом платеже
recurring_list.tpl – список периодических платежей
return_form.tpl – форма возврата товара
return_info.tpl – информация о возврате
return_list.tpl – список возвратов
transaction.tpl – страница транзакций
reward.tpl – страница бонусных баллов
voucher.tpl – подарочные сертификаты
wishlist.tpl — закладки
affiliate/ — шаблоны страниц Партнерская программа
account.tpl — шаблон главной страницы Личного кабинета
login.tpl — страница авторизации
register.tpl – страница регистрации
edit.tpl – страница редактирования контактной информации
password.tpl – изменение пароля
forgotten.tpl – восстановление пароля
payment.tpl — страница платежных реквизитов
tracking.tpl – страница Реферальный код
transaction.tpl – страница транзакций
error/
not_found.tpl — страница «Запрашиваемая страница не найдена!»
mail/
order.tpl – шаблон для письма (html) о новом заказе
voucher.tpl – шаблон письма о Подарочном сертификате
extension/payment/ — шаблоны модулей способов доставки
bank_transfer.tpl – Банковский перевод
cheque.tpl – Оплата наличными
cod.tpl – Оплата при доставке
free_checkout.tpl – Бесплатный заказ
liqpay.tpl — LiqPay
moneybookers.tpl — Moneybookers
pp_express.tpl — PayPal Экспресс-платежи
pp_express_confirm.tpl страница подтверждения для модуля PayPal Экспресс-платежи
pp_pro.tpl – PayPal Pro
pp_standard.tpl — PayPal Standart
extension/total/
shipping.tpl – шаблон предварительного расчета доставки
coupon.tpl – шаблон модуля купонов (вывод происходит в на странице корзины)
voucher.tpl — шаблон модуля сертификатов (вывод происходит в на странице корзины)
reward.tpl — шаблон модуля бонусных баллов (вывод происходит в на странице корзины)
(* ниже указанные шаблоны модулей не используемые в РФ amazon_checkout_address.tpl, amazon_checkout_cart.tpl, amazon_checkout_confirm.tpl, amazon_checkout_failure.tpl, amazon_checkout_payment.tpl, amazon_checkout_success.tpl, authorizenet_aim.tpl, authorizenet_sim.tpl, klarna_account.tpl, klarna_invoice.tpl, nochex.tpl, paymate.tpl, paypoint.tpl, paypoint_failure.tpl, paypoint_success.tpl, payza.tpl, perpetual_payments.tpl, pp_pro_iframe.tpl, pp_pro_iframe_body.tpl, pp_payflow.tpl, pp_payflow_iframe.tpl, pp_payflow_iframe_return.tpl, realex.tpl, realex_remote.tpl, realex_response.tpl, sagepay.tpl, sagepay_direct.tpl, sagepay_us.tpl, web_payment_software.tpl, worldpay.tpl, worldpay_failure.tpl, worldpay_success.tpl, twocheckout.tpl)
Создание своего шаблона
Для создания своего шаблона Opencart, вам достаточно создать в директории catalog\view\theme\
папку с названием своего шаблона (например, mystore) и в ней разместить 3 папки template, stylesheet, image
Далее, создадим минимальный каркас для нового шаблона, а именно:
1. в директорию stylesheet, скопируем файл stylesheet.css из шаблона по умолчанию catalog\view\theme\default\stylesheet
2. в директории template, создадим папку common и скопируем туда файл header.tpl из шаблона по умолчанию catalog\view\theme\default\template\common\
3. Откроем файл header.tpl и изменим путь к файлу стилей на свои
<link href="catalog/view/theme/default/stylesheet/stylesheet.css" rel="stylesheet">
заменим на
<link href="catalog/view/theme/mystore/stylesheet/stylesheet.css" rel="stylesheet">
4. Заходим в панель администрирования:
Меню -> Модули -> Темы -> [изменить] -> поле, Директория темы
и выбираем новый шаблон.
На этом этап создания каркаса нового шаблона завершен.
Далее вы можете изменять стили в файле стилей, подключать дополнительные стили или скрипты, прописывая пути в файле header.tpl. А если Вам необходимо изменить верстку одного из модулей или частей шаблона (например footer.tpl), то достаточно создать соответствующую директорию в вашем новом шаблоне и скопировать нужный файл из шаблона по умолчанию.
Хочу обратить внимание, что рекомендуется при создании нового шаблона, не копировать все файлы шаблона по умолчанию, а копировать лишь файлы которые изменяются. Данный метод поможет избежать многих проблем при обновлении версии OpenCart 2.х на более новые версии.
Если у вас есть установленные модификаторы !!!
Перед внесением изменений в тему, посмотрите, есть ли в кеше модификатора ваши файлы, которые вы собираетесь изменить. И если они там присутствуют, вам необходимо после внесения изменений, очищать кеш модификатора в папке \system\modification или очищать нажатием кнопки Обновить в Панели управления Меню — Модули — Модификаторы
Если этого не сделать, то произведенные изменения в файлах темы вы не увидите.