В статье мы расскажем как подключить свой 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".
Подключение дополнительных скриптов позволит вам оптимизировать сайт. Не исключайте такую возможность - она не требует больших трудов и по итогу вы получаете быстрый сайт.
Также советуем вам просмотреть интересный кейс по созданию интернет магазина на Битрикс.