Как подключить jQuery на Битрикс
Если компоненту или модулю нужна библиотека jQuery, то подключить его можно следующим образом.
Идете в редактирование текущего шаблона сайта и прежде всего смотрите, не подключена ли уже библиотека (например, разработчиком). Сделать можно путем поиска в браузере (Ctrl+F) по подстроке jquery. Если не подключено, то скачиваете последнюю версию библиотеки на оф.сайте (Download), сохраняете где-то у себя на сервере (я обычно храню в /bitrix/templates/.default/js/) и в секцию head вашего шаблона размещаете путь до библиотеки путем вставки такой строчки:
Если вы не специалист, то данную строчку лучше разместить сразу после строчки . Специалисты на свое усмотрение. Вместо звездочки вставьте имя текущей скачанной вами библиотеки. Все.
Правильное добавление плагинов jquery в шаблоны компонентов Битрикс
Часто возникает примерно следующая задача — нужно взять компонент, например 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:
для css:
$APPLICATION->SetAdditionalCSS($templateFolder.»/css/nivo-slider.css);
По аналогии нужно подключить и файлы из папки themes/default.
5. Подготавливаем нужным образом файл template.php шаблона компонента. Как нужно подготовить верстку — можно узнать из README плагина.
6. Создаем файл script.js для запуска плагина в папке шаблона компонента. Этот файл, если он существует в папке шаблона, подключается автоматически.
Примечание: для работы API $APPLICATION->AddHeadScript и $APPLICATION->SetAdditionalCSS требуется наличие в header.php в блоке операции $APPLICATION->ShowHead();
Подключение jQuery из ядра битрикса
1С-Битрикс http://www.1c-bitrix.ru Общие вопросы info@1c-bitrix.ru Приобретение и лицензирование продуктов : sales@1c-bitrix.ru Маркетинг/мероприятия/PR marketing@1c-bitrix.ru Партнерская программа partners@1c-bitrix.ru Мы работаем с 10:00 до 19:00 по московскому времени. Офис в Москве 127287 Россия Московская область Москва 2-я Хуторская улица дом 38А строение 9 Офис в Калининграде +7 (4012) 51-05-64 Офис в Калининграде 236001 Россия Калининградская область Калининград Московский проспект 261 Офис в Киеве ukraine@1c-bitrix.ru Телефон в Киеве +3 (8044)221-55-33 Офис в Киеве 01033 Украина Калининградская область Киев улица Шота Руставели 39/41 офис 1507
© 2001-2023 «Битрикс», «1С-Битрикс». Работает на 1С-Битрикс: Управление сайтом. Политика конфиденциальности
Как подключить JS в Bitrix
В статье мы расскажем как подключить свой JS файл в Битриксе. Покажем вам несколько способов подключения файлов стилей и скриптов при верстке шаблонов в системе управления 1С-Битрикс. Это пригодится, если вы получаете готовую верстку в HTML/CSS, чтобы грамотно подключить файлы стилей, js и мета теги при интеграции шаблона в Битрикс.
Как подключить свой JS файл в Битриксе
Первый способ – прописать в коде.
Такие скрипты не кешируются и не минифицируются битриксом. С другой стороны, к ним можно добавить свойства defer, async или свойство data-skip-moving=»true», про которое будет сказано ниже.
Второй способ
Если код относится к шаблону конкретного компонента, можно в папке шаблона создать файл script.js. Такой файл будет подключен автоматически, вместе с компонентом.
Третий способ
Если вам не достаточно одного script.js, можно добавить дополнительные файлы скриптов с помощью
$this→addExternalJs(SITE_TEMPLATE_PATH . «/newscript.js») в template.php
Четвёртый способ
Если скрипт нужно добавить вне шаблона, или один и тот-же скрипт используется в разных шаблонах, можно использовать функцию Asset::getInstance()→addJs(путь к файлу);, которая добавляет соответствующий файл в секцию head документа. Метод этот является заменой методу $APPLICATION→AddHeadScript(‘scr’);
используется следующим образом
use Bitrix\Main\Page\Asset;
Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . «/fix.js»);
Библиотеку jquery можно подключить с помощью функции CUtil::InitJSCore(array(‘jquery’)). С её помощью можно добавляются различные библиотеки Битрикса, например — медиаплеер.
С помощью этой функции вы можете подключать и свои собственные библиотеки. Для этого вам нужно зарегистрировать её, разместив в init.php такую конструкцию
$arJsConfig = array(
‘Название_библиотеки’ => array(
‘js’ => ‘Путь к файлу js’, // ‘/bitrix/js/custom/main.js’
‘css’ => ‘Путь к файлу css’, // ‘/bitrix/js/custom/main.css’
‘rel’ => array(),
)
);
foreach ($arJsConfig as $ext => $arExt)
\CJSCore::RegisterExt($ext, $arExt);
>
Это полезно, если скрипт нужен в нескольких шаблонах сайта
Использование defer
Чтобы переместить файлы javscript в конец сайта нужно включить опцию Переместить весь Javascript в конец страницы в разделе Настройки>Настройки продукта>Настройки модулей>Главный модуль. Скриптам, которые должны остаться на месте, нужно прописать data-skip-moving=»true».
Подключение дополнительных скриптов позволит вам оптимизировать сайт. Не исключайте такую возможность — она не требует больших трудов и по итогу вы получаете быстрый сайт.
Также советуем вам просмотреть интересный кейс по созданию интернет магазина на Битрикс.