Найти в Дзене
1С-Битрикс - Программирование сайтов
244 подписчика

Правильное добавление плагинов jquery в шаблоны компонентов Битрикс

138
2 мин
Часто возникает примерно следующая задача — нужно взять компонент, например bitrix:news.list, и сделать такой шаблон, который показывает новости не традиционным списком новостей, а, к примеру, последовательностью сменяющихся кадров (слайдов) или какой-нибудь каруселью. Обычно в таких случаях в последнее время используют библиотеку jquery и подыскивают соответствующий плагин, который может обеспечить требуемую функциональность. В этой статье я опишу как именно подключать в шаблоне компонента, требуемые файлы, чтобы плагин работал.Предположим, нам требуется подключить nivoslider, для того, чтобы создать красивый слайдер новостей, вместо унылого списка. Для этого: 1. Зайдем на сайт nivoslider — http://nivo.dev7studios.com/ и посмотрим какие файлы нужно подключить, чтобы его можно было включить. Оказалось, что по-минимуму это файлы: jquery.nivo.slider.pack.js , nivo-slider.css и папка themes/default. 2. Создаем шаблон компонента и кидаем туда эти файлы. Я предпочитаю как-то расп

Часто возникает примерно следующая задача — нужно взять компонент, например 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();