Подключение зависимостей в Bitrix

В back-end based подходе управлять зависимостями должна back-end платформа. Т.к. только платформа знает на какой странице какой функционал и, следовательно, какие файлы front-end статики должны быть подключены.

В битриксе есть собственный механизм управления зависимостями.

Подключение в шаблоне

Если вам нужно подключить js или css файл на страницу мы не используем тег script или link. А используем менеджер зависимостей.

За подключение зависимостей отвечает PHP класс \Bitrix\Main\Page\Asset.

    # Простой пример как подключить зависиость
    \Bitrix\Main\Page\Asset::getInstance()->addJs(STATIC_FOLDER . "node_modules/jquery-scrollify/jquery.scrollify.js");
    
    # Когда у вас несколько вызовов, можно вынести инстанс Asset в переменную
    $asset = \Bitrix\Main\Page\Asset::getInstance();
    $asset->addJs(STATIC_FOLDER . "node_modules/jquery-scrollify/jquery.scrollify.js");
    $asset->addJs(STATIC_FOLDER . "build/js/main.js");
    $asset->addJs(STATIC_FOLDER . "build/css/main.css");

В примерах выше используется константа STATIC_FOLDER, которая равна /local/static/.

Asset по умолчанию подключит ваши завимости на страницу.

Подключение в шаблоне компонента

$this->addExternalCss('ПутьКCSSфайлу');
$this->addExternalJs('ПутьКJSфайлу');

Дубли

Можно их не боятся, bitrix сам все разрулит.
Допустим у вас на страницу подключается 2 компонента, у которых в зависимости указан slick-slider.
В таком случае bitrix поймет что не нужно на страницу подключать 2 одинаковых JS скрипта и подключит всего один.

Настройки Менеджера зависимостей Asset

В настройках главного модуля

https://w6p.ru/MWE5Mj.png

есть раздел посвященный настройке менеджера зависимостей.

По умолчанию рекомендовано включать сразу все галочки. Для разработки можно выключать объединение. Однако крайне рекомендуется сразу включать перенос JS вниз страницы, иначе если потом включить галочку — у вас могут быть с этим проблемы.

Что если вам нужно чтобы подключение JS скрипта не перенеслось вниз

Это актуально для Google.Analitics или Yandex.Metrika. Они должны быть подключены вверху страницы.

<!-- Google Tag Manager -->
<script data-skip-moving="true">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
                                                      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-MM9QPC7');</script>
<!-- End Google Tag Manager -->

Проблему решает data-skip-moving="true". Если вы подключите скрипт таким образом — у вас вызов скрипта не перенесется вниз страницы.

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *