• php

Стандартная тема по умолчанию, которая предлагается при установке 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 – станица Карта сайта


module/ - шаблоны для модулей
category.tpl – модуль Категории
filter.tpl - Фильтр
welcome.tpl - Приветствие
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 – шаблон шага подтверждения заказа
shipping.tpl – шаблон вывода формы оформления доставки
coupon.tpl – шаблон модуля купонов (вывод происходит в на странице корзины)
voucher.tpl - шаблон модуля сертификатов (вывод происходит в на странице корзины)
reward.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 – шаблон письма о Подарочном сертификате


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
(* ниже указанные шаблоны модулей не используемые в РФ 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 или очищать нажатием кнопки Обновить в Панели управления Меню - Модули - Модификаторы
Если этого не сделать, то произведенные изменения в файлах темы вы не увидите.