Узнай стоимость продвижения
Ответим в течение рабочего дня
После заявки созвонимся для уточнения деталей

Подключение 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); 
}
Это полезно, если скрипт нужен в нескольких шаблонах сайта.

Как вставить JS в конец сайта

Использование defer

Чтобы переместить файлы javscript в конец сайта нужно включить опцию Переместить весь Javascript в конец страницы в разделе Настройки>Настройки продукта>Настройки модулей>Главный модуль. Скриптам, которые должны остаться на месте, нужно прописать data-skip-moving="true".
Подключение дополнительных скриптов позволит вам оптимизировать сайт. Не исключайте такую возможность - она не требует больших трудов и по итогу вы получаете быстрый сайт.
Автор
Антон Чуркин
Bitrix программист Альтопромо