Сегодня рассмотрим как правильно подключить jQuery в новом ядре 1С Битрикс.
Итак, в идеальном мире, когда подключение скриптов контролирует разработчик сайта, а не Битрикс, header.php должен быть примерно таким, т.е. в каком порядке разработчик подключает скрипты и стили, в таком порядке они и должны выводиться.
<?
use Bitrix\Main\Page\Asset;
if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true)
die();
/**
* @var CUser $USER
* @var CMain $APPLICATION
*/
$asset = Asset::getInstance();
?><!DOCTYPE html>
<html lang="<?=LANGUAGE_ID?>">
<head>
<meta charset="<?=SITE_CHARSET?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><? $APPLICATION->ShowTitle() ?></title>
<?
//Тут мета-теги
$APPLICATION->ShowMeta("robots", false, false);
$APPLICATION->ShowMeta("keywords", false, false);
$APPLICATION->ShowMeta("description", false, false);
?>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<?
//Тут канонический url
$APPLICATION->ShowLink("canonical", null, false);
//Тут стили шаблона сайта
$asset->addCss(SITE_TEMPLATE_PATH . '/css/bootstrap.min.css');
//Тут выводим стили
$APPLICATION->ShowCSS(true, false);
//Тут скрипты
$asset->addJs(SITE_TEMPLATE_PATH . '/js/jquery-3.2.1_min.js');
$asset->addJs(SITE_TEMPLATE_PATH . '/js/popper.min.js');
$asset->addJs(SITE_TEMPLATE_PATH . '/js/bootstrap.min.js');
$asset->addJs(SITE_TEMPLATE_PATH . '/js/fn.js');
//Тут выводим скрипты
$APPLICATION->ShowHeadStrings();
$APPLICATION->ShowHeadScripts();
?>
</head>
<body>
<?$APPLICATION->ShowPanel() ?>
<!--HTML CONTENT-->
</body>
</html>
Но в Битриксе это будет правильно работать до первого установленного модуля из Маркетплейс, в которых используются другие устаревшие методы подключения jQuery и скриптов.
CJSCore::Init(array('jquery'));
CJSCore::Init(array('jquery2'));
$APPLICATION->AddHeadScript("/bitrix/js/api.core/jquery/jquery-1.12.4_min.js");
$APPLICATION->AddHeadScript("/bitrix/js/api.core/modal.js");
$asset->addJs("/bitrix/js/api.core/modal.js");
Проблема именно в этих методах, как бы вы не подключали свои скрипты в шаблоне, метод CJSCore::Init() все будет выводить выше хедера и ломать работу скриптов, а также подключать сторонние и две своих встроенные библиотеки jQuery столько раз, сколько встретит на странице, т.е. хоть сколько, хоть тысячу раз.
Подключаем jQuery правильно!
Решить проблему вывода сторонних плагинов выше jQuery из хедера можно двумя способами, замените вот эту строчку в хедере или закомментируйте
//Тут скрипты //$asset->addJs(SITE_TEMPLATE_PATH . '/js/jquery-3.2.1_min.js');
1) Либо вот на эту, также как в старой статье я делал, тоже рабочий вариант с кэшированием
?><script type="text/javascript" src="<?=CUtil::GetAdditionalFileURL(SITE_TEMPLATE_PATH.'/js/jquery-3.2.1_min.js');?>"></script><?
2) Либо вот на эту, это из ядра Битрикса подключит jQuery
CJSCore::Init(array('jquery2'));
jquery - подключит jQuery 1.8.3 jquery2 - подключит jQuery 2.1.3
Только при таком способе вы избавитесь от проблем с подключением скриптов и плагинов из сторонних модулей, подключенная в вашем шаблоне сайта jQuery всегда будет выводиться первой перед остальными плагинами, но проблема с подключением jQuery также останется, за этим нужно постоянно следить и отключать все лишние jQuery.
Помните, только одна jQuery должна подключаться, либо ваша в шаблоне (вариант 1), либо из ядра Битрикса (вариант 2), все jQuery из сторонних модулей нужно отключать, т.к. они могут вызываться только на одной странице.
Частые проблемы с jQuery на сайтах
1) jQuery не подключена вообще; 2) jQuery подключена раз 5-10, а должна быть подключена только 1 раз; 3) jQuery подключена после вызова jQuery-плагинов, а должна подключаться самой первой; 4) JS-ошибки на странице, после которых весь остальной JS-код и плагины не работают; 5) Версия jQuery не соответствует минимальной по требованию; 6) Подключена переписанная разработчиком jQuery, которая ведет себя не предсказуемо; 7) Подключена кастомная сборка jQuery, часть функций вырезано;
