Opencart как подключить скрипт

Как подключать JavaScript и CSS файлы в OpenCart?

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

Как и в большинстве движков, в OpenCart заложено разделение исполняемого кода от самого шаблона отображения. Шаблоны сайта лежат в отдельной отведенной для этого директории. И вопрос стоит в том, каким же образом можно подключать свои скрипты в этих шаблонах.

Подключение скриптов непосредственно в шаблоне OpenCart

Пожалуй, первое и самое элементарное это подключение скриптов непосредственно в самих файлах шаблона. Шаблон заголовка страницы мы можем найти по пути:

Мы можем прописать подключение без использования дополнительных обращений к программной части на сервере. Прописав в заголовке страницы код подключения скрипта JavaScript всё будет работать обычным образом:

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

Динамическое подключение скриптов в OpenCart

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

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

Прописать запись вида:

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

Динамическое подключение скриптов в произвольных блоках шаблона

Подключение скриптов иногда требуется выполнять к примеру, не в самом заголовке странице, а в нижней части сайта. Особенно это часто рекомендуют делать различные сервисы по оптимизации скорости загрузки страниц сайта. По этой причине возникает необходимость подключения скриптов в «подвале» сайта. Этот момент разработчики OpenCart тоже учли, и возможность такого подключения своих скриптов так же присутствует.

Функцию подключения скриптов в OpenCart выполняет библиотека Document, которая располагается тут:

Изучив код библиотеки можно заметить, что у метода addScript так же может быть использован второй аргумент — position. В качестве значения по умолчанию для этого аргумента присвоено – header. Вы, наверное, уже догадались, этот параметр может определять назначение подключаемого файла для конкретных участков разметки. И для того чтобы подключить наш файл JavaScript в footer, достаточно при подключении добавить второй параметр:

Для вывода в контроллере footer-а должен присутствовать код получения скриптов в таком виде:

Данные шаблону с контролёра передаются в виде массива. И уже в шаблоне данными массив прописывает строки подключения скриптов посредством цикла foreach.

Как подключить CSS-файл в OpenCart?

Как мы знаем для работы сайтов также используются CSS-файлы стилей. По аналогии со скриптами, подключать файлы стилей мы можем на отдельных страницах сайта. Про то как прописать непосредственно в шаблоне статическую запись мы пропустим. Давайте лучше подключим CSS-файл правильным образом, и позже я поясню почему.
Чтобы подключить CSS-файл, в классе контроллера прописать код такого вида:

Подключать файлы стилей рекомендуется именно посредством использования функционала библиотеки Document. Это связано с тем, что перед тем как отдаваться в браузер сам OpenCart так же может выполнять оптимизацию и сжатие файлов. К тому же, если проект довольно масштабный, код стилевого оформления может занимать значительные размеры. Разделяя страницы по разным типам, достаточно будет подключать нужный стиль, для нужной страницы. Такой метод положительно влияет на скорости отрисовки страницы в браузере.

Источник

Opencart как подключить скрипт

Frontend / Backend developer

Модули в Opencart: разбираемся в основах

В этой статье разберёмся с основами системы модулей в популярном e-commerce движке Opencart и напишем простой модуль.

Данная статья не рассматривает OCmod/VQmod, здесь мы поговорим об основах и напишем несложный модуль.

Движок Opencart — это довольно успешный opensource проект на ниве e-commerce решений. Думаю, успех его достигнут, не в последнюю очередь, благодаря экстремально простой архитектуре, заложенной в движок ещё в первых версиях.

По сути, мы имеем MVC+L архитектуру — это уже, практически стандартный, в индустрии Model-View-Controller и Language (не знаю почему, но систему перевода выделяют в отдельную букву).

Движок предоставляет два отдельных интерфейса — admin и catalog, соответственно бэкенд/фронтенд сайта (по старым до_javascript_frontend_development понятиям), т.е. это два отдельных приложения в одном, и большую часть всех манипуляций вы, как разработчик, будет проводить именно там.

Каталог system в корневой директории содержит все вспомогательные элементы Opencart, его базовый код, а также набор библиотек (system/library), куда вы можете добавлять необходимые для работы библиотеки.

Обратите внимание

На данный момент, в дикой природе существуют и функционируют три основные версии Opencart — 1.5.6, 2.3, 3.0.2.0.

Между этими версиями существуют некоторые различия, о которых мы поговорим в следующей статье, но сейчас будем рассматривать всё со стороны наиболее популярной версии 2.3.

Реестр Opencart (Registry)

Реестр в Opencart, это основа основ всего в этом движке, он представляет собой реализацию Dependency Injection паттерна и агрегирует в себе всё, что вы используете стандартными способами. Мы детально рассмотрим внутреннюю кухню Opencart в одной из следующих статей, а пока просто примем тот факт, что вокруг registry построено всё в Opencart — от загрузчика до контроллеров.

Проксирование (Proxy)

Прокси устроен достаточно просто — все методы проксируемого объекта копируются в объект прокси. В классе реализованы магические методы __set, __get, __call, определяющие поведение объекта (отличий от стандартного поведения фактически никакого), сама концепция прокси, вероятно, внедрена исключительно для поддержки моделями event handler системы (в Opencart 1.5 этой концепции не было, как и Proxy).

Opencart использует проксирование ТОЛЬКО для моделей.

Танцы с Proxy

Загрузчик Opencart передаёт в Proxy ТОЛЬКО методы!

Это может сыграть с вами злую шутку, если вы хотите использовать предопределённые переменные класса или объекта, через self/$this.

Поскольку проксированный объект использует __get/__set завязанные на Registry, вы не сможете получить доступ к своим изначальным переменным в классе нигде, за исключением конструктора!

Загрузчик классов

Opencart использует собственный загрузчик классов — хоть это и возможно, но не рекомендуется прямое подключение PHP файлов (include/require), что налагает свои требования по именованию классов.

Этот загрузчик устроен довольно просто — он предоставляет несколько методов для реализации разного поведения, при загрузке разных типов классов, например метод controller попытается выполнить метод контроллера по переданному роуту, словно его запрашивает пользователь:

А вот при загрузке модели — она просто будет проксирована и добавлена в Registry:

view — попытается отрендерить представление, language загружает языковой пакет, library — загружает и инициализирует библиотеку подобно модели, но без префиксов (system/library/*), helper подключит скрипт с вспомогательными функциями (system/helper)

Директории модуля

Директории модуля полностью повторяют директории сайта — Opencart просто поместит ваши файлы внутрь себя. Это означает что вы можете устанавливать ocmod.zip файлы через установщик, или просто копировать файлы модулей в соответствующие директории сайта.

Пример модуля

Давайте напишем простенький модуль под названием «example».

Наш модуль не будет делать ничего особенного, всего лишь выводить текст «Hello from example module» в том месте, куда вы его вставите в настройках шаблонов (дизайн → макеты).

Для этого нам необходимо подготовить следующую иерархию каталогов:

В этом примере мы опустим использование моделей и вернёмся к ним в следующей статье, когда попытаемся сделать что-то поинтереснее.

Bash tip:

В bash, для быстрой генерации этих каталогов вы можете воспользоваться такой командой:

Эта команда сгенерирует набор директорий указанный слева.

В моём блоге вы можете найти bash функцию для удобной генерации структуры директорий для модуля Opencart.

Обратите внимание!

Если вы собираетесь распространять модуль в виде ocmod.zip файла — корневым каталогом в архиве должен быть upload!

Административная часть или бэкенд модуля

Переводы

Переводы Opencart хранятся в каталоге languages, они довольно примитивны и представляют собой PHP файлы содержащие массив $_. В этом массиве прописываются ключи-значения, и, собственно, всё!

В каждой языковой директории имеется файл с названием кода языка (например, languages/ru-ru/ru-ru.php), в котором содержатся общесистемные переводы, а также региональные настройки.

Обратите внимание!

Языковой загрузчик Opencart работает по принципу замещения подгруженных ранее переводов, поэтому вам нет необходимости подключать или перезаписывать системные переводы.

Каждый модуль Opencart должен обладать одноимённым файлом переводов, в котором необходимо наличие секции heading_title, значение этой секции используется для вывода названия модуля в списке модулей:

Обратите внимание!

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

Контроллер

Настало время разработки контроллера для админки. Для этого создадим файл example.php в директории admin/controller/extension/module:

Обратите внимание на префикс ControllerExtensionModule в названии нашего класса — Controller даёт загрузчику понять что он имеет дело с контроллером, ExtensionModule — что класс лежит в директории extension/module.

Все ваши контроллеры и модели обязаны придерживаться этого правила наименования, иначе загрузчик попросту не сможет подключить ваши классы!

Теперь давайте создадим свой action с названием index. Этот метод можно считать входной функцией модуля (как функция main в C):

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

Представление или шаблон

Opencart не использовал внешних шаблонизаторов вплоть до третьей версии (там прикрутили twig), и по сути шаблоны, это такая мешанина html + php.

У такой связки есть только один минус — она позволяет говнокодить и использовать php в шаблоне не по назначению.

Давайте создадим шаблон для нашего модуля — view/template/extension/module/example.tpl:

Отлично!

Административная часть модуля готова, давайте протестируем её. Для этого можно пойти двумя путями.

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

Bash tip:

Для удобного и быстрого копирования всех файлов нашего модуля в движок, можно воспользоваться командой rsync:

А для быстрого создания нужного нам архива можно воспользоваться консольной версией zip:

После того как модуль будет внедрён одним из способов в систему, нужно его установить (находим его в разделе «дополнения/дополнения» и кликаем по зелёной кнопке установки). Кроме того, поскольку наш модуль подразумевает возможность вставки через интерфейс настройки шаблонов, нужно его активировать (переходим в редактирование модуля и выбираем статус «включено»):

На заметку

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

Как только мы включили модуль, он становится доступен для выбора в настройках макетов. Теперь мы с лёгкостью можем добавить его на сайт:

Однако, сейчас вы не увидите никаких изменений на странице, поскольку мы не написали ни строки управляющего кода для фронтенд части (catalog).

Концептуальной разницы между admin/catalog частями модуля почти нет, стоит только упомянуть, что в панели администрирования нет такого понятия как «тема» — там все представления располагаются сразу в папке template.

Фронтендная часть модуля подразумевает такую структуру файлов представления: view/theme/default/template/extension/module.

Обратите внимание!

Всегда создавайте стандартные шаблоны модуля в теме default. Эта тема всегда присутствует в Opencart, поэтому у вас не возникнет проблем с дистрибуцией шаблонов. Кроме того, далее мы увидим как можно дать пользователям модуля возможность кастомизировать их на уровне темы.

Пользовательская часть (или фронтенд)

Контроллер

Помните, я упоминал контроллеры, которые возвращают отрендеренные шаблоны, а не устанавливают их в объект Response?

Для фронтенда мы воспользуемся именно таким способом вывода содержимого − catalog/controller/extension/module/example.php:

При выводе модуля, прикреплённого в макете, Opencart вызывает индексный экшн (метод index). В нём мы проверяем — существует-ли кастомное представление в текущей теме сайта ($this->config->get(‘config_template’)), и если существует, то оно и будет загружено, если нет, то будет использовано представление из темы default.

Таким образом мы позволяем пользователям нашего модуля гибко изменять шаблоны модуля согласно своим требованиям.

А вот и наше стандартное представление − catalog/view/theme/default/template/extension/module/example.tpl:

Когда вы запакуете и установите обновлённую версию нашего модуля, то получите что−то в таком духе:

Подведём итог

Мы разработали абсолютно бесполезный, но собственный модуль для Opencart 2. Рассмотрели базовые принципы разработки и некоторые подводные камни.

В следующей статье я планирую рассказать о системе OCmod/VQmod, показать что это, зачем и как использовать.

Помните — Opencart это свободное программное обеспечение, поэтому вы можете самостоятельно изучать и модифицировать его в своих целях.

Источник