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

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

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

Если используете большое количество 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");
  ?> 
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" ;) ;
 ?>
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();

не надо.
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 где-то закешированный лежит...
Не пойму, где его перезаписать.... Если я включаю снова в главном модуле объединение файлов, то сайт не видит стили вообще.
Буду очень признателен, если подскажете, куда глянуть или какой документ почитать.
Михаил Базаров 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" ; ?>
  
Что происходит? Ну и кеш по мимо отключения еще скиньте полностью
Не сразу заметил, у вас там ";" лишняя вроде бы, если смайлик не врет ;)
Александр Николаев 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  А получается таким
Александр Николаев 30.05.2016
Михаил, вообщем я нашёл для себя единственное и по моему правильное решение  это подключать эти шрифты отдельным файлом и объединить в один  через SetAdditionalCSS это так работает и думаю что правильно но почему не работает  когда эти шрифты находятся в template_styles.css непонятно причем я заметил если перед первым шрифтом поставить какой нибудь класс то тоже работает но подумал что это будет не правильно.

Всё большое спасибо ещё раз и жду ваших комментариев.
A A 18.01.2017
Пробный вопрос про fancybox

Записная книжка разработчика

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

Получить множественное пользовательское поле раздела. Значения множес... Просмотров: 356 Задача: У разделов инфоблока есть множественное поле типа список. Зная ID раздела, нужно п... Мобильные версии страниц и поисковые системы Просмотров: 5848 Согласно требования поисковых систем: Яндекс и Google, в случае если у вашего сайта имеетс... Скопировать номер телефона из поля пользователя в телефон для регистр... Просмотров: 1629 Задача, на конкретном сайте: раньше все пользователи регистрировались по стандартному режи... Создание скидки на общую сумму покупки в Битрикс корзине Просмотров: 26959 Функционал интернет-магазина, работающего под управлением 1С Битрикс, позволяет задавать м... Отфильтровать новости в Битрикс за заданный период Просмотров: 15590 Иногда, нужно отфильтровать элементы (новости например) по дате в Битрикс, с помощью компо... Вывести компонент новостей на страницу в Битрикс Просмотров: 63592 Посмотрел Яндекс метрику на свой сайт, и решил что буду частенько писать сюда именно то, ч... Заполнить поля пользователя из свойства заказа, на примере ФИО Просмотров: 1199 При создании заказа покупатель заполняет поле "ФИО". Необходимо скопировать эти данные в п... Заполнение габаритов товара, после обмена с 1С, из свойств элемента и... Просмотров: 10422 Если Ваш интернет-магазин интегрирован с 1С, скорее всего столкнулись с такой проблемой: 1... Отфильтровать товары бренда и вывести по разделам каталога Просмотров: 651 Задача: на странице бренда, который выводится компонентом новостей, нужно показать все тов... Дополнительные параметры в меню Битрикс Просмотров: 19336 Иногда нужно присвоить какой-то функционал к конкретному пункту меню в битрикс. Например о... Фиксированная корзина с обновлением, без перезагрузки страницы. Просмотров: 17499 Иногда нужно сделать так, чтобы корзина в интернет магазине, созданном на Битрикс, была по... Заполнить картинки разделов каталога из картинок товаров Просмотров: 337 Задача: в каталоге, разделы и подразделы выводятся в виде плитки над товарами, с картинкам... Время на БД и веб сервере отличается на 3600 секунд, тест Битрикс Просмотров: 15306 Достаточно часто, при проверке параметров системы, в Битрикс, можно увидеть одну из ошибок... Вывести производителей на сайте с отбором его товаров из каталога Просмотров: 18242 Достаточно частая задачка для каталога или интернет-магазина: вывести список производителе... Установить цену товара из свойства инфоблока Просмотров: 8713 На одном из проектов, нужно было единоразово заполнить цены товаров из свойства инфоблока... Пошагово получить информацию о заказах и сохранить как Excel (xls) Просмотров: 533 Задача: Нужно получить информацию о заказах с возможностью указания даты создания "от"" и ... Вывести разделы инфоблока в которых находится элемент Битрикс Просмотров: 16018 Если нужно в карточке товара или новости, вывести структуру разделов в котором находится э... Цвета торговых предложений из Highload инфоблоков в списке товаров Просмотров: 14086 Подвернулся на доработку очень старый сайт, работал еще на 11-ой версии Битрикс. Выполнили... Вывести множественное свойство типа файл с названием и весом файла в ... Просмотров: 20203 В этой заметке расскажу как красиво вывести множественное свойство типа файл в инфоблоке 1... Малая корзина Битрикс, упрощенный шаблон Просмотров: 12543 Шаблон малой корзины битрикс, который можно вывести в боковом разделе шаблона или в шапке ...