Стандартная тема по умолчанию, которая предлагается при установке OpenCart 2.x является базой для ваших новых идей. В ней заложен стандартный дизайн, основанный на популярном CSS фреймворке Bootstrap. Если Вы желаете изменить стандартную тему, Вам необходимо иметь базовые знания CSS и HTML. Но для некоторых частей дизайна вам понадобятся знания php и javascript.
Структура папок темы по умолчанию (Default) Перед тем как приступить к созданию или изменение темы, изучите структуру папок и назначение файлов. Тема по умолчанию (а так же другие темы) разработаны с использованием паттерна MVC (это необходимо помнить т.к ни одна переменная в шаблоне, не может быть выведена просто так, если она не объявлена в текущем контроллере). Файлы представления, таблицы стилей и изображения для шаблона, расположены по пути catalog/view/theme/default Папкаdefault содержит следующие папки: template - папка с "шаблонами" (представлениями) stylesheet - папка с таблицами стилей image - папка с изображениями для шаблона (фоны, указатели,итд) Папка template содержит файлы шаблона c расширением tpl. Данные файлы не используют какой либо сторонний шаблонизатор, а шаблонизация производится с помощью php. Давайте рассмотрим назначение файлов, в директориях указанных ниже. Спойлер: Для версии ниже 2.3 Для версии ниже 2.3, директории модулей располагаются на уровень выше, т.е сразу в module 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 – не используется в РФ Директория способов доставки так же находится на уровень выше. 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 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 и изменим путь к файлу стилей на свои HTML: <link href="catalog/view/theme/default/stylesheet/stylesheet.css" rel="stylesheet"> заменим на HTML: <link href="catalog/view/theme/mystore/stylesheet/stylesheet.css" rel="stylesheet"> 4. Заходим в панель администрирования: Меню -> Модули -> Темы -> [изменить] -> поле, Директория темы и выбираем новый шаблон. Спойлер: для версии ниже 2.2х 4. Заходим в панель администрирования: Меню -> Система -> Настройки -> [изменить] -> вкладка, Магазин -> поле, Шаблон магазина и выбираем новый шаблон. На этом этап создания каркаса нового шаблона завершен. Далее вы можете изменять стили в файле стилей, подключать дополнительные стили или скрипты, прописывая пути в файле header.tpl. А если Вам необходимо изменить верстку одного из модулей или частей шаблона (например footer.tpl), то достаточно создать соответствующую директорию в вашем новом шаблоне и скопировать нужный файл из шаблона по умолчанию. Хочу обратить внимание, что рекомендуется при создании нового шаблона, не копировать все файлы шаблона по умолчанию, а копировать лишь файлы которые изменяются. Данный метод поможет избежать многих проблем при обновлении версии OpenCart 2.х на более новые версии. Если у вас есть установленные модификаторы !!! Перед внесением изменений в тему, посмотрите, есть ли в кеше модификатора ваши файлы, которые вы собираетесь изменить. И если они там присутствуют, вам необходимо после внесения изменений, очищать кеш модификатора в папке \system\modification или очищать нажатием кнопки Обновить в Панели управления Меню - Модули - Модификаторы Если этого не сделать, то произведенные изменения в файлах темы вы не увидите.