Шаблон в OpenCart: короткий гайд для новичка

За 15–20 минут вы добавите собственный блок на главную страницу магазина OpenCart 3.x: заголовок, текст и кнопку. Понадобятся доступ администратора, доступ к файлам сайта по FTP или SFTP и резервная копия. Инструкция рассчитана на стандартную тему OpenCart 3.0.x; в OpenCart 4.x пути и механизм тем отличаются.

Что подготовить до начала

• OpenCart 3.0.x и доступ в административную панель.
• Доступ к файлам сайта по SFTP, FTP или через файловый менеджер хостинга.
• Резервную копию файла шаблона и базы данных.
• Браузер с открытой главной страницей магазина.

Не редактируйте файл сразу в браузерном редакторе хостинга без копии. Одна лишняя кавычка в Twig может превратить страницу в ошибку 500, а восстановление через резервную копию займёт меньше времени, чем поиск пропущенного символа.

В OpenCart шаблон отвечает за разметку, но не за бизнес-логику. Если пытаться считать цену или менять заказ прямо в Twig, проблема почти наверняка окажется в неправильном слое.

Сноска. Twig — шаблонизатор, который вставляет данные контроллера в HTML. Запись {{ variable }} выводит значение, а конструкции {% ... %} выполняют условия и циклы.

Где находится шаблон OpenCart

В стандартной теме OpenCart 3.x файлы находятся в каталоге:

catalog/view/theme/default/template/

Шаблон главной страницы — это:

catalog/view/theme/default/template/common/home.twig

Шаблоны других частей сайта лежат рядом: common/header.twig отвечает за шапку, common/footer.twig — за подвал, product/product.twig — за страницу товара, а product/category.twig — за категорию.

Если магазин использует не стандартную тему, вместо default будет её имя. Посмотреть выбранную тему можно в административной панели в разделе настроек магазина и темы. Не копируйте путь из этой статьи вслепую: сначала проверьте, какая тема включена.

Как изменить главную страницу

Шаг 1. Сделайте копию файла

Скачайте home.twig на компьютер и сохраните его под именем вроде home.twig.backup. Отдельно запишите исходный путь. Если после изменения что-то сломается, верните оригинальный файл.

Проверка: на компьютере есть копия файла, а размер скачанного файла не равен нулю.

Шаг 2. Откройте шаблон

Откройте файл catalog/view/theme/default/template/common/home.twig в редакторе с поддержкой UTF-8. Подойдут VS Code, Notepad++ или другой редактор, который не добавляет форматирование и не меняет кодировку.

В начале файла обычно находятся вызовы шапки, боковых колонок и основного содержимого. Не удаляйте существующие строки с {{ header }}, {{ footer }}, {{ column_left }} и {{ column_right }}: они собирают страницу из частей.

Проверка: файл открывается как обычный текст, а внутри видны Twig-конструкции и HTML, а не набор нечитаемых символов.

Шаг 3. Добавьте блок

Вставьте блок после строки {{ header }} или перед первым крупным содержимым страницы. Это простой статический блок: он не обращается к базе данных и не меняет работу корзины.

<section class="container custom-home-block">
  <h2>Поможем выбрать товар</h2>
  <p>Ответим на вопросы о характеристиках, доставке и гарантии.</p>
  <a class="btn btn-primary" href="index.php?route=information/contact">
    Связаться с магазином
  </a>
</section>

Класс container и кнопка btn btn-primary используют стили стандартного Bootstrap, который обычно входит в тему OpenCart 3.x. Если ваша тема их переопределяет, внешний вид может отличаться.

Проверка: сохранённый файл содержит закрывающие теги </section>, </p> и </a>, а адрес кнопки начинается с index.php?route=.

Шаг 4. Загрузите файл на сайт

Загрузите изменённый home.twig обратно в тот же каталог и согласитесь на замену. Не переименовывайте папки и не переносите файл в catalog/view/theme/default/template, если активна другая тема.

Проверка: размер и дата изменения файла на сервере обновились, а права доступа остались прежними.

Шаг 5. Очистите кеш

В OpenCart 3.x изменения могут не появиться сразу. Откройте административную панель и выполните следующие действия:

1. Перейдите в раздел дополнений и откройте список модификаторов.
2. Нажмите кнопку обновления кеша модификаторов, если она есть в вашей сборке.
3. Откройте настройки разработчика в панели и очистите кеш темы и кеш SASS, если такие кнопки доступны.
4. Обновите главную страницу в режиме без кеша: Ctrl+F5 в Windows или Cmd+Shift+R в macOS.

Проверка: на главной странице появился блок «Поможем выбрать товар», а нажатие на кнопку открывает форму обратной связи.

Если блок не появился

• Виден старый вариант страницы. Очистите кеш темы, кеш модификаторов и кеш браузера. Некоторые хостинги дополнительно включают серверное кеширование — его нужно очищать в панели хостинга.
• Появилась ошибка 500 или белый экран. Верните резервную копию home.twig. Затем проверьте кавычки, закрывающие теги и отсутствие случайных символов до или после Twig-кода.
• Вместо страницы показана ошибка Twig. Откройте журнал ошибок OpenCart в разделе системных инструментов и найдите строку с номером файла. Чаще всего проблема в незакрытом теге или в неверном имени переменной.
• Кнопка ведёт на страницу 404. Проверьте маршрут. В разных сборках контактная страница может быть отключена или переопределена расширением, поэтому откройте её в меню магазина и скопируйте фактический адрес.
• Блок выглядит без стилей. Уберите нестандартные классы или добавьте собственные CSS-правила в файл темы. Не вставляйте CSS в Twig-блок, если его будут использовать на нескольких страницах.

Где такой способ ломается

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

Не добавляйте в шаблон PHP, SQL-запросы и секреты. Шаблон должен получить готовые данные от контроллера. Если на странице нужна динамика — например, список товаров по условию, — сначала ищите штатный модуль или расширение, а затем меняйте контроллер и Twig согласованно.

Что сделать дальше

После первого изменения проверьте главную страницу на телефоне, планшете и компьютере. Затем откройте журнал ошибок OpenCart и убедитесь, что после загрузки страницы не появляются новые предупреждения. Если блок должен пережить обновление темы, следующий шаг — вынести его в отдельное расширение или дочернюю тему, а не продолжать править стандартный файл.