Часто возникает примерно следующая задача — нужно взять компонент, например bitrix:news.list, и сделать такой шаблон, который показывает новости не традиционным списком новостей, а, к примеру, последовательностью сменяющихся кадров (слайдов) или какой-нибудь каруселью. Обычно в таких случаях в последнее время используют библиотеку jquery и подыскивают соответствующий плагин, который может обеспечить требуемую функциональность. В этой статье я опишу как именно подключать в шаблоне компонента, требуемые файлы, чтобы плагин работал.Предположим, нам требуется подключить nivoslider, для того, чтобы создать красивый слайдер новостей, вместо унылого списка. Для этого:
1. Зайдем на сайт nivoslider — http://nivo.dev7studios.com/ и посмотрим какие файлы нужно подключить, чтобы его можно было включить.
Оказалось, что по-минимуму это файлы: jquery.nivo.slider.pack.js , nivo-slider.css и папка themes/default.
2. Создаем шаблон компонента и кидаем туда эти файлы. Я предпочитаю как-то распределять их по папкам: например, картинки — в папку images, скрипты — в папку js, файлы стилей — в папку css. Можно еще раскидывать по плагинам, вполне вероятно, что в некоторых случаях это будет даже удобнее.
3. Подключаем jquery. Но тут есть варианты: 1 — если у вас jquery используется еще в каких-то компонентах, то вероятно проще всего его включить в шаблоне сайта для всех сразу, 2 — если использование jquery планируется только в этом шаблоне или в этом и еще в одном или двух, то вероятно лучше не подключать его для всего сайта, а включить непосредственно в данных шаблонах компонентов.
Подключить jquery можно по разному: 1 — можно включить инструкцией CJSCore::Init(array(«jquery»)); . Так можно включить jquery, который идет в поставке битрикс. 2 — Можно включить jquery из репозитария google — вероятно так библиотека будет быстрее подключаться к сайту — код такой $APPLICATION->AddHeadScript(«http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js»);
Теперь в зависимости от того, нужно ли нам jquery подключить для всего сайта или только для данного шаблона — есть варианты:
— для всего сайта — пишем эти строки в файле header.php, используемого шаблона сайта.
— для конкретного шаблона компонента — пишем эти строки в component_epilog.php шаблона компонента.
4. Подключаем файлы плагина. Тут вариант один — мы должны подключить их в шаблоне компонента. Подключать нужно js и css.
Пишем в component_epilog.php для js:
$APPLICATION->AddHeadScript($templateFolder.»/js/jquery.nivo.slider.pack.js»);
для css:
$APPLICATION->SetAdditionalCSS($templateFolder.»/css/nivo-slider.css);
По аналогии нужно подключить и файлы из папки themes/default.
5. Подготавливаем нужным образом файл template.php шаблона компонента. Как нужно подготовить верстку — можно узнать из README плагина.
6. Создаем файл script.js для запуска плагина в папке шаблона компонента. Этот файл, если он существует в папке шаблона, подключается автоматически.
Примечание: для работы API $APPLICATION->AddHeadScript и $APPLICATION->SetAdditionalCSS требуется наличие в header.php в блоке <head> операции $APPLICATION->ShowHead();