Где в OpenCart тег body: как найти, добавить класс или атрибуты
Тег <body> в OpenCart находится в файле common/header.twig активной темы. Точный путь: catalog/view/theme/ВАША_ТЕМА/template/common/header.twig. Для OpenCart 1.5–2.x это common/header.tpl. В OpenCart 4 путь к базовому шаблону — catalog/view/template/common/header.twig, переопределение через тему — в catalog/view/theme/*/template/common/header.twig. Если нужно добавить класс, data-атрибут или код сразу после открывающего body — правьте тему (а не ядро) и очищайте кеш Twig.
Где в OpenCart тег body: как найти, добавить класс или атрибуты в header.twig
Где body в разных версиях OpenCart: таблица
| Версия | Файл (открывающий <body>) | Шаблонизатор |
|---|---|---|
| OC 1.5 – 2.x | catalog/view/theme/*/template/common/header.tpl | TPL |
| OC 3.x | catalog/view/theme/*/template/common/header.twig | Twig |
| OC 4.x (базовый) | catalog/view/template/common/header.twig | Twig |
| OC 4.x (тема) | catalog/view/theme/*/template/common/header.twig | Twig |
Где именно находится тег body в OpenCart
Структура HTML-оболочки OpenCart разделена на два файла: header (открывает body) и footer (закрывает body). Это особенность архитектуры — body не обёрнут в один файл целиком.
OpenCart 4.x (Twig)
В OpenCart 4 базовая тема хранится в catalog/view/template/common/header.twig. Если вы используете собственную тему, копия файла для переопределения должна лежать в catalog/view/theme/ваша_тема/template/common/header.twig. Код аналогичен OC 3:
<!DOCTYPE html><html dir="{{ direction }}" lang="{{ lang }}"><head> ...</head><body id="{{ class }}">OpenCart 3.x (Twig)
- Открывающий тег:
catalog/view/theme/ваша_тема/template/common/header.twig - Закрывающий тег:
catalog/view/theme/ваша_тема/template/common/footer.twig - Типичный код:
<!-- common/header.twig --><!DOCTYPE html><html dir="{{ direction }}" lang="{{ lang }}"><head> <meta charset="UTF-8"> <title>{{ title }}</title> <meta name="description" content="{{ description }}"> ...</head><body id="{{ class }}"><!-- common/footer.twig --></body></html>OpenCart 2.x (TPL)
- Файл:
catalog/view/theme/ваша_тема/template/common/header.tpl - Аналогичная структура, но шаблонизатор TPL вместо Twig.
Русские сборки (ocStore, «Русская сборка»)
Путь аналогичен: catalog/view/theme/default/template/common/header.twig. В некоторых сборках добавлены дополнительные переменные в body (например, data-theme для кастомизации). Если используете такую сборку и не видите изменений — проверьте, не переопределяет ли она стандартные шаблоны.
Как лучше / как не делать: По практике, самый частый запрос от клиентов по body — «поставьте счётчик Метрики». И самая частая ошибка — вставлять его сразу после открывающего body, как пишут в инструкциях Метрики. В OpenCart правильнее ставить код счётчика в footer.twig перед закрывающим body или подключать через OCMOD. Если воткнуть скрипт прямо в header.twig сразу после body, он может заблокировать загрузку CSS — браузер покажет белый экран, пока скрипт не загрузится. Были случаи, когда так падал PageSpeed на 15-20 баллов.
Кейс из практики: Клиент — интернет-магазин автозапчастей — попросил добавить навигационное меню в body для мобильной версии. Вместо правки header.twig сделали отдельный модуль технического аудита OpenCart через OCMOD-модификатор: меню подгружается без изменения файла темы, не слетает при обновлении и не конфликтует с другими расширениями. Такое решение всегда надежнее прямой правки шаблона.
Как добавить класс или атрибут к body
Типичные задачи: добавить класс для CSS (например, class="dark-mode"), data-атрибут для JS или ID.
Способ 1: Через тему (рекомендуется)
Откройте common/header.twig и найдите строку:
<body id="{{ class }}">Добавьте атрибут:
<body id="{{ class }}" data-theme="default">Способ 2: Через контроллер (переменная class)
Тело страницы получает значение атрибута id из переменной {{ class }}, которая формируется в catalog/controller/common/header.php. Найдите в нём строку:
$data['class'] = $this->config->get('theme_' . $this->config->get('config_theme') . '_class');И модифицируйте под свои задачи — конкатенируйте с дополнительным классом. Удобно, когда нужно динамически подставлять класс в зависимости от страницы, категории или модуля. Например, чтобы class учитывал текущий роутер:
$route = $this->request->get['route'] ?? 'common/home';$data['class'] = 'route-' . str_replace('/', '-', $route);Способ 3: Через OCMOD (без изменения файлов)
Если не хотите править файл темы напрямую (планируете обновление), создайте XML-модификацию:
<modification> <name>Add data-theme to body</name> <file>catalog/view/theme/*/template/common/header.twig</file> <operation> <search> <![CDATA[<body id="{{ class }}">]]> </search> <add> <![CDATA[<body id="{{ class }}" data-theme="default">]]> </add> </operation></modification>Twig-переопределение (override)
Начиная с OpenCart 3, работает механизм переопределения шаблонов через тему: если в папке вашей темы (catalog/view/theme/ваша_тема/template/) есть файл с тем же относительным путём, что и в базовой теме — будет использован он. Это удобно: не нужно править default или базовую тему. В OpenCart 4 механизм сохранился: вы кладёте переопределённый header.twig в папку своей темы, и он подхватывается автоматически. Подробнее о различиях шаблонизаторов — в статье «Конвертер Twig ↔ TPL».
Типичные ошибки
- Правка файла ядра вместо темы. Если редактируете
catalog/view/theme/default/вместо активной темы — при обновлении правка пропадёт. Используйте дочернюю тему или OCMOD. - Не очищен кеш Twig. После правки header.twig обязательно: Дизайн → Очистить кеш. Без этого изменения не отобразятся.
- Путаница между header.twig и footer.twig. Открывающий тег body — в header.twig. Закрывающий — в footer.twig. Не ищите body там, где его нет.
- Вставка скриптов в body вместо контроллера. Счётчики и скрипты лучше подключать через контроллер или OCMOD — так они не потеряются при обновлении темы.
- Не проверили мобильную версию. Некоторые классы для мобильного меню добавляются JS после загрузки страницы, а не в HTML-шаблоне.
Где ещё может находиться код, который вы ищете
Если вы добавляете счётчик Яндекс.Метрики, Google Analytics или другой скрипт, он не обязательно должен быть в body. Вот куда его лучше поместить:
- В head:
common/header.twig— перед закрывающим</head> - Перед закрывающим body:
common/footer.twig— перед</body> - Через модуль: в админке Extensions → Modifications или через OCMOD
Подробнее о настройке Метрики — в статье «Как установить Яндекс.Метрику на OpenCart».
Похожие технические задачи разобраны в статьях о кастомных фильтрах товаров и конвертации шаблонов Twig ↔ TPL. Если нужна комплексная доработка магазина — закажите доработку OpenCart у специалистов с 17-летним опытом.
FAQ
Почему я не вижу изменений после правки header.twig?
Чаще всего: открыт не тот шаблон (проверьте активную тему) или не очищен кеш Twig. Также убедитесь, что вы правите файл в папке вашей темы, а не в default.
Можно ли вставлять код Метрики после body?
Да, если инструкция сервиса требует именно такое место. Но чаще счётчики ставят в head или перед закрывающим body — оба варианта корректны.
Где body в OpenCart 2?
В OpenCart 1.5–2.x тег body находится в common/header.tpl — файл с расширением .tpl вместо .twig.
Где body в OpenCart 4?
В OpenCart 4 базовый шаблон — catalog/view/template/common/header.twig. Если используется кастомная тема — ищите в catalog/view/theme/ваша_тема/template/common/header.twig.
Лучше править файл темы или использовать OCMOD?
Для поддерживаемых проектов лучше тема (дочерняя тема) или OCMOD. Прямая правка файла потеряется при обновлении темы.
Как добавить кастомный CSS-класс в body для конкретной страницы?
Через контроллер common/header.php. Найдите формирование переменной data[class] и добавьте нужное значение через конкатенацию в зависимости от текущего роутера. Если не хотите править контроллер — используйте OCMOD-модификатор, который подменяет переменную перед передачей в шаблон. Это безопаснее и не теряется при обновлении.
📌 Рекомендуем к прочтению:
📌 Рекомендуем к прочтению:
Комментарии (0)
Пока нет комментариев. Будьте первым!
Оставить комментарий