1С-Битрикс: правильно подключаем файлы CSS и JS


09.12.2019

Профессиональный и серьезный сайт всегда требует профессионального и серьезного подхода к его разработке. Разделы и страницы могут существенно отличаться друг от друга как по внешнему виду, так и по функционалу. Эта, казалось бы, очевидная истина требует не всегда очевидного подхода. Попробуем разобраться, какие механизмы предлагает CMS «1С-Битрикс: управление сайтом».

1С-Битрикс: правильно подключаем файлы CSS и JS

При разработке сайта мы часто используем альтернативные механизмы представления контента. Это могут быть, например, слайдеры изображений, фотогалереи и многое другое. Подобные решения существуют в готовом виде. Мы, например, любим пользоваться jQuery-плагином Owl Carousel для создания слайдеров и каруселей. В комплекте этого бесплатного плагина идут файлы CSS и JS, которые необходимо подключать дополнительно, чтобы все работало должным образом. Более того, помимо комплектных файлов Owl Carousel требует инициализации, она указывает, какие элементы страницы должны отображаться как слайдер или карусель.

Очевидным решением было бы подключить все необходимые файлы в шаблоне сайта, чтобы они были доступны на любой странице проекта. Это нехорошо и неправильно. Ведь если какая-то из страниц не предполагает наличия слайдера или карусели, то и подключать их на этой странице совершенно незачем. Для таких случаев CMS «1С-Битрикс: управление сайтом» предлагает механизмы их подключения либо на отдельных страницах, либо даже в коде компонентов.

Это, на наш взгляд, правильный подход. К примеру, если в какой-то момент нужда в одном из компонентов на странице отпадает, мы удаляем данный компонент со страницы, и он «забирает» с собой все свои файлы CSS и JS, облегчая таким образом страницу, на которой он «жил». И наоборот, если на какой-либо странице такой компонент становится надобен, мы размещаем этот компонент в коде данной страницы, и он автоматически «подтягивает» все, что ему необходимо для работы.

Вы будете смеяться, но после такого долгого предисловия решение выглядит предельно просто.

Итак, первым делом размещаем в папке с шаблоном вашего сайта все необходимые файлы CSS и JS. Условно назовем их style.css и script.js. Чтобы не превращать папку в хаотичную свалку файлов, разместим эти файлы в подкаталогах соответственно /css/ и /js/. В нужном месте подключим их.

Если вам необходимо подключить их на физической странице сайта, то вносить изменения будем в «шапке» этой страницы. Через административную панель откроем данную страницу и будем редактировать ее как PHP-код. Для примера используем классический дефолтный шаблон «Битрикса» — «Мебельную компанию». И разместим на главной странице данного решения нужный нам код.

Найдем файл index.php в корне сайта, кликнем по «гамбургеру» слева от нее и в выпадающем меню выберем пункт «Редактировать как PHP».

В «шапке» на странице подключим эти файлы, указав их местоположение. До нашего вмешательства нужный нам участок кода выглядел так:

<?
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
$APPLICATION->SetTitle("Мебельная компания");
?>

После нашего вмешательства получаем вот такую конструкцию:

<?
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
$APPLICATION->SetTitle("Мебельная компания");
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH."/css/style.css");
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH."/js/script.js");
?>

Собственно говоря, на этом наша миссия завершена. Теперь на данной странице доступны необходимые нам скрипты и стили.

Теперь рассмотрим вариант, когда нам нужно подключить стили и скрипты в компоненте. За образец возьмем шаблон комплексного компонента «Новости». Подключим наши скрипты и стили тоже в самом верху. Вот что было до:

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
/** @var array $arParams */
/** @var array $arResult */
/** @global CMain $APPLICATION */
/** @global CUser $USER */
/** @global CDatabase $DB */
/** @var CBitrixComponentTemplate $this */
/** @var string $templateName */
/** @var string $templateFile */
/** @var string $templateFolder */
/** @var string $componentPath */
/** @var CBitrixComponent $component */
$this->setFrameMode(true);
?>

Вот что стало после:

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
/** @var array $arParams */
/** @var array $arResult */
/** @global CMain $APPLICATION */
/** @global CUser $USER */
/** @global CDatabase $DB */
/** @var CBitrixComponentTemplate $this */
/** @var string $templateName */
/** @var string $templateFile */
/** @var string $templateFolder */
/** @var string $componentPath */
/** @var CBitrixComponent $component */
$this->setFrameMode(true);
$this->addExternalCss(SITE_TEMPLATE_PATH."/css/style.css");
$this->addExternalJS(SITE_TEMPLATE_PATH."/js/script.js");
?>

Подытожим. Для подключения файлов CSS и JS на физической странице используется следующая конструкция:

<?$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH."/css/style.css");?>
<?$APPLICATION→AddHeadScript(SITE_TEMPLATE_PATH."/js/script.js");?>

Если же подключение производится в коде компонента, то делаем это следующим образом:

<?$this->addExternalCss(SITE_TEMPLATE_PATH."/css/style.css");?>
<?$this->addExternalJS(SITE_TEMPLATE_PATH."/js/script.js");?>

Возврат к списку