1с битрикс подключение jquery

Обновлено: 04.07.2024

Наш модуль после установки добавляет на страницы сайта кнопку плавной прокрутки страницы вверх. Какие файлы и папки могут и должны быть, можно изучить в соответствующем разделе документации Битрикс. Модуль разместим в директории local/modules и создадим такую файловую структуру:

Как видите, внутри local/modules/scrollup у нас:

install — набор скриптов для установки и удаления модуля;
lang — набор языковых файлов модуля;
lib — набор файлов, в которых реализуется логика решения;
include.php — файл, подключаемый при вызове модуля в коде;
options.php — страница настроек, подключаемая в административной части.

Рассмотрим подробнее папку install :

assets — содержит JavaScript и CSS кнопки, которые будут подключаться в пользовательской части;
index.php — файл, в котором содержится описание модуля и реализуется его установка и удаление;
step.php и unstep.php — соответственно шаги установки и удаления, их может быть несколько;
version.php — файл содержит версию и время обновления нашего модуля.

Теперь нам нужно написать класс, в котором будет реализована установка и удаление модуля. Имя класса должно совпадать с директорией модуля и являться наследником от CModule . Метод doInstall() вызывается при установке модуля из панели управления, метод doUninstall() — при деинсталляции модуля. Метод doInstall() подключает файл step.php , а метод doUninstall() — файл unstep.php

Теперь в панели управления на странице «Настройки • Настройки продукта • Модули» мы видим наш модуль:

И можем установить его:

Создадим страницу настроек для модуля. Через панель управления контент менеджер сможет:

Включать/выключать модуль;
Подключать библиотеку jQuery, если она еще не подключена;
Изменять ширину/высоту/радиус и цвет кнопки;
Менять положение кнопки и скорость анимации.

Когда мы описывали код установки модуля, то привязались к событию OnBeforeEndBufferContent и указали метод appendJavaScriptAndCSS() класса Main как обработчик. Теперь настало время его написать:

Осталось только написать js-код для прокрутки страницы наверх и задать css-стили для кнопки:

Есть несколько способов подключения файлов стилей и скриптов, при верстке шаблонов в системе управления 1С-Битрикс. Если вы получаете готовую верстку в HTML/CSS, то имеет смысл грамотно подключить файлы стилей, js и мета теги при интеграции шаблона в Битрикс

Для чего подключать скрипты и js через API

Это нужно для правильной оптимизации сайта. CMS Битрикс, умеет самостоятельно объединять и сжимать подключаемые файлы стилей и js файлы. Если вы подключите их по старинке, простыми вставками вида

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

До выхода нового ядра D7

По условиям обратной совместимости, использовать можно оба метода. Лично я предпочитаю подключать по старинке, без использования D7- но оба способа работают правильно и принципиальной разницы не имеют

Подключив внешние файлы правильно, через ядро Битрикс, вы сможете максимально оптимизировать создаваемый сайт. Объединить и сжать css файлы

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

Самое главное, вы сможете подключать необходимые файлы в "объединение" по необходимости, в зависимости от требуемого функционала страницы или компонента. То есть, по факту у вас вегда будет один файл css и один js, но их состав и соотвественно объем, будет разный в зависимости от текущей страницы или раздела сайта

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

Если нужно подключить стили и скрипты, в нутри шаблонов компонентов. Например, вы используете слайдер, на основе списка новостей: у него может быть много js и css и не целесообразно, подключать его кишочки, глобально ко всему сайту. Просто поспользуйтесь такой конструкцией

Оптимизируйте. Ни кто не любит тормозящие сайты, тем более это просто и не требует больших трудо затрат

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

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

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

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

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

Далее в настройках Битрикс: Настройки- Настройки Модулей -Главный модуль : включаем объединение и сжатие 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");
?>

Здравствуйте, Михаил!
У меня вопрос ни могу понять в чем дело, но битрикс не хочет подключать первый подключенный не стандартный шрифт у меня их 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?>/ не помогло тоже кешь сбрасывал и отключал ничего не помогает.

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

01.12

Правильное подключение стилей и скриптов в шаблон1С-Битрикс при разработке сайта

Для чего подключать скрипты и js через API

До выхода нового ядра D7

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

Оптимизируйте. Ни кто не любит тормозящие сайты, тем более это просто и не требует больших трудо затрат

Читайте также:

1с битрикс подключение jquery

Для чего подключать скрипты и js через API

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

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

Комментарии

Для чего подключать скрипты и js через API

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