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

[Pascha]

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

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

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

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

/catalog/view/theme/default/template/common/header.tpl

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

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

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

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

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

/catalog/controller/common/header.php

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

$this->document->addScript('catalog/view/javascript/bootstrap/js/bootstrap.min.js ');

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

<?php foreach ($scripts as $script) { ?>
<script src="/<?php echo $script; ?>" type="text/javascript"></script>
<?php } ?>

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

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

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

/system/library/document.phpsystem/library/document.php

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

	
$this->document->addScript('catalog/view/javascript/bootstrap/js/bootstrap.min.js','footer');

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

$data['scripts'] = $this->document->getScripts('footer');

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

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

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

$this->document->addStyle('catalog/view/javascript/slick/slick.css');

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

<?php foreach ($styles as $style) { ?>
<link href="/<?php echo $style['href']; ?>" type="text/css" rel="<?php echo $style['rel']; ?>" media="<?php echo $style['media']; ?>" />
<?php } ?>

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