Как подключить JS в Bitrix

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

    В статье мы расскажем как подключить свой 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".

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

    Также советуем вам просмотреть интересный кейс по созданию интернет магазина на Битрикс.

    Читайте далее
    Разработка
    Как перенести сайт 1С:Битрикс на другой хостинг: пошаговая инструкция
    Перенос сайта 1С:Битрикс на другой хостинг
    Разработка
    Резервное копирование и восстановление сайта на 1С-Битрикс: все способы восстановления и создания бэкапа
    Резервное копирование и восстановление сайта на 1С-Битрикс
    Разработка
    Подключение JS в Bitrix: все способы в системе управления 1С-Битрикс
    Как подключить JS в Bitrix
    Разработка
    Настраиваем web-сервера, nginx и apache на одном сервере
    Настраиваем веб-сервер — nginx и apache на одном сервере
    Разработка
    Что такое Gulp и зачем нужен: как с ним работать, установка, примеры
    Что такое Gulp и как с ним работать
    Разработка
    Как добавить пиксель на сайт своими руками в 2022 году?
    Как добавить пиксель на сайт
    Разработка
    Кэширование данных в Bitrix: настройка, как это работает, что это такое
    Кэширование данных в Bitrix
    Разработка
    Cron в Битриксе - функционал Агентов для регулярных задач
    Cron в Битриксе
    Разработка
    Как установить Bitrix своими руками: инструкция
    Установка Bitrix
    Разработка
    Сортировка товаров в каталоге по цене в 1С Битриксе
    Сортировка по цене в Битриксе