Руководство Дизайнера

Стандартная тема по умолчанию, которая предустановлена на OpenCart 3, является базой для ваших новых идей, тем и шаблонов. По простому, это стандартный дизайн, основанный на популярном CSS фреймворке Bootstrap и создан специально для OpenCart.
Если Вы желаете изменить стандартную тему, Вам необходимо иметь базовые знания CSS и HTML. А для некоторых частей дизайна вам понадобятся знания twig, javascript и php.

 

Структура папок темы по умолчанию (Default)

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

Тема по умолчанию (а так же другие темы) разработаны с использованием паттерна MVC (это необходимо помнить т.к ни одна переменная в шаблоне, не может быть выведена просто так, если она не объявлена в текущем контроллере).

Файлы представления, таблицы стилей и изображения для шаблона, расположены
по пути catalog/view/theme/default

Директория default содержит следующие папки:
template - папка с "шаблонами" (представлениями)
stylesheet - папка с таблицами стилей
image - папка с изображениями для шаблона (фоны, указатели,итд)

Папка template содержит файлы шаблона c расширением twig. Данные файлы используют шаблонизатор TWIG.

Давайте рассмотрим назначение файлов, в директориях указанных ниже.

common/
header.twig- шаблон для верхней части страницы (в.т.ч. подключение стилей и скриптов)
footer.twig- шаблон нижней части страницы (ссылки информация, служка поддержки итд)
home.twig- шаблон главной страницы (структура и расположение header.twig, footer.twig, column_twig, column_right.twig, content_bottom.twig, content_top.twig)
column_left.twig– левая колонка страницы
column_right.twig– правая колонка страницы
content_bottom.twig– нижняя часть области контента
content_top.twig– верхняя часть области контента
currency.twig– вывод шаблона модуля для переключения валют магазина
language.twig– вывод шаблона модуля для переключения языков магазина
search.twig– шаблон модуля поиска (выводится в header.twig как переменная search)
menu.twig - шаблон основного горизонтального меню
cart.twig- шаблон модуля корзины в шапке
maintenance.twig – шаблон страницы при переключении магазина в режим обслуживания
success.twig – страница о успешном результате выполнения операции (пример, оформление заказа)


product/
product.twig – шаблон для карточки товара (основная страница товара)
category.twig – страница списка товаров в категории
manufacturer_info.twig – информация о производителе
manufacturer_list.twig – страница список производителя
compare.twig – страница сравнения товаров
review.twig – отзывы о товаре в product.tpl (загружается Jquery через load() )
search.twig – шаблон страницы поиска и вывода результатов
special.twig – шаблон страницы Акции


information/
contact.twig – шаблон для станицы контактов (страница Связаться с нами)
information.twig – шаблон для вывода статей
sitemap.twig – станица Карта сайта

extension/module/ - шаблоны для модулей
category.twig – модуль Категории
filter.twig - Фильтр
html.twig - HTML контент
information.twig - Информация
slideshow.twig - Слайдшоу
banner.twig - Баннер
carousel.twig - Карусель
bestseller.twig – Хит продаж
featured.twig - Рекомендуемые
latest.twig - Последние
special.twig - Акция
store.twig – шаблон модуля Магазин (выбора магазина при мультимагазине)
account.twig – модуль Личный кабинет
google_hangouts.twig – Модуль Google Hangouts
pp_layout.twig - PayPal Экспресс-платежи


checkout/ - шаблоны страниц Оформления заказа и Корзины покупок
cart.twig – страница Корзины покупок
login.twig – страница Авторизации
register.twig – страница Регистрации
checkout.twig – общий шаблон станицы оформления заказа
guest.twig – шаг, оформление без регистрации
guest_shipping.twig – шаг, ввод данных доставки (при оформлении без регистрации)
payment_address.twig – шаг, ввод личных данных адреса плательщика
shipping_address.twig – шаг, ввод данных нового адреса доставки
payment_method.twig – шаг, выбор способа оплаты
shipping_method.twig – шаг, выбор способа доставки
confirm.twig – шаблон шага подтверждения заказа


account/ - шаблоны страниц Личного кабинета
account.twig – шаблон главной страницы Личного кабинета
login.twig – страница авторизации
register.twig – страница регистрации
address_form.twig – страница формы редактирования адреса
address_list.twig – страница Мои адреса
edit.twig – страница редактирования контактной информации
password.twig – изменение пароля
forgotten.twig – восстановление пароля
download.twig – страница Файлы для скачивания
newsletter.twig – подписка на новости
order_info.twig – информация о заказе
order_list.twig - список заказов
recurring_info.twig – информация о периодическом платеже
recurring_list.twig – список периодических платежей
return_form.twig – форма возврата товара
return_info.twig – информация о возврате
return_list.twig – список возвратов
transaction.twig – страница транзакций
reward.twig – страница бонусных баллов
voucher.twig – подарочные сертификаты
wishlist.twig - закладки


affiliate/ - шаблоны страниц Партнерская программа
login.twig - страница авторизации
register.twig – страница регистрации


error/
not_found.twig - страница "Запрашиваемая страница не найдена!"


mail/
order_add.twig - шаблон для письма (html) о новом заказе
order_alert.twig - шаблон письма для Администратора
order_edit.twig - шаблон письма о изменении заказа
voucher.twig – шаблон письма о Подарочном сертификате
affiliate.twig - шаблон письма партнеру
affiliate_alert.twig - письмо оповещения администратору о партнере
forgotten.twig - письмо о восстановлении пароля
register.twig - шаблон письма о регистрации нового клиента
register_alert.twig - письмо новому клиенту.
transaction.twig - шаблон письма о транзакциях


extension/payment/ - шаблоны модулей способов доставки
bank_transfer.twig – Банковский перевод
cheque.twig – Оплата наличными
cod.twig – Оплата при доставке
free_checkout.twig – Бесплатный заказ
liqpay.twig - LiqPay
moneybookers.twig - Moneybookers
pp_express.twig - PayPal Экспресс-платежи
pp_express_confirm.twig страница подтверждения для модуля PayPal Экспресс-платежи
pp_pro.twig – PayPal Pro
pp_standard.twig - PayPal Standart


extension/total/
shipping.twig – шаблон предварительного расчета доставки
coupon.twig – шаблон модуля купонов (вывод происходит в на странице корзины)
voucher.twig - шаблон модуля сертификатов (вывод происходит в на странице корзины)
reward.twig - шаблон модуля бонусных баллов (вывод происходит в на странице корзины)


extension/captcha/ - шаблоны для модулей из группы Защита от роботов
basic.twig - шаблон стандартной капчи
google.twig - шаблон модуля гугл капчи

 

Создание своего шаблона

Для создания своего шаблона для Opencart 3, вам необходимо создать в директории catalog\view\theme\
папку с названием своего шаблона (например, mystore) и в ней разместить 3 папки template, stylesheet, image

Далее, создадим минимальный каркас для нового шаблона, а именно:

1. в директорию stylesheet, скопируем файл stylesheet.css из шаблона по умолчанию catalog\view\theme\default\stylesheet

2. в директории template, создадим папку common и скопируем туда файл header.twig из шаблона по умолчанию catalog\view\theme\default\template\common\

3. Откроем файл header.twig и изменим путь к файлу стилей на свои

HTML:

<link href="catalog/view/theme/default/stylesheet/stylesheet.css" rel="stylesheet">

заменим на

<link href="catalog/view/theme/mystore/stylesheet/stylesheet.css" rel="stylesheet">

4. Заходим в панель администрирования:
Меню -> Модули / Расширения -> (тип расширения ) Темы -> [изменить] -> поле, Директория темы
и выбираем новый шаблон.

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

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

Так же существует более продвинутый способ создания шаблона и является более приоритетным, так как предыдущий способ с выбором директории оставлен лишь для совместимости.
От предыдущего варианта он отличается тем, что дополнительно создается расширение для управления вашей темой. Т.е в разделе расширения "Темы" у вас помимо темы "Стандартная тема", появится еще и ваша. Для создания расширения управления темой нужна соответствующая квалификация программиста для OpenCart 3.


Редактирование файлов шаблона !!
На данный момент рекомендуется производить редактирование файлов шаблона через ФТП (FTP) используя фтп менеджеры, например FileZilla. Это избавит вас от неоднозначности, при обслуживании магазина. В качестве редактора файлов, лучше использовать редактор Notepad++

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

При изменении файлов стилей или редактировании js скриптов, не забывайте про Кеш браузера. Кеш (обычно кешируются стили и скрипты) очищается нажатием комбинации клавиш CTRL + F5


Если у вас есть установленные модификаторы !!!
Перед внесением изменений в тему, посмотрите, есть ли в кеше модификатора ваши файлы, которые вы собираетесь изменить. И если они там присутствуют, вам необходимо после внесения изменений, очищать кеш модификатора в папке \storage\modification или очищать нажатием кнопки Обновить
в Панели управления Меню - Модули / Расширения - Модификаторы
Если этого не сделать, то произведенные изменения в файлах темы вы не увидите.

Внимание! Директория storage может быть вынесена за пределы сайта. Не забывайте этот факт. Если не знаете точного расположения, то можете посмотреть в файле config.php


Если изменяете шаблон, модификаторов нет, а изменений не видно?
Тогда причина во включенном кеше TWIG. Для временного отключения вам необходимо его отключить в "Настройках разработчика". Более подробно о кеше твиг написано в разделе для администратора.

 

.
назад к Содержанию