В предыдущей части этой серии мы узнали, как создать собственную тему и включить ее из серверной части OpenCart. Мы также изучили, как система переопределения шаблонов работает в приложении.
В этой части мы пойдем дальше и разберем важные шаблоны, чтобы понять основные элементы, используемые в общем шаблоне OpenCart. Мы также рассмотрим подробный вариант использования для интерпретации всего процесса генерации страницы. Это должно быть полезно, когда вам нужно настроить любую страницу в OpenCart.
Вообще говоря, когда мы смотрим на шаблоны, которые предоставляет OpenCart, мы можем разделить их на три категории. Важно отметить, что это официально не указано в документации OpenCart, но это поможет нам понять, что именно нужно для создания полной страницы во внешнем интерфейсе.
Шаблоны макетов
В терминах OpenCart шаблоны называются макетами. Вы можете представить себе, что шаблон макета является шаблоном декоратора, который собирает контент для различных областей страницы, помещает этот контент в макет и затем создает полную страницу.
Слоты могут ссылаться на такие элементы, как верхний и нижний колонтитулы, элемент боковой панели и содержимое модуля. Почти для каждой страницы в интерфейсе магазина существует связанный шаблон макета.
Важно отметить, что OpenCart также позволяет вам создавать макеты из серверной части, что является еще одним способом изменения частичной структуры определенных интерфейсных страниц.
Суб-шаблоны
Этот вид шаблона генерирует слот для конкретного контента. В общем случае контент генерируется вложенным шаблоном и помещается в шаблон макета. Простейшим примером такого рода является template/common/header.tpl . Он отвечает за генерацию части заголовка для каждой страницы в интерфейсе.
И, как мы обсуждали ранее, OpenCart предоставляет хороший способ упорядочить файлы шаблонов таким образом, что имеет смысл размещать header.tpl в common каталоге. Большинство шаблонов в этом каталоге генерируют специфичное для слота содержимое, которое в конечном итоге подключается к макету.
Шаблоны модулей
Помните, что модуль — это что-то вроде блока, который помещается в определенную область в шаблоне макета. Как вы уже, наверное, догадались, шаблоны модулей относятся к разным модулям, и, как мы видели, OpenCart поставляется с множеством встроенных модулей для расширения основных функций.
По умолчанию в шаблоне макета доступны четыре позиции региона. Они есть:
- Содержание Top
- Содержание снизу
- Колонка слева
- Правая колонка
Вы можете назначить модуль на любую из этих позиций. Как следует из названия, если вы назначили модуль на позицию «Верх содержимого», он будет отображаться над основным содержимым страницы. Шаблоны модулей находятся в каталоге template/module поэтому, если вы создаете новый модуль, вы должны поместить связанный шаблон в этот каталог.
Шаблоны модулей и суб-шаблоны похожи в том, как они обрабатываются OpenCart. Оба они рассматриваются как дочерний шаблон и помещаются в шаблон макета в процессе генерации страницы.
Обнаружение шаблона макета в интерфейсе
Во-первых, давайте пройдем процесс, за которым следует OpenCart, для рендеринга любой страницы в интерфейсе. Всякий раз, когда вы открываете страницу в интерфейсе, приложение выполняет следующую процедуру:
- Основываясь на переменной «route», установленной в URL, OpenCart находит соответствующий контроллер для обработки запроса. Мы точно увидим, что такое переменная «route» и что она делает в следующем разделе. А пока давайте просто предположим, что он ведет OpenCart к соответствующему файлу контроллера для выполнения.
- Теперь контроллер должен выполнить всю тяжелую работу для остальной части процесса. Контроллер — это место, где включены другие элементы, такие как языковые файлы и файлы моделей. Он также выбирает и настраивает фактическое содержимое, которое должно быть передано в шаблон макета для отображения.
- Как только контроллер завершает настройку контента, он передает эту информацию элементу представления, который отвечает за отображение окончательного вывода пользователю. Здесь важно отметить, что контроллер также задает имя файла шаблона макета, которое будет использоваться представлением на более позднем этапе.
- Наконец, элемент view извлекает требуемый файл шаблона и украшает его содержимым, которое было подготовлено ранее в контроллере. Процесс заканчивается здесь, отправляя вывод конечному пользователю.
Теперь рассмотрим сценарий, в котором вы хотите изменить структуру макета любой страницы в интерфейсе магазина. Первый вопрос, который возникает, заключается в том, как нам найти шаблон, связанный с конкретной страницей, хотя конкретных Чтобы сделать это, давайте посмотрим на некоторые из доступных вариантов.
1. Прогноз на основе структуры
Это самый простой способ предсказать связанный шаблон с любым маршрутом. В терминологии OpenCart «маршрут» — это переменная строки запроса в URL ссылки.
Например, рассмотрим следующий URL-адрес ссылки во внешнем интерфейсе, который отображает страницу входа для пользователя:
http://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 в приведенном выше случае). Давайте возьмем другой пример:
http://www.youropencartdomain.com/index.php?route=product/product&path=1&product_id=1
Это пример формата параметра «маршрут» для страницы сведений о продукте. Значением параметра «route» является product/product , поэтому шаблон для этого маршрута можно найти по адресу:
{opencart_document_root}/catalog/view/theme/default/template/product/product.tpl
2. Компьютерщик Путь
В большинстве случаев описанный выше способ должен работать, но есть несколько исключений, в этом случае вам нужно будет заглянуть в файл контроллера. Опять же, параметр маршрута приходит на помощь, что также помогает найти связанный файл контроллера.
Давайте рассмотрим URL ссылки, который отображает страницу входа для пользователя в интерфейсе:
http://www.youropencartdomain.com/index.php?route=account/login
Вы можете отобразить значение маршрута относительно catalog/controller чтобы найти связанный файл контроллера. Таким образом, в этом случае файл контроллера, который вы должны получить, выглядит так:
{opencart_document_root}/catalog/controller/account/login.php
Как вы, возможно, заметили, вторая часть значения «route», «login», становится именем файла контроллера ( login.php в приведенном выше случае). Как только вы найдете соответствующий файл контроллера, вы должны искать код примерно так:
$this->template = 'default/template/account/login.tpl';
Это способ контроллера сообщить OpenCart, что он должен отображать шаблон макета «login.tpl» из темы «по умолчанию». И да, конечно, если этот шаблон был переопределен в вашей пользовательской теме, ему будет дан приоритет!
Среди двух методов, обсуждаемых для поиска шаблона макета для любой страницы, первый более удобен для разработчиков тем, а второй — для тех, кто чувствует себя немного более комфортно при копании в коде.
Общие элементы шаблона макета
На этом этапе вам будет удобнее найти конкретный шаблон макета, который вы хотите настроить. В последнем разделе этой статьи мы познакомимся с некоторыми из обычных элементов в шаблоне макета. Мы будем придерживаться нашего примера ради этого упражнения.
Давайте откроем файл шаблона макета default/template/account/login.tpl для справки.
$ header отображает содержимое части заголовка на странице OpenCart. Связанный с этим шаблон можно найти по default/template/common/header.tpl .
$ footer отображает содержимое части нижнего колонтитула на странице OpenCart. Связанный с этим шаблон можно найти по default/template/common/footer.tpl .
$ column_left отвечает за отображение выходных данных всех модулей, назначенных позиции «Колонка влево», из серверной части. Связанный с этим шаблон можно найти по default/template/common/column_left.tpl .
$ column_right отвечает за отображение выходных данных всех модулей, назначенных для позиции «Column Right», из серверной части. Связанный с этим шаблон можно найти по default/template/common/column_right.tpl .
Блок «Аккаунт», отображаемый на правой боковой панели страницы входа в систему, предоставляет пример такого рода контента. В случае, если вы хотите настроить вывод конкретного модуля, вы должны найти этот файл по default/template/module/{modulename.tpl} .
В случае модуля «Учетная запись» это файл по default/template/module/account.tpl . Как видите, соглашение об именах файла шаблона модуля довольно легко угадать, так как оно точно совпадает с именем модуля.
$ content_top отвечает за отображение выходных данных всех модулей, назначенных для позиции «Content Top» из серверной части. Связанный с этим шаблон можно найти по default/template/common/content_top.tpl .
$ content_bottom отвечает за отображение выходных данных всех модулей, назначенных позиции «Нижняя часть контента», из серверной части. Связанный с этим шаблон можно найти по default/template/common/content_bottom.tpl .
На этом этапе вы должны чувствовать себя уверенно при настройке шаблонов для внешнего интерфейса OpenCart. Как вы могли заметить, вам нужно изменить очень мало шаблонов, чтобы полностью изменить внешний вид всего сайта.
Резюме
В этой части мы подробно обсудили природу шаблонов и методов для обнаружения шаблонов во внешнем интерфейсе для настройки. Мы также обсудили некоторые распространенные переменные, используемые в шаблонах макетов по всему сайту.
В заключительной части этой серии мы увидим подробный пример использования для изменения структуры макета домашней страницы OpenCart. Ваши мысли и комментарии приветствуются в ленте ниже!