Загрузка страницы..
Битрикс. Подключение CSS и JS файлов в шаблоне компонента
Если в 1С Битрикс встаёт необходимость использовать для шаблона компонента какие-то внешние файлы css, то реализовать это можно следующими способами.
2016-02-12T10:02 12 февр. 2016 10:02
Просмотров: 6318

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

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

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

  1. В шаблоне "подключить жестко" инлайном, что совсем не спортивно

    <link href="/local/styles.css" type="text/css" rel="stylesheet" />

  2. Захардкодить в компоненте (так как есть ловушка кеширования в шаблоне), что еще менее спортивно

    $APPLICATION->SetAdditionalCss("/local/styles.css");
  3. Архитектурно правильный способ (но его уже можно считать устаревшим), для тех кто знаком с устройством компонента, создать component_epilog.php:

    <?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
    global $APPLICATION;
    $APPLICATION->SetAdditionalCss("/local/styles.css");
  4. И теперь простой и самый правильный способ.
    С версии, 1С-Битрикс, 15.5.1 появилась штатная поддержка вызова стороннего файла css. Под сторонним файлом понимается как локальный файл вне компонента так и файл на внешнем домене.
    Для подключения такого файла в template.php необходимо прописать:

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

В комплекте идёт поддержка кеширования не только текущего шаблона, но и родительского. Не зависимо от кеша, файлы всегда будут с шаблоном! Ура!

Официальная документация



Комментарии: 1

комментарий Бывалый
Бывалый
2016-02-12T10:2612 февр. 2016 10:26
Данный метод уже присутствует в штантых шаблонах. Например был замечен в шаблоне компонента catalog.smart.filter.
...
$this->addExternalCss("/bitrix/css/main/bootstrap.css");
$this->addExternalCss("/bitrix/css/main/font-awesome.css");

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

Яндекс.Метрика Яндекс.Метрик