Антон Чуркин

Автор статьи

Антон Чуркин
PHP программист

Написана 10.11.2021

Понравилось?
Поделись c друзьями:

Подключение 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".

 Подключение дополнительных скриптов позволит вам оптимизировать сайт. Не исключайте такую возможность - она не требует больших трудов и по итогу вы получаете быстрый сайт.

Иван ЯрославцевДиректор Альтопромо
Давайте обсудим ваш проект прямо сейчас

Разрешённые форматы: doc, docx, xlsx, txt, pdf, otf, png, tiff, bmp, jpeg и jpg. Размер файла не должен превышать 10 мегабайт.

Мы гарантируем, что ваши персональные данные не будут переданы третьим лицам.