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

Правильное подключение стилей и скриптов в Битрикс

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

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

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

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

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

Для стилей
<link href="/file.css">
Для js файлов
<script src="/file.js">

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

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

// Для подключения скриптов
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH."/js/file.js" );

// Подключение css
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH."/js/file.css", true);

// Подключение мета тегов или сторонних файлов
$APPLICATION->AddHeadString("name='<meta name='yandex-verification' content='62be9ea1' />'");

Подключение стилей и скриптов с D7:

use Bitrix\Main\Page\Asset;

// Для подключения css
Asset::getInstance()->addCss("/bitrix/css/main/bootstrap.min.css");

// Для подключения скриптов
Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . "/js/myscripts.js");

// Подключение мета тегов или сторонних файлов
Asset::getInstance()->addString("<link rel='shortcut icon' href='/local/images/favicon.ico' />");

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

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

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

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

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

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


$this->addExternalCss("/local/styles.css");
$this->addExternalJS("/local/liba.js");

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

Кроме того. Внутри ядра 1С-Битрикс есть вспомогательные скрипты и библиотеки: jQuery, Vue, font-awesome итд. Например, четвертый bootstrap можно подключить так:
\Bitrix\Main\UI\Extension::load("ui.bootstrap4");
Михаил Базаров 14.10.2017
Цитата
Николай Соболев написал:
Цитата
Михаил Базаров  пишет:
Цитата
Николай Соболев написал:
Михаил подскажи пожалуйста нужно ли подключать bootstrap в новых версиях битрикса
Если bootstrap нужен при верстке-то можно. Если не используется-то не надо.
В общем, по желанию
Ну вроде бы как я понимаю он уже подключен и используется в системе в новых версиях или я ошибаюсь?
Нет, его нужно вручную прописывать в head. И в нескольких компонентах прописан (точно в умном фильтре и оформлении заказа), там просто комментируете эти строчки- где то в верху шаблона
Велес 26.11.2017
Цитата
Михаил Базаров пишет:
Если с самого начала сборки сайта, сделать все правильно- проблем быть не должноПожал
Пожалуйста, ссылку дайте, где почитать об этом можно?)
nikolaevevge 25.12.2017
Вы пишите о правильном подключении JS имея ввиду Asset::getInstance()->addJs, но данный метод не всегда подходит. Например сайт работает в кодировке cp1251(она же windows-1251), и необходимо подключить кнопки шары Яндекс в соц-сети, JavaScript которых выложен на яндекс в кодировке UTF-8. Так вот метод addJs не имеет возможности указать кодировку. Решение задачи на форуме битрикса по ссылке(в соответствии с ответом техподдержки битрикс метод является стандартным): https://dev.1c-bitrix.ru/community/forums/forum6/topic104055/
Михаил Базаров 25.12.2017
Цитата
nikolaevevge написал:
Вы пишите о правильном подключении JS имея ввиду Asset::getInstance()->addJs, но данный метод не всегда подходит. Например сайт работает в кодировке cp1251(она же windows-1251), и необходимо подключить кнопки шары Яндекс в соц-сети, JavaScript которых выложен на яндекс в кодировке UTF-8. Так вот метод addJs не имеет возможности указать кодировку. Решение задачи на форуме битрикса по ссылке(в соответствии с ответом техподдержки битрикс метод является стандартным):  https://dev.1c-bitrix.ru/community/forums/forum6/topic104055/
Если это правильное но не обязательное подключение, само собой, если по каким-то причинам не подходит или не совместимо- можно и по старинке отдельные скрипты подключать.

Еще и отключить объединение (например, счетчик Li не адекватно себя ведет) и перенос этих скриптов, можно через
Код
 <script data-skip-moving="true"....../>
Lu Sh 20.03.2018
Добрый день! Подскажите,пожалуйста,можно ли не подключать штатную библиотеку JQuery? Если да,то как? Мне нужно подключить свою, но что бы я не делала,все равно подключается штатная 1.8, и ничего не работает. Как правильно это сделать?
Заранее благодарю!
Mansher 18.07.2018
Добрый день! Скажите, а как вывести на страницу детального просмотра иконки (доставка, гарантия, и т.д) в виде изображения.
Михаил Базаров 18.07.2018
Цитата
Mansher написал:
Добрый день! Скажите, а как вывести на страницу детального просмотра иконки (доставка, гарантия, и т.д) в виде изображения.
Можно создать инфоблок с этими иконками (в картинку анонса их накидать- например)
и вывести в карточке товара через API
Примерно так
https://camouf.ru/blog-note/1487/
Иван Русин 24.09.2018
Приветствую, Михаил.
Рекомендую вам добавить в статью следующую информацию:

1. Сказать людям, что бы проверяли наличие $APPLICATION->ShowHead(); в html секции head шаблона.

2. Не обязательно подключать скрипты и стили отдельно особыми функциями.
Папка шаблона простого компонента может содержать следующие подпапки и файлы:
— файл style.css, который определяет стили, необходимые данному шаблону.
— файл script.js, который определяет и подключает яваскрипты, необходимые данному шаблону. Этот файл может отсутствовать.
https://dev.1c-bitrix.ru/learning/course/index.php?COURSE_ID=43&LESSON_ID=2829&LESSON_PATH=3913.4565.2829
Александр Марчелло 10.07.2020
Добрый день! Спасибо за статью, столкнулся с задачей реализовать страницу в админке и верстку реализовать на бутстрапе, как подключать правильно в админке стили и скрипты так, чтобы они в head попадали?
Guest 17.09.2021
Ошибки в статье исправьте....

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

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

Очистить брошенные корзины с помощью API 1С-Битрикс Просмотров: 367 Задача: в интернет-магазине накапливается большое количество брошенных корзин, нужно их оч... Создание скидки на общую сумму покупки в Битрикс корзине Просмотров: 26960 Функционал интернет-магазина, работающего под управлением 1С Битрикс, позволяет задавать м... Объединить отдельные поля ФИО в одно свойство при оформлении заказа. Просмотров: 877 Пользователь, при оформлении заказа, заполняет три отдельных поля с фамилией, именем и отч... Данные о заказе текущего пользователя Просмотров: 12902 Иногда нужно получить данные о заказе текущего пользователя. Не через компонент, а непосре... Ссылки для добавления и удаления товара из сравнения в Битрикс Просмотров: 8228 Просто оставляю это здесь, вставка ссылок на добавление и удаление товара из сравнения, ес... Информация о заказах и содержимое корзины текущего пользователя. Просмотров: 11776 В процессе разработки сайта могут понадобиться рецепты приведенные ниже. Использовать можн... Подключение jquery из ядра битрикс и объединение своих скриптов в оди... Просмотров: 19743 Если используете большое количество js скриптов на сайте. Например: фансибокс, всяческие г... Дополнительные опции/услуги, добавляемые в корзину, в карточке товаро... Просмотров: 302 Задача: в детальной карточке товара сделать возможность добавления услуги или опции, при д... Вывести имя пользователя добавившего элемент инфоблока в Битрикс Просмотров: 16040 Иногда, необходимо вывести имя пользователя добавившего элемент инфоблока. Например, автор... Отсортировать элементы в Битрикс по свойству привязка к разделам Просмотров: 27917 При создании достаточно сложных интернет-магазинов на Битрикс, иногда встает задача помимо... Сгенерировать скидочные купоны, при заказе и отправить на почту Просмотров: 773 Задача: после того как пользователь сделал заказ, нужно сгенерировать одноразовые купоны д... Вывести свойство отдельно ото всех или исключить из всех Просмотров: 7019 Иногда, на сайте, под управлением 1С-Битрикс, нужно вывести какое-то конкретное свойство о... Настройка прав доступа в 1С-Битрикс Просмотров: 7545 Часто, в интернет-магазине под управлением 1С Битрикс, нужно создать группу пользователей ... Простой WEB сервер на ubuntu, для Битрикс Просмотров: 34478 Расскажу как по быстрому сконфигурировать WEB сервер для работы с Битрикс. Безо всяких ngi... Настройка обмена между 1С:Предприятие и магазином на "1С-Битрикс24: И... Просмотров: 2486 В этой заметке расскажу как настроить синхронизацию между 1С:предприятие и "1С-Битрикс24: ... Вывести общее количество товаров в шаблоне корзины 1С-Битрикс Просмотров: 5720 Задача: вывести общее количество товаров в корзине (именно количество единиц товара, а не ... XML в формате Commerce ML-2, города России и Мира, для выгрузки в инф... Просмотров: 6302 Подвернулась задачка, создать инфоблок для Битрикс, в котором будут просто города России и... Вывести новости из конкретного раздела инфоблока Битрикс Просмотров: 53463 Бывает что требуется вывести конкретные новости или статьи из одного раздела инфоблока в Б... Добавление и удаление из сравнения на AJAX: Битрикс Просмотров: 17698 Рецепт лежал у меня в закромах, почти о нем и забыл, но тут подвернулся под руку- решил оп... Композитный сайт на 1С-Битрикс Просмотров: 3038 Для новых клиентов: Все новые проекты будут включать в себя применение технологии "Компози...