Основные шаблоны для создания пользовательской темы в OpenCart

29 Мая 2022г. в 05:07

Если взять шаблоны OpenCart, то их можно поделить на 3 категории. Эти категории не прописаны в документации OpenCart, но они помогут нам понять, что необходимо для генерации целой страницы на front end.

Шаблоны макета
В OpenCart шаблоны называют макетами. Шаблон макета — это шаблон-декоратор, собирающий контент под разные области страницы, который проталкивает этот контент в макет и генерирует всю страницу.

Слоты могут представлять собой элементы типа хедера, футера, сайдбара и модульного контента. Почти для каждой страницы на front end существует свой шаблон макета.

OpenCart также позволяет создавать макеты через back end. Это еще один способ изменить частичную структуру определенных страниц.

Подшаблоны
Этот тип шаблона генерирует слот под определенный контент. В стандартном сценарии подшаблон генерирует контент и толкает его в шаблон макета. Простейший пример — template/common/header.tpl. Этот файл генерирует хедер для всех страниц на front end.

Мы уже говорили, что OpenCart хорошо организует файлы шаблонов, поэтому header.tpl расположен в папке common. Большинство шаблонов в этой папке генерируют контент под слоты, которые вставляются в макет.

Модульные шаблоны
Модуль представляет собой некий блок, который вставляется в определенную область шаблона макета. Как вы, наверное, догадались, модульные шаблоны связаны с разными модулями. Насколько нам известно, в OpenCart много встроенных модулей, расширяющих базовый функционал.

По умолчанию в шаблоне макета доступно 4 позиции. Это:

Content Top

Content Bottom

Column Left

Column Right

Модуль можно закрепить в любой из этих позиций. Судя по названию, если прикрепить модуль в позицию content top, он будет отображаться сверху основного контента страницы. Модульные шаблоны хранятся в папке template/module. При создании новых модулей, соответствующие шаблоны необходимо помещать в эту папку.

Для OpenCart модульные шаблоны и подшаблоны очень похожи. Оба считаются дочерними шаблонами и вставляются в шаблон макета в процессе создания страницы.

Обнаружение шаблона макета в front end
Сперва давайте пройдемся по процессу рендеринга страниц на front end в OpenCart. При открытии страницы на front end, приложение выполняет следующую процедуру:

По переменной route в URL OpenCart находит соответствующий контроллер для обработки запроса. Ниже мы разберем, что такое и что делает переменная route. Сейчас же давайте представим, что она направляет OpenCart на соответствующий файл контроллера для выполнения.

Как только контроллер обработал информацию, он передает ее в элемент представления, отображающий отображается пользователю. Важно отметить, что контроллер также устанавливает имя файла шаблона макета, который будет задействован в представлении на следующем этапе.

Элемент представления вытягивает запрошенный файл шаблона и наполняет его контентом, подготовленным ранее в контроллере. Здесь процесс заканчивается отсылкой конечного представления пользователю.

Представьте, что вам захотелось поменять структуру макета любой страницы магазина на front end. Первым вопросом будет, как найти шаблон, отвечающий за определенную страницу. Точного способа нет, но давайте рассмотрим несколько способов.

Предсказание по структуре
Самый легкий способ предсказания шаблона по роуту. В OpenCart роут – переменная в строке запроса в URL. Например, разберем следующий URL, отображающий страницу авторизации для пользователя: //www.youropencartdomain.com/index.php?route=account/login.

В URL выше account/login – значение параметра route, который нам нужен. Это значение можно просто поискать в папке template стандартной темы. В этом случае путь к шаблону будет следующим: {opencart_document_root}/catalog/view/theme/default/template/account/login.tpl

Вы могли заметить, что вторая часть значения route login становится названием файла шаблона (login.tpl). Разберем еще один пример: //www.youropencartdomain.com/index.php?route=product/product&path=1&product_id=1

Пример с параметром route для страницы одного товара. Значение параметра route равно product/product. Шаблон для этого роута должен быть в папке: {opencart_document_root}/catalog/view/theme/default/template/product/product.tpl

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

Возьмем URL, отображающий страницу авторизации для пользователя: //www.youropencartdomain.com/index.php?route=account/login

По значению catalog/controller параметра route можно найти соответствующий файл контроллера. В этом случае файл контроллера будет лежать: {opencart_document_root}/catalog/controller/account/login.php

Как видите, вторая часть значения route login стала названием файла контроллера (login.php). В контроллере необходимо найти похожую строку кода:

$this->template = 'default/template/account/login.tpl';

$this->template = 'default/template/account/login.tpl';
Так контроллер говорит OpenCart, что тот должен отобразить шаблона макета login.tpl из темы default. Если этот шаблон переписан в пользовательской теме, то приоритет отдается ему!

Из двух описанных методов первый ближе разработчика тем, а второй для тех, кому проще копаться в коде.

Общие элементы шаблона макета
На данный момент вы должны уметь находить шаблон макета, который хотите кастомизировать. В последнем разделе этой статьи мы расскажем про часто используемые элементы в шаблоне макета. Разберем пример.

Откроем файл шаблона макета default/template/account/login.tpl.

$header отображает контент хедера на странице в OpenCart. Подходящий шаблон default/template/common/header.tpl.

$footer отображает контент футера на странице в OpenCart. Подходящий шаблон default/template/common/footer.tpl.

$column_left отображает контент всех модулей позиции column right. Подходящий шаблон default/template/common/column_right.tpl.

Пример такого типа контента – блок account, отображаемый в правом сайдбаре страницы авторизации. Если хотите кастомизировать определенный модуль, ищите его в default/template/module/{modulename.tpl}.

В случае с модулем account файл будет default/template/module/account.tpl. Как видите, именование файлов очень легко угадать, так как оно полностью совпадает с именем модуля.

$content_top отображает контент всех модулей позиции content top. Подходящий шаблон default/template/common/content_top.tpl.

$content_bottom отображает контент всех модулей позиции content bottom. Подходящий шаблон default/template/common/content_bottom.tpl.



Теперь вы должны уметь кастомизировать шаблоны в front end OpenCart. Как вы могли заметить, нужно изменить лишь пару шаблонов, чтобы полностью изменить внешний вид всего сайта.

Заключение
В этой части мы подробно обсудили природу шаблонов и методы поиска шаблонов в front end для последующей кастомизации. Также мы рассмотрели пару общих переменных, используемых в шаблонах макета на сайте. В последней части серии мы рассмотрим детальный пример, как можно изменить структуру макета домашней страницы в OpenCart.