От автора: в этой серии уроков я покажу, как создать свои OpenCart темы с помощью популярного open source E-Commerce фреймворка. В первой части я объясню базовую структуру темы. Статья подразумевает, что у вас есть рабочая установка OpenCart на локальной машине. Если нет, обратитесь к онлайн документации OpenCart для установки (установка за пределами нашего урока). После установки можно приступать!
Беглый взгляд на структуру 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 страницы.
Заключение
Конец первой части. Вы изучили базовую структуру темы в OpenCart. В следующей части мы научимся создавать пользовательскую тему в OpenCart.
Автор: Sajal Soni
Источник: //code.tutsplus.com/
Редакция: Команда webformyself.