где в opencart хранится html код и как его менять
Где лежит каркас страницы index на движке Opencart?
Я сначала пытался объяснить, как устроен Opencart, чтобы вам было легко потом находить, какие шаблоны используются на конкретной странице, но получается, что это будет слишком объёмно. Поэтому я представлю ситуацию, когда используется стандартная установка Opencart.
Заголовочная часть HTML-кода, шапка страницы, плюс выпадающее меню категорий, плюс уведомления — /catalog/view/theme/ /template/common/header.tpl
Футер — /catalog/view/theme/ /template/common/footer.tpl
Контент — зависит от текущего пути. Например, если текущий путь — product/product (страница товара), то шаблон можно найти в /catalog/view/theme/ /template/product/product.tpl. Если корневая страница сайта (вы её назвали index), то её шаблон лежит в /catalog/view/theme/ /template/common/home.tpl.
Левая колонка — /catalog/view/theme/ /template/common/column_left.tpl
Правая колонка — /catalog/view/theme/ /template/common/column_right.tpl
Служебная часть перед контентом — /catalog/view/theme/ /template/common/content_top.tpl
Служебная часть после контента — /catalog/view/theme/ /template/common/content_bottom.tpl
можно узнать на странице настройки магазина в админке: Админка → Меню «Система» → пункт «Настройки» → ссылка «Изменить» напротив текущей конфигурации → вкладка «Магазин» → пункт «Шаблон».
Всё содержимое обычно компонуется из этих кусков.
Правая и левая колонки, а так же служебные части перед и после контента обычно заполняются модулями — в зависимости от настроек модулей. Эти четыре шаблона лучше не трогать, если вы не уверены до конца, что делаете.
Кастомизация OpenCart с помощью модуля html и bootstrap
Привет друзья! Сегодня хочу поделиться тем, как вставить html код в opencart и кастомизировать главную страницу интернет-магазина. Делать мы это будем на дефолтном шаблоне. Я предпочитаю работать с русифицированной сборкой OpenCart под названием OcStore. Хотя OcStore это не официальный релиз, но все же, мне нравится эта сборка, так как она адаптирована под русскоязычный рынок.
Используя стандартный модуль html, мы выведем два блока в шаблоне. Один будет баннером с картинкой на всю его ширину, с текстом и нарисованной в фотошопе кнопкой «Подробнее». Этот блок сделаем кликабельным, и ссылка может вести на карточку товара, акционный товар или категорию. Куда вам будет лучше, туда и поставите свою ссылку. Получится вот такой результат.
Второй текстовый блок html opencart представляет собой ряд на всю ширину шаблона с тремя колонками. В каждой колонке будет иконка со шрифта font-awesome, заголовок третьего уровня и параграф с текстом. Такой модуль html дает возможность оптимизировать главную страницу opencart под приоритетные вашему бизнесу поисковые запросы. Выбираете важные ключевые слова из своего семантического ядра, гармонично вставляете их и окружаете небольшим текстом. Такой текстовый блок в html opencart даст отличную возможность для поисковой оптимизации сайта. У меня получился вот такой seo-блок.
Итак, если вам интересно как вставить свой html код в opencart, то читаем далее.
Делаем seo оптимизацию с помощью модуля html
Итак, в консоли управления заходим в меню «Дополнения» и выбираем модуль «HTML содержимое». Жмем на кнопку «Редактировать». В открывшейся странице мы видим поля, которые нужно заполнить:
Используем сетку библиотеки bootstrap
Сайтов, описывающих работу с bootstrap великое множество. Есть ресурсы, как на русском, так и на английском языке. Я открою официальный сайт getbootstrap.com в разделе сетки css https://getbootstrap.com/docs/3.3/css/#grid и выберу из примера сетку, представляющую собой ряд с тремя равными колонками для мобильных устройств и планшетов. Любой контент, размещенный в этом ряду, автоматически подстроится под размер экрана устройства, с которого пользователь будет заходить на ваш сайт. Вот этот код:
В качестве текстового содержимого я возьму текст рыбу с сайта lipsum.com. А заголовками для примера я сделаю распространенные фразы: «Свежие поступления», «Акции и Скидки — 50%» и «Бесплатная доставка».
Теперь наш ряд с текстом в редакторе opencart в режиме исходного кода будет выглядеть так.
А если переключиться в режим визуального редактора wysiwyg, то контент будет выглядеть так:
Описание html тегов
Вот теги, которые мы будем использовать для оформления:
Это div с классом row – один ряд.
Это div с классом col-md-4 – три раза ( создает три колонки в ряду row).
Параграф – текст «обернут» в тег
чтобы выровнять его по ширине с помощью служебного класса бутсрап text-justify».
Тег span – нужен для того чтобы обернуть часть текста в параграфе для применения к нему вспомогательных классов бутстрап text-danger и text-success.
Заголовки третьего уровня – 3 штуки.
Выделяем текст жирным шрифтом.
Применяемые классы bootstrap css
Ряд, строка контейнер в котором будет все будет размещен контент.
Выравниваем заголовок по центру блока.
Выравниваем параграф по краям блока.
Выделяем текст зелеными буквами для обозначения успешного действия.
Выделяем текст, делая шрифт красным цветом для обозначения опасности.
Делаем вывод модуля opencart в шаблоне
Далее нам нужно сохранить все изменения в текстовом блоке html opencart и вывести его на главной странице. Чтобы сделать это, зайдите во вкладку «Дизайн» и потом «Схемы». Далее выбираем строку «Главная», отвечающую за главную страницу. Жмем на кнопку «Редактировать» и попадаем в настройки страницы. Здесь настраивается порядок вывода модулей.
Среди прочих модулей, мы находим модуль html по названию, которое ему дали. Я назвал его «Реклама на главной». Жмем на кнопку с карандашом и выбираем искомое. Его можно поднять на ряд выше, сместив предыдущий модуль ниже и т.д. Вставляем модуль в нужное нам место и сохраняем изменения.
Вот что получилось.
Дальнейшая настройка html блока opencart
В дефолтном шаблоне опенкарт стоит маленький шрифт и не слишком темный цвет шрифта. Чтобы позаботиться о глазах посетителей, я бы хотел увеличить размер шрифта текста на пару пикселей и сделать его темнее. Также заголовок «Почему стоит заказать товар у нас» хотелось бы передвинуть в центр и увеличить отступ между ним и верхним рядом текста.
Еще я изменю семейство шрифтов для заголовков. По умолчанию в шаблоне OcStore для всех шрифтов применяется семейство OpenSans, шрифт без засечек. Это хороший шрифт и я оставлю его для параграфов текста, а для заголовков назначу шрифт Lora с засечкам для контраста.
Эти настройки невозможно сделать в стандартном редакторе опенкард поскольку в админке дефолтного шаблона нет доступа к файлам шаблона. Поэтому мне придется создать и подключить собственный файл со стилями css. Назову его custom.css. И так же подключу шрифты в файле header.tpl.
Как подключить собственный файл css к опенкарт
Все css стили для дефолтного шаблона движка опенкарт находятся в папке stylesheet. Найти ее можно пройдя по такому пути:
catalog/view/theme/default/stylesheet/stylesheet.css
Стили шаблона написаны в файле stylesheet.css
Стили библиотеки бутстрап подключены здесь:
catalog/view/javascript/bootstrap/css/bootstrap.min.css
Чтобы подключить собственный файл со стилями css, нам нужно найти файл header.tpl. Он находится в папке common. Движемся по такому пути:
catalog/view/theme/default/template/common/header.tpl
(Здесь же мы подключим шрифт из google fonts.)
В файле header.tpl записываются все служебные файлы и мета-теги для поисковых систем: таблицы стилей, java-скрипты и прочее. В общем, файл header.tpl в opencart это тоже, что header.php в wordpress
Можно было бы прописать собственные css объявления в файле stylesheet.css, отделив их от стилей шаблона комментарием. Назвать его, к примеру, /*my custom style */. Но опытные разработчики скажут, что это не комильфо, и нужно делать отдельный файл со стилями. Ну, в общем, так и сделаем.
Создаем файл custom.css и ложим его в папку stylesheet. Здесь будут все наши собственные стили. С их помощью мы по необходимости перебьем некоторые стили шаблона и стили библиотеки bootstrap.
Потом открываем файл header.tpl в любом редакторе кода.
Нам нужно найти строку 34 с таким кодом:
Копируем ее и вставляем под строкой 34 копию, изменив stylesheet.css на custom.css
Все, собственный файл css к opencart подключен.
Как подключить шрифт в opencart
Почему-то разработчики магазина опенкарт решили, что одного шрифта для заголовка и текстов будет достаточно. Но мы так не думаем и подключим дополнительный шрифт для заголовков, вдобавок к уже имеющемуся шрифту OpenSans.
Для этого в сервисе fonts.google.com я выбрал кириллический шрифт Lora и там же скопировал сформировавшуюся ссылку. Ее я вставлю под ссылкой, подключающей к шаблону шрифт OpenSans. Вот она:
Теперь наш файл header.tpl выглядит так
Дополнительный шрифт к опенкарт можно подключить и по-другому. В строку с подключением шрифта OpenSans через плюс добавляем свой. Вот так:
Затем не забываем назначить всем h1-h6 заголовкам свойство font-family: со значением ‘Lora’, serif; в только что созданном файле custom.css
Переопределяем стили шаблона опенкарт
Чтобы изменить размер и цвет шрифта в дефолтном шаблоне, в файл custom.css скопируем и вставим из файла stylesheet.css стили, относящиеся к тегу body. В селекторе body настраиваются размер и цвет шрифта. Объявление для селектора body выглядит так:
Мы изменим свойства font-size и color, а остальное трогать не будем. Font-size увеличим на 2 px, а цвет сделаем темней. Вот так: color: #222;
Переопределяем стили для заголовков сайта
Скопируем их из файла stylesheet.css
И сделаем их чуть темнее, жирнее и изменим семейство шрифта для заголовков, сменив OpenSans на Lora.
Видим такой результат. Заголовок стал другим, но он по-прежнему выровнен по левому краю.
Редактируем файл модуля html содержимое
Данный модуль выводит любое html содержимое на страницу интернет-магазина. Заголовок у этого модуля второго уровня и по умолчанию он выравнивается по левому краю. Мы выровняем заголовок h2 по центру ряда, применив к нему в файле html.tpl В редакторе opencart summernoute заголовок выровнять не получится, так как здесь к нему нет к нему доступа. Поэтому откроем файл модуля html в любом редакторе кода.
Файл модуля html html.tpl находится в папке:
Отредактируем его, вставив в тег h2 служебный стиль bootstrap Тем самым мы сдвинем заголовок слева в центр:
. Вуаля, заголовок теперь стоит по центру и сейчас совсем другой вид.
Вставляем иконки font-awesome в модуль html
Скопируем теги с прописанными в них классами иконок на сайте font-awesome.com https://fontawesome.com/icons?d=gallery&m=free
Выберем из списка иконок те, которые нам наиболее подходят. Я взял три штуки: иконку с листом, с грузовиком и с мегафоном. Вот их код:
Далее я обернул каждый тег тегом
чтобы выровнять иконки по центру родительского блока с помощью служебного класса выравнивания text-center. Код получился такой:
Так же я увеличил каждую иконку с 14 до 20px, покрасил их в красный цвет, сделал им круглую границу красного цвета, внутреннюю тень и отодвинул все их вниз, прописав им вот такие стили:
В конечном итоге я еще решил добавить тег — горизонтальную строку, после каждого заголовка
и назначил для тега такие стили.
Тем самым я сократил ширину до 22% и выровнял его по центру. В итоге получился такой seo-блок:
Теперь вы знаете, как вставить html код в opencart и кастомизировать модуль html с помощью классов bootstrap и собственных стилей.
Кликабельный банер картинка
Но это еще не все. Теперь я хочу показать, как сделать рекламный баннер для акций в опенкарt. Снова нам понадобится модуль html и библиотека бутстрап, но на этот раз кода будет меньше.
Для этого я приготовил фото размером 1220 на 290. Будет лучше, если высота фото будет небольшой, пикселов 200, может даже меньше, так как этот opencard html block не должен быть слишком высоким.
Вывел я рекламный баннер на главной странице сайта opencart с помощью этого кода:
Сейчас я его опишу:
Картинка обрамлена ссылкой, тегом Ссылка открывается в новом окне.
И наконец, сама картинка с классом img-responsive, который делает ее «резиновой». Она сжимается, подстраиваясь под размер экрана.
А вот классы, которые я использовал, чтобы появился эффект затухания при наведении курсора на изображение.
В итоге появилось таких два баннера. Ими можно разбавить ряды с карточками товара или вывести рядом друг с другом.
Если вставить эти два модуля html в дефолтный шаблон опенкарt, да и в любой другой тоже, то, безусловно, интернет-магазин будет лучше и эффективнее, так как вы получите один блок с seo-текстом, а другой с рекламным баннером.
Если вы получили пользу от этой статьи, то прошу оставить ваш отзыв в комментариях и поделиться страницей в социальных сетях с помощью кнопок. Удачи всем :-).
Структура файлов шаблона OpenCart или какой файл за что отвечает.
Рубрики
Свежие записи
В начале деятельности часто сталкиваются с вопросом, — с каких фалов выводится та или иная информация в CMS OpenCart? Поэтому решить выложить информацию по самой структуры темы (шаюлона), думаю многим будет полезна.
Сразу скажу что файлы ищем в корте самой темы catalog/view/theme/ваша_тема/template/
Папка product/
category.tpl — вывод группы товаров;
manufacturer.tpl — вывод товаров по производителю (в 1.5.х не используется);
manufacturer_info.tpl — вывод товаров по производителю (только в 1.5.х);
manufacturer_list.tpl — страница со списком всех производителей (только в 1.5.х);
product.tpl — вывод одного товара;
review.tpl — вывод отзыва о товаре в шаблоне product.tpl;
search.tpl — поиск и результаты поиска;
special.tpl — выбор специальных предложений (Special);
compare.tpl — страница сравнения товаров (только в 1.5.х).
Папка information/
contact.tpl — вывод адреса магазина и формы отправки сообщений;
information.tpl — вывод информационной статьи;
sitemap.tpl — карта сайта;
Каталог error/ ;
not_found.tpl — Запрашиваемая страница не найдена «error 404»(…not found!).
Папка mail/
order_confirm.tpl — письмо о подтверждении.
Папка modules/
bestseller.tpl — самые покупаемые товары;
category.tpl — блок Категории;
featured.tpl — «рекомендуемые товары;
«google_talk.tpl ;
information.tpl — список статей на сайте, ссылки на сайтмап и контакты;
latest.tpl — «последние товары;
«latest_home.tpl — «последние товары» на главной странице;
manufacturer.tpl — выпадающий список производителей;
special.tpl — специальное предложение.
Папка checkout/
address.tpl ;
cart.tpl — вывод содержимого корзины (в центре страницы);
confirm.tpl — последний шаг заказа, подтверждение перед отправкой, этот же шаблон используется для guest.tpl — оформить заказ без регистрации (тут редактируются поля, при оформл. заказа);
payment.tpl – оплата;
shipping.tpl – доставка.
UNLIMITED DOWNLOADS: 50+ Million WordPress & Design Assets
Как изменить, настроить шаблон OpenCart
В этой статье описаны пути к файлам, которые нужно изменять для редактирования шаблона сайта OpenCart
В этой статье описаны пути к файлам, которые нужно изменять для редактирования шаблона сайта OpenCart
Логотип и favicon(иконка)
Изменение логотипа и фавикона не требует от Вас специальных знаний, так как доступно редактирование с админки.
1. Dойдите в панель администратора Opencart.
В этой же вкладке можно задать желаемый размер для картинки товара на разных страницах интернет-магазина.
Шрифт и Цветовая гамма & Фон
Для удачного изменения шрифта или цвета отдельных элементов шаблона вы должны быть знакомы с азами html/css.
1. Подключитесь к FTP для редактирования файлов
2. Войдите в корневую папку вашего сайта с файлами Opencart (обычно www или public_html)
4. Откройте css-файл stylesheet.css для редактирования
5. Задайте требуемый шрифт/цвет элементу шаблона
6. Сохраните изменения и обновите главную страничку сайта в браузере
Шапка (Верхняя часть сайта) & Подвал
1. Подключаемся к FTP используя фтп-менеджер для редактирования файлов
2. Перейдите в корневую папку интернет-магазина с файлами Opencart (обычно это www или public_html)
4. Откройте header.tpl для редактирования
5. Редактируем код под свои нужды используя html
6. Не забываем о сохранении изменений
Редактируем и сохраняем изменения.
Изменение внешнего вида модуля
Редактирование модуля не особо отличается от редактирования шапки, все отличие в размещение нужных файлов.
2. Выбираем нужный нам модуль и жмем на редактировать
Для того, чтобы Вы знали какой файл править, приведу соответствие между англоязычным названием модуля(в фтп менеджере) и русскоязычным (в админке)
Написание модификатора для OpenCart
Изначально, история появления модификаторов началась с vQmod в версии 1.5 opencart-а, а затем его усовершенствовали и преобразовали в OCMOD, который стал постоянным стандартным функционалом OpenCart-а начиная с 2.1 версии. Итак, попробую дать определение понятию модификатор в OpenCart.
Модификатор OCMOD может быть как самостоятельным модулем, изменяющим или дополняющим стандартный функционал, так и входить в состав полноценного модуля с дополнительными php, twig и другими файлами. О написании полного модуля читайте в предыдущей статье.
Имена файлов и директории
Обновление кэша модификаторов
Для того, чтобы система увидела файлы-модификаторы и выполнила их инструкции, необходимо нажать кнопку «Обновить» на странице модификаторы.
Бывают ситуации, когда кэш обновили, а изменений на сайте так и не увидели. Обычно это связано с тем, что на сайте используются дополнительные модули кэширования или ускорители загрузки и т.п., в которых вероятно, тоже необходимо сделать обновление кэша.
Синтаксис модификатора OCMOD
Файл модификатора OCMOD должен содержать общую описательную часть и инструкции по изменению файлов. Начну разбор синтаксиса с простого примера, который добавляет слово «Test» в шапке администраторского раздела:
Итак, данный пример модификатора меняет файл header.twig. Он находит строчку «
В одном xml-файле может быть любое количество секций и соответственно, мы можем менять множество файлов одним модификатором.
Разберем каждый тег модификатора и его возможности поподробнее.
Указывает в каком файле или файлах нужно внести изменения. Обязательный атрибут path содержит путь до изменяемого файла. Может указывать на один файл или на несколько. Для указания нескольких файлов используется символ «|». Например, внести изменения в action.php и в loader.php
Для сокращения кода можно использовать фигурные скобки, которые позволяют указать несколько значений через запятую:
Так же можно использовать символы «*» и «?», чтобы указать путь по «маске». Часто бывает полезно для модификации файлов-шаблонов.
Т.к. мы не знаем заранее, какие именно темы установлены в OpenCart, мы указали «*» после «theme» и тогда будут модифицироваться все product.twig во всех темах.
Operation
Указывает начало секции производимой модификации. Внутри File секций может быть несколько. Т.е мы можем делать сразу несколько изменений в одном файле. Тег Operation может иметь необязательный атрибут error, который может принимать значения:
Например, найти в файле header.twig текст «navbar-rightnav» и если его нет, тогда пропустить и перейти к следующей операции и найти «navbar-right»:
Если не указывать атрибут error=»skip», тогда на первом поиске текста «navbar-rightnav» вся секция была бы прервана и проигнорирована.
Search
Указывает какой текст необходимо найти в текущей операции. Есть несколько правил использования тега:
Для более точного определения места внесения изменений в теге Search могут использоваться атрибуты:
Пример: добавить пункт меню «ТЕСТ».
В данном примере находим первое «$data[‘menus’][] = array(» и перед ним добавляем свой код.
Тег содержит текст, который будет добавлен до/после найденного или на который будет заменен найденный текст.
Так же как и тег Search, должен содержать между которыми пишется текст кода, который будет добавляться/заменяться.
В теге Add могут использоваться атрибуты:
Пример: Добавить слово «Test» в админ-панели в списке товаров.
» на одну строку ниже найденного текста.
Обратите внимание : position=»before» и position=»after» добавляют код не в середину строки, где было найдено «panel-body», а в следующую (или предыдущую) строку. Если нужно сделать добавление в середине строки, следует использовать position=»replace» и повторив тот же самый найденный текст мы добавляем свой.
Пример: Добавить текст перед версией opencart-а в футере
Создав модификатор OCMOD в OpenCart-е можно изменить практически всю систему, расширить ее возможности, при этом исходные файлы не будут затронуты и вы можете всё вернуть в первоначальный вид, просто убрав файл-модификатор (или отключив его, если он был загружен в базу данных).