Главная › Информация › 34 ›

Как подключить jquery битрикс

Как подключить jquery битрикс

В Битрикс 24.0+ встроенная библиотека jQuery отсутствует по умолчанию, поэтому для работы интерактивных компонентов необходимо подключение сторонней сборки. При ручном подключении достаточно скопировать minified-файл jQuery (например, jquery-3.6.0.min.js) в папку /local/js и добавить его в init.php через Asset::getInstance()->addJs(). Такой подход гарантирует единообразие версий на всем сайте и упрощает кэширование через HTTP-заголовки.

В любой из схем важно учитывать порядок загрузки: сначала объявить jQuery, затем – кастомные скрипты. Рекомендуется проверять актуальность версии библиотеки на официальном сайте (https://jquery.com/) не реже 1 раза в полугодие, а также контролировать HTTPS-протокол подключения для предотвращения «смеси контента». Такой подход снижает риск конфликтов с другими модулями и повышает скорость загрузки страниц.

Проверка наличия jQuery в стандартной сборке Битрикс

Проверка наличия jQuery в стандартной сборке Битрикс

Убедиться в подключении jQuery можно двумя способами: по файлу ядра и через JavaScript‑консоль браузера. В стандартном ядре Битрикс библиотека располагается по пути /bitrix/js/main/jquery/jquery.min.js. Откройте файловую структуру сайта или через FTP-клиент найдите этот файл – его присутствие указывает на стандартную сборку.

Для проверки на стороне клиента откройте консоль разработчика (F12) и введите typeof jQuery. Если в ответ получите "function", значит jQuery загружен и готов к использованию. Альтернативный способ – вызвать jQuery.fn.jquery, чтобы увидеть текущую версию, например "3.6.0".

При использовании CJSCore проверьте, что в шаблоне или компоненте подключена основа: Bitrix\Main\Page\Asset::getInstance()->addCore('jquery');. Если метод отсутствует, добавьте его в header.php вашего шаблона перед $APPLICATION->ShowHead().

Если библиотека не найдена или версия устарела, рекомендуется обновить ядро Битрикс до актуальной ветки 24.x или включить модуль «Подключение jQuery» в настройках ядра. Это гарантирует совместимость с последними патчами и исправлениями безопасности.

Подключение jQuery вручную через файл header.php

Подключение jQuery вручную через файл header.php

Сохраните актуальную сборку jQuery (например, версии 3.6.0) в папке шаблона: /local/templates/ваш_шаблон/js/jquery-3.6.0.min.js. Регулярно обновляйте файл, проверяя официальные релизы на jquery.com, чтобы исключить уязвимости.

Откройте header.php вашего шаблона и перед закрывающим стаком </head> вставьте подключение через API Битрикс:

<?php \Bitrix\Main\Page\Asset::getInstance()->addJs(SITE_TEMPLATE_PATH.'/js/jquery-3.6.0.min.js'); ?>

Если шаблон не использует класс Asset, добавьте скрипт вручную:

<script src="/js/jquery-3.6.0.min.js" integrity="sha384-..." crossorigin="anonymous"></script>. Проверьте соответствие атрибутов integrity и crossorigin подписи файла.

Размещайте подключение до любых остальных скриптов, которым требуется jQuery. После правок очистите кеш Битрикс (раздел «Настройки → Настройки продукта → Производительность») и кеш браузера для моментального применения изменений.

Воспользуйтесь Gulp, Webpack или другим сборщиком для минификации и сжатия, чтобы ускорить загрузку. В файле gulpfile.js настройте задачу на автообновление jquery-3.6.0.min.js из npm-пакета, сохраняя единообразие версий между локальной разработкой и продакшеном.

Добавление jQuery через шаблон сайта Битрикс

Откройте файл /bitrix/templates/ВАШ_ШАБЛОН/header.php и найдите подключение области <head>. Именно здесь следует зарегистрировать jQuery, чтобы скрипт загружался до всех пользовательских компонентов.

Используйте класс Asset для корректного управления зависимостями и кешированием. Вставьте сразу после $APPLICATION->ShowHead(); следующую строку:
\Bitrix\Main\Page\Asset::getInstance()->addJs('/local/js/jquery-3.6.0.min.js');

Разместите файл jquery-3.6.0.min.js в каталоге /local/js/. Это позволит при обновлении Битрикса избежать перезаписи вашего скрипта и сохранить управляемость версий.

Для подключения CDN-версии с резервным локальным вариантом добавьте перед закрывающимся </head> блок:


<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJm6n5GJnP8x0nY4Ajt2/UJZSv88ryKRc3zGc=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/local/js/jquery-3.6.0.min.js"><\/script>');</script>

После правок очистите кеш через админ‑панель (Настройки → Производительность → Очистить кеш) и проверьте загрузку: откройте исходный код страницы и убедитесь, что ссылка на jQuery идёт до ваших скриптов.

Использование jQuery без конфликтов с другими библиотеками

Использование jQuery без конфликтов с другими библиотеками

Чтобы jQuery не перекрывал символ «$», после подключения библиотеки вызовите метод jQuery.noConflict(). Это вернёт управление глобальной переменной $ предыдущей библиотеке, а экземпляр jQuery сохранится в переменной jQuery:

var jq = jQuery.noConflict();

Для удобства работы используйте немедленно вызываемую функцию с передачей jQuery в качестве аргумента. Внутри конструкции можно безопасно использовать «$», не затрагивая глобальный контекст сторонних скриптов:

(function($){
$(document).ready(function(){
// код на jQuery
});
})(jQuery);

Если на странице подключается несколько версий jQuery, вызывайте noConflict(true) для удаления всех экземпляров из глобальной области видимости и сохранения нужного в своей переменной:

var jq3 = jQuery.noConflict(true);

В компонентах Битрикс размещайте кастомный скрипт после подключения всех библиотек: в init.php добавьте через Asset::getInstance()->addJs() и оборачивайте код аналогичной IIFE‑структурой. Это исключит конфликты при одновременном использовании Prototype, MooTools или других фреймворков.

Подключение локальной версии jQuery в Битрикс

Подключение локальной версии jQuery в Битрикс

Скопируйте актуальный файл jquery.min.js (например, версии 3.6.0) в директорию проекта, например /local/js/jquery/. Это позволит избежать зависимостей от внешних CDN и гарантировать консистентность версии при развертывании.

Зарегистрируйте скрипт в системе Битрикс через класс Asset или CJSCore. В файле /local/php_interface/init.php добавьте следующий код для глобальной загрузки на всех страницах:

Действие Пример кода
Регистрация скрипта в CJSCore 
\CJSCore::RegisterExt(
'jquery_local',
[
'js' => '/local/js/jquery/jquery.min.js',
'rel' => ['core']
]
);
\CJSCore::Init(['jquery_local']);
Подключение через Asset 
use Bitrix\Main\Page\Asset;
Asset::getInstance()->addJs('/local/js/jquery/jquery.min.js');

Если нужно подключить jQuery только в конкретном шаблоне, добавьте вызов Asset::getInstance()->addJs() или CJSCore::Init() в файле шаблона header.php вашего компонента или сайта. Для контроля порядка загрузки укажите зависимость 'rel' => ['core'] при регистрации через CJSCore.

Проверка корректной загрузки и работы jQuery на странице

Для подтверждения правильного подключения jQuery в Битрикс важно выполнить последовательную проверку с использованием минимальных скриптов и инструментов браузера.

  1. Проверка наличия библиотеки:
    • Откройте консоль разработчика (F12) и введите typeof jQuery. Результат должен быть "function".
  2. Проверка версии jQuery:
  3. Тест базового функционала:
    • Добавьте в шаблон скрипт: 
      $(document).ready(function() {
console.log('jQuery работает');
});
    • Обновите страницу и убедитесь, что сообщение появляется в консоли без ошибок.
  4. Проверка конфликтов:
    • Если на странице присутствуют другие библиотеки с символом $, выполните jQuery.noConflict() и используйте вместо $ полное имя jQuery.
    • Проверьте отсутствие ошибок в консоли, связанных с конфликтами или повторным подключением.
  5. Валидация подключения в шаблоне Битрикс:
    • Убедитесь, что скрипт подключён через $APPLICATION->AddHeadScript() или в файле template.php, чтобы избежать дублирования.
    • Проверяйте подключение в режиме «Включить все скрипты» в настройках шаблона для отладки.

Регулярное выполнение этих действий помогает избежать проблем с загрузкой jQuery и обеспечивает стабильную работу функционала, зависящего от этой библиотеки в Битрикс.

Вопрос-ответ:

Как подключить jQuery в Битрикс вручную?

Для ручного подключения jQuery в Битрикс нужно добавить тег