Как подключить jquery битрикс
Перейти к содержимому

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

  • автор:

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

Если компоненту или модулю нужна библиотека jQuery, то подключить его можно следующим образом.

Идете в редактирование текущего шаблона сайта и прежде всего смотрите, не подключена ли уже библиотека (например, разработчиком). Сделать можно путем поиска в браузере (Ctrl+F) по подстроке jquery. Если не подключено, то скачиваете последнюю версию библиотеки на оф.сайте (Download), сохраняете где-то у себя на сервере (я обычно храню в /bitrix/templates/.default/js/) и в секцию head вашего шаблона размещаете путь до библиотеки путем вставки такой строчки:

Если вы не специалист, то данную строчку лучше разместить сразу после строчки . Специалисты на свое усмотрение. Вместо звездочки вставьте имя текущей скачанной вами библиотеки. Все.

Правильное добавление плагинов jquery в шаблоны компонентов Битрикс

Битрикс 24 Попробовать

Часто возникает примерно следующая задача — нужно взять компонент, например bitrix:news.list, и сделать такой шаблон, который показывает новости не традиционным списком новостей, а, к примеру, последовательностью сменяющихся кадров (слайдов) или какой-нибудь каруселью. Обычно в таких случаях в последнее время используют библиотеку jquery и подыскивают соответствующий плагин, который может обеспечить требуемую функциональность. В этой статье я опишу как именно подключать в шаблоне компонента, требуемые файлы, чтобы плагин работал. Предположим, нам требуется подключить nivoslider, для того, чтобы создать красивый слайдер новостей, вместо унылого списка. Для этого:

1. Зайдем на сайт nivoslider — http://nivo.dev7studios.com/ и посмотрим какие файлы нужно подключить, чтобы его можно было включить.

Оказалось, что по-минимуму это файлы: jquery.nivo.slider.pack.js , nivo-slider.css и папка themes/default.

2. Создаем шаблон компонента и кидаем туда эти файлы. Я предпочитаю как-то распределять их по папкам: например, картинки — в папку images, скрипты — в папку js, файлы стилей — в папку css. Можно еще раскидывать по плагинам, вполне вероятно, что в некоторых случаях это будет даже удобнее.

3. Подключаем jquery. Но тут есть варианты: 1 — если у вас jquery используется еще в каких-то компонентах, то вероятно проще всего его включить в шаблоне сайта для всех сразу, 2 — если использование jquery планируется только в этом шаблоне или в этом и еще в одном или двух, то вероятно лучше не подключать его для всего сайта, а включить непосредственно в данных шаблонах компонентов.

Подключить jquery можно по разному: 1 — можно включить инструкцией CJSCore::Init(array(«jquery»)); . Так можно включить jquery, который идет в поставке битрикс. 2 — Можно включить jquery из репозитария google — вероятно так библиотека будет быстрее подключаться к сайту — код такой $APPLICATION->AddHeadScript(«http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js»);

Теперь в зависимости от того, нужно ли нам jquery подключить для всего сайта или только для данного шаблона — есть варианты:

— для всего сайта — пишем эти строки в файле header.php, используемого шаблона сайта.

— для конкретного шаблона компонента — пишем эти строки в component_epilog.php шаблона компонента.

4. Подключаем файлы плагина. Тут вариант один — мы должны подключить их в шаблоне компонента. Подключать нужно js и css.

Пишем в component_epilog.php для js:

для css:
$APPLICATION->SetAdditionalCSS($templateFolder.»/css/nivo-slider.css);

По аналогии нужно подключить и файлы из папки themes/default.

5. Подготавливаем нужным образом файл template.php шаблона компонента. Как нужно подготовить верстку — можно узнать из README плагина.

6. Создаем файл script.js для запуска плагина в папке шаблона компонента. Этот файл, если он существует в папке шаблона, подключается автоматически.

Примечание: для работы API $APPLICATION->AddHeadScript и $APPLICATION->SetAdditionalCSS требуется наличие в header.php в блоке операции $APPLICATION->ShowHead();

Подключение jQuery из ядра битрикса

1С-Битрикс http://www.1c-bitrix.ru Общие вопросы info@1c-bitrix.ru Приобретение и лицензирование продуктов : sales@1c-bitrix.ru Маркетинг/мероприятия/PR marketing@1c-bitrix.ru Партнерская программа partners@1c-bitrix.ru Мы работаем с 10:00 до 19:00 по московскому времени. Офис в Москве 127287 Россия Московская область Москва 2-я Хуторская улица дом 38А строение 9 Офис в Калининграде +7 (4012) 51-05-64 Офис в Калининграде 236001 Россия Калининградская область Калининград Московский проспект 261 Офис в Киеве ukraine@1c-bitrix.ru Телефон в Киеве +3 (8044)221-55-33 Офис в Киеве 01033 Украина Калининградская область Киев улица Шота Руставели 39/41 офис 1507

Контент для лиц от 16 лет и старше

© 2001-2023 «Битрикс», «1С-Битрикс». Работает на 1С-Битрикс: Управление сайтом. Политика конфиденциальности

Как подключить JS в Bitrix

Антон Чуркин

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

Как подключить свой JS файл в Битриксе

Первый способ – прописать в коде.

Такие скрипты не кешируются и не минифицируются битриксом. С другой стороны, к ним можно добавить свойства defer, async или свойство data-skip-moving=»true», про которое будет сказано ниже.

Второй способ

Если код относится к шаблону конкретного компонента, можно в папке шаблона создать файл script.js. Такой файл будет подключен автоматически, вместе с компонентом.

Третий способ

Если вам не достаточно одного script.js, можно добавить дополнительные файлы скриптов с помощью
$this→addExternalJs(SITE_TEMPLATE_PATH . «/newscript.js») в template.php

Четвёртый способ

Если скрипт нужно добавить вне шаблона, или один и тот-же скрипт используется в разных шаблонах, можно использовать функцию Asset::getInstance()→addJs(путь к файлу);, которая добавляет соответствующий файл в секцию head документа. Метод этот является заменой методу $APPLICATION→AddHeadScript(‘scr’);

используется следующим образом

use Bitrix\Main\Page\Asset;

Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . «/fix.js»);

Библиотеку jquery можно подключить с помощью функции CUtil::InitJSCore(array(‘jquery’)). С её помощью можно добавляются различные библиотеки Битрикса, например — медиаплеер.

С помощью этой функции вы можете подключать и свои собственные библиотеки. Для этого вам нужно зарегистрировать её, разместив в init.php такую конструкцию

$arJsConfig = array(

‘Название_библиотеки’ => array(

‘js’ => ‘Путь к файлу js’, // ‘/bitrix/js/custom/main.js’

‘css’ => ‘Путь к файлу css’, // ‘/bitrix/js/custom/main.css’

‘rel’ => array(),

)

);

foreach ($arJsConfig as $ext => $arExt)

\CJSCore::RegisterExt($ext, $arExt);

>

Это полезно, если скрипт нужен в нескольких шаблонах сайта

Использование defer

Чтобы переместить файлы javscript в конец сайта нужно включить опцию Переместить весь Javascript в конец страницы в разделе Настройки>Настройки продукта>Настройки модулей>Главный модуль. Скриптам, которые должны остаться на месте, нужно прописать data-skip-moving=»true».

Подключение дополнительных скриптов позволит вам оптимизировать сайт. Не исключайте такую возможность — она не требует больших трудов и по итогу вы получаете быстрый сайт.

Также советуем вам просмотреть интересный кейс по созданию интернет магазина на Битрикс.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *