Битрикс подключить css в шаблоне

Битрикс – Как правильно подключать CSS и JS файлы в шаблон

Разберем все способы подключения и выберем какой же самый лучший.

Как подключить стили в обычном HTML

Для начала давайте вспомним как мы подключаем стили, всего 3 способа
1. Через файлы стилей (рекомендуется):

2. Инлайново (крайне не рекомендуется):

3. через тег style (иногда допустимо, но редко):

Битрикс – Как добавить стили в шаблон?

В битриксе стили подключаются таким способом:

SetAdditionalCSS(SITE_TEMPLATE_PATH."/css/style.min.css")?>

Благодаря $APPLICATION->SetAdditionalCSS, а SITE_TEMPLATE_PATH – указывает на путь к текущему шаблону сайта.
Помимо этого способа существует подключение при помощи класса:

// В начале файла вам нужно будет указать пространство имён use Bitrix\Main\Page\Asset; Asset::getInstance()->addCss('/path/style.css');

Данный метод якобы лучше, но мне привычнее первый :), хотя этот новее и правильнее.
Оба метода имеют неочевидный второй параметр additional – Необязательный. По умолчанию “false”. Добавление файлов стилей или js в конец списка ресурсов шаблона.

То есть, для его использования пишем:

Asset::getInstance()->addCss('/path/style.css', true); // или $APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH."/css/style.min.css", true);

Таким же способом вы можете добавить стили в шаблоны компонентов, речь про template.php.

Битрикс – Как добавить скрипты в шаблон?

Сначала функция на ядре D7:

// В начале файла вам нужно будет указать пространство имён use Bitrix\Main\Page\Asset; Asset::getInstance()->addJs('/path/main.js');

Старая запись выглядит так и использует $APPLICATION->AddHeadScript:

$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH.'/js/main.js'); $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH.'/js/cookie.js'); $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH.'/js/custom.js');

$additional – По умолчанию false, то есть скрипты подключаются после подключения скриптов ядра и шаблона сайта. Если true скрипты, подключаемые данным методом, будут добавляться в конец текущего таргета вывода скриптов. Т.е. если относятся к ядру то после всего ядра, если к шаблону, то после шаблона сайта и смогут на него повлиять.

А зачем вообще подключать таким способом свои скрипты и стили?
Всё просто, в битриксе есть способы оптимизации этих файлов. Заходим в админке в:
Настройки → Настройки продукта → Настройки модулей → Главный модуль
И видим там такую картину

Теперь вы знаете несколько способов подключения своих CSS и JS файлов, знаете про скрытый параметр, а также зачем подключать стили и скрипты именно с использованием API.

Как в битриксе добавить свою строку в head

Очень просто, делается это при помощи:

Источник

Подключение CSS и JS файлов в шаблоне компонента

Очень простое и полезное API есть в продукте, которое достойно отдельного внимания! Наверняка еще не все знают

Для оформления и реализации front-end логики компонента, в его шаблоне доступны не обязательные файлы
— style.css , который определяет стили, необходимые данному шаблону
— script.js , который определяет и подключает яваскрипты, необходимые данному шаблону.

Не всегда их хватает. Для подключения внешних css/js можно было пойти разными путями

— В шаблоне «подключить жестко» инлайном, что совсем не спортивно

$APPLICATION->SetAdditionalCss("/local/styles.css");

— Архитектурно правильный способ (но его уже можно считать устаревшим), для тех кто знаком с устройством компонента,
создать component_epilog.php:

чуть выше ответ.
у самого был затык с этим.
$APPLICATION->ShowAjaxHead();
вставить после пролога перед компонентом.

так думаю работать будет по любому

Это здорово, но файл подключенный с помощью $this->addExternalJS() вызывается после script.js шаблона компонента.
То есть если я подключаю библиотеку в $this->addExternalJS(), то в script.js я не могу использовать ее. Как быть?

Продукты

Управление сайтом

Битрикс24

Интернет-магазин + CRM

Решения

Для интернет-магазинов

Каталог готовых решений

Внедрение

Выбрать партнера

Проверить партнера

Стать партнером

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

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

Источник