Телеграм: @camouf_ru Почта: mihail@bazarow.ru

Подключение jquery из ядра битрикс и объединение своих скриптов в один файл

Просмотров: 19090

Если используете большое количество js скриптов на сайте. Например: фансибокс, всяческие галереи и прочее- то таких внешних скриптов может набежать по 10/20 на сайт. Имеет смысл объеденить их в один, для большей скорости загрузки сайта и в принципе для оптимизации. Это, конечно, можно проделать вручную но можно воспользоваться функционалом битрикс.

Данная возможность позволяет автоматически, без заморочек объеденить весь javascript в один файл

Пример на моем сайте

При верстке своего сайта я использовал 5 javascript файлов: фансибокс, табы, карусель контента. В исходной html верстке это выглядело так

<script type="text/javascript" language="javascript" src="<?=SITE_TEMPLATE_PATH?>/js/jTabs.js"></script> 
 <script type="text/javascript" language="javascript" src="<?=SITE_TEMPLATE_PATH?>/js/jquery.flexisel.js"></script> 
 <script type="text/javascript" language="javascript" src="<?=SITE_TEMPLATE_PATH?>/js/jquery.mousewheel-3.0.4.pack.js"></script> 
 <script type="text/javascript" language="javascript" src="<?=SITE_TEMPLATE_PATH?>/js/jquery.fancybox-1.3.4.pack.js"></script> 
 <script type="text/javascript" language="javascript" src="<?=SITE_TEMPLATE_PATH?>/js/sokr.js"></script> 

Для того, что бы при интеграции с битрикс, автоматически, все эти файлы объеденились в один, сжались и вывелись в head шаблона достаточно подключить их вот так

<?
CJSCore::Init(array("jquery")); //подключаем jquery из ядра битрикс $APPLICATION->ShowHeadStrings() ; $APPLICATION->ShowHeadScripts() ; //ПОДКЛЮЧАЕМ ВСЕ НАШИ ФАЙЛЫ поочереди $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH."/js/jTabs.js" ); $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH."/js/jquery.flexisel.js" ); $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH."/js/jquery.mousewheel-3.0.4.pack.js" ); $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH."/js/jquery.fancybox-1.3.4.pack.js" ); $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH."/js/sokr.js"); ?>

Далее в настройках Битрикс: Настройки- Настройки Модулей -Главный модуль : включаем объединение и сжатие JS файлов.

После этого все ваши js файлы объединяться и сожмутся, что значительно ускорит работу сайта, подгрузку js да и поисковые системы будут рады.

PS: Точно так же, можно объединять подключаемые файлы стилей


  <?
  $APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH."/colors.css");
  $APPLICATION->SetAdditionalCSS("/bitrix/css/main/bootstrap.css");
  $APPLICATION->SetAdditionalCSS("/bitrix/css/main/font-awesome.css");
  ?> 
A A 18.01.2017
Пробный вопрос про fancybox
Александр Николаев 30.05.2016
Михаил, вообщем я нашёл для себя единственное и по моему правильное решение  это подключать эти шрифты отдельным файлом и объединить в один  через SetAdditionalCSS это так работает и думаю что правильно но почему не работает  когда эти шрифты находятся в template_styles.css непонятно причем я заметил если перед первым шрифтом поставить какой нибудь класс то тоже работает но подумал что это будет не правильно.

Всё большое спасибо ещё раз и жду ваших комментариев.
Александр Николаев 30.05.2016
Здравствуйте, Михаил!
У меня вопрос ни могу понять в чем дело, но битрикс не хочет подключать первый подключенный не стандартный шрифт у меня их 6 и причём если меняю местами первый на второй, а второй на первый происходит тоже самое тот что был вторым и стал первым перестаёт работать я уже голову сломал не могу понять.

Css  файлы объединил в один  через
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH."/css/bootstrap.css"  ;)  ;

JS файлы так же $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH."/js/bootstrap.min.js"  ;)  ;

На сайте также используются и и коночные шрифты font-awesome.css они работаю нормально всё остальные также работают но только если не первыми в очереди.

Не знаю уже что и думать может есть какое то ограничение на количество шрифтов.
Да и ещё пробовал и подключать обычным способом <?=SITE_TEMPLATE_PATH?>/ не помогло тоже кешь сбрасывал и отключал ничего не помогает.

Надеюсь на вашу помощь и хочу сразу сказать если даже не сможете помочь всё равно спасибо за все ваши труды и информацию что вы предоставляете.

Скриншоты к описанию.
http://prntscr.com/bae501
http://prntscr.com/bae5oe  Должен быть таким
http://prntscr.com/bae6cb  А получается таким
Михаил Базаров 11.12.2015
Цитата
Михаил Базаров пишет:
Цитата
Oleg пишет:
Добрый день,Михаил
Нужна Ваша помощь по Битриксу.
Попросили на сайте mediasmart.pro подправить боковое меню наподобие розетки. Дали доступ на тестовый сайт electrolopata.ru. Вчера утром поставил в шаблон файлы от Font-Awesome, сделал как положено - шрифты загрузил в fonts и в css закинул файл font-awesome.css с подключением этих шрифтов. Подключил файл font-awesome.css в хедере стандартным подключением
<? $APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH . "/css/font-awesome.css" ; ?>
и тут началось. Слетели все стили сайта. Поотключал в главном модуле объединение стилей и js, отключил кеширование и все равно не могу использовать стилевой файл main.css в шаблоне. Все мои изменения битрикс не видит. Не могу понять. Такое ощущение, что битрикс main.css где-то закешированный лежит...
Не пойму, где его перезаписать.... Если я включаю снова в главном модуле объединение файлов, то сайт не видит стили вообще.
Буду очень признателен, если подскажете, куда глянуть или какой документ почитать.
А если отключаете свой
Код
 <? $APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH . "/css/font-awesome.css" ; ?>
  
Что происходит? Ну и кеш по мимо отключения еще скиньте полностью
Не сразу заметил, у вас там ";" лишняя вроде бы, если смайлик не врет ;)
Михаил Базаров 11.12.2015
Цитата
Oleg пишет:
Добрый день,Михаил
Нужна Ваша помощь по Битриксу.
Попросили на сайте mediasmart.pro подправить боковое меню наподобие розетки. Дали доступ на тестовый сайт electrolopata.ru. Вчера утром поставил в шаблон файлы от Font-Awesome, сделал как положено - шрифты загрузил в fonts и в css закинул файл font-awesome.css с подключением этих шрифтов. Подключил файл font-awesome.css в хедере стандартным подключением
<? $APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH . "/css/font-awesome.css" ; ?>
и тут началось. Слетели все стили сайта. Поотключал в главном модуле объединение стилей и js, отключил кеширование и все равно не могу использовать стилевой файл main.css в шаблоне. Все мои изменения битрикс не видит. Не могу понять. Такое ощущение, что битрикс main.css где-то закешированный лежит...
Не пойму, где его перезаписать.... Если я включаю снова в главном модуле объединение файлов, то сайт не видит стили вообще.
Буду очень признателен, если подскажете, куда глянуть или какой документ почитать.
А если отключаете свой

Код
<? $APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH . "/css/font-awesome.css" ; ?>
 
Что происходит? Ну и кеш по мимо отключения еще скиньте полностью
Oleg 11.12.2015
Добрый день,Михаил
Нужна Ваша помощь по Битриксу.
Попросили на сайте mediasmart.pro подправить боковое меню наподобие розетки. Дали доступ на тестовый сайт electrolopata.ru. Вчера утром поставил в шаблон файлы от Font-Awesome, сделал как положено - шрифты загрузил в fonts и в css закинул файл font-awesome.css с подключением этих шрифтов. Подключил файл font-awesome.css в хедере стандартным подключением
<? $APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH . "/css/font-awesome.css" ;) ; ?>
и тут началось. Слетели все стили сайта. Поотключал в главном модуле объединение стилей и js, отключил кеширование и все равно не могу использовать стилевой файл main.css в шаблоне. Все мои изменения битрикс не видит. Не могу понять. Такое ощущение, что битрикс main.css где-то закешированный лежит...
Не пойму, где его перезаписать.... Если я включаю снова в главном модуле объединение файлов, то сайт не видит стили вообще.
Буду очень признателен, если подскажете, куда глянуть или какой документ почитать.
Guest 26.07.2015
Цитата
Fred пишет:
Почему то все скрипты начинают срабатывать дважды
Код
  <?
 CJSCore::Init(array("jquery" ;) );
 $APPLICATION->ShowHeadStrings();
 $APPLICATION->ShowHeadScripts();
 $APPLICATION->AddHeadScript("/bitrix/templates/.default/js/jquery.maskedinput.min.js" ;) ;
 $APPLICATION->AddHeadScript("/bitrix/templates/.default/js/mobile.js" ;) ;
 $APPLICATION->AddHeadScript("/bitrix/templates/.default/js/jquery.nicescroll.min.js" ;) ;
 ?> 
Кажись разобрался) Если в хэдере уже прописано
Код
<? $APPLICATION->ShowHead(); ?>
то писать
Код
 $APPLICATION->ShowHeadStrings();
 $APPLICATION->ShowHeadScripts();

не надо.
Fred 26.07.2015
Почему то все скрипты начинают срабатывать дважды

Код
 <?
 CJSCore::Init(array("jquery" ;) );
 $APPLICATION->ShowHeadStrings();
 $APPLICATION->ShowHeadScripts();
 $APPLICATION->AddHeadScript("/bitrix/templates/.default/js/jquery.maskedinput.min.js" ;) ;
 $APPLICATION->AddHeadScript("/bitrix/templates/.default/js/mobile.js" ;) ;
 $APPLICATION->AddHeadScript("/bitrix/templates/.default/js/jquery.nicescroll.min.js" ;) ;
 ?>

Работы из портфолио

В портфолио не публикуются работы, доля моего участия в которых менее 80%.
Часто обращаются за доработками уже существующих проектов или реализацией не стандратного функционала на готовых сайтах.