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

Сегодня хотим поделиться с вами полезным и очень простым API, которое есть продукте 1С-битрикс и заслуживает отдельного внимания и о котором, наверняка, еще не все знают.

14.png

В шаблоне API доступны не обязательные файлы, для реализации и оформления front-end логики компонента

- style.css, - определяет стили, которые необходимы представленному шаблону
- script.js, который определяет и подключает javascrits, которые необходимы данному шаблону.

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

  • • Инлайновое подключение в шаблоне, что смотрится не совсем профессионально

  • <li nk="" href="/local/styles.css" type="text/css" rel="stylesheet">

  • • Подключить в компоненте (что связано с наличием ловушки кеширования в шаблоне), что выглядит еще более непрофессионально, чем в первом способе

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

  • • Для тех, кто знаком с устройством компонента, можно использовать устаревший способ, что тем не менее является архитектурно правильным

  • Необходимо создать component_epilog.php: global $APPLICATION;
    $APPLICATION->SetAdditionalCss("/local/styles.css");

  • • И на последок простой и самый правильный способ в template.php:

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

Как бонус вы получите не только подключение, но и кеширование текущего, а так же родительского шаблонов. Вне зависимости от кеша файлы всегда будут с шаблоном.