Создание пользовательской темы в OpenCart: введение

29 Мая 2022г. в 04:33

Беглый взгляд на структуру OpenCart


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

OpenCart обладает крайне простой структурой папок, когда речь заходит об организации фреймворка. Все back end файлы расположены в папке admin. Файлы front end хранятся в папке catalog. Нам интересна папка catalog, так как в конце серии уроков мы создадим свою front end тему.

Шаблон проектирования OpenCart: MVC-L

Модель, вид, контроллер или MVC – крайне популярный шаблон проектирования в разработке ПО. OpenCart добавляет к нему еще один элемент – язык (во почему MVC-L).

В нашем случае мы будем размещать весь код темы в view. Если быстро пробежаться по структуре catalog, можно понять, как OpenCart оперирует данными.

Обзор элементов
Controller – занимается обработкой логики приложения

Language – разделяет зависящую от языка информацию на многоязычных сайтах

Model – получает данные с back end базы данных

View – здесь мы проведем большую часть времени! Занимается рендерингом front end макета

Знакомство со слоем представления


Тема OpenCart по умолчанию расположена в папке view. Этот раздел мы обсудим в следующей секции. Глубже есть еще 2 папки javascript и theme.

Давайте пока что предположим, что мы поместили все необходимые JS файлы в папку javascript. У этой папки есть свои исключения, когда в нее помимо JS файлов помещают файлы стилей и изображения. Например, в OpenCart есть библиотека цветов, которая содержит не только JS.

Нам интересует папка theme. В ней есть папка default – единственная встроенная тема OpenCart. Не пугайтесь такой глубокой вложенности папок темы, чуть позже мы более подробно ее разберем. А сейчас перейдем к структуре темы.

Стандартная структура темы
image – как вы догадались, здесь хранятся все изображения темы

stylesheet – код оболочки, обычно это стили

template – по названию можно понять, что здесь хранятся все front end файлы шаблонов. Файлы шаблонов разбиты на модули для удобства и ясности

Мир шаблонов


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

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

error – шаблон ошибки.

information – здесь лежат шаблоны Contact Page, Sitemap Page и Static informational page.

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

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

Например, при посещении на front end страницы My Account, задействуется шаблон из папки catalog/view/theme/default/template/account. В следующих статьях мы узнаем, как искать файл шаблона по URL страницы.