Для оформления и реализации front-end логики компонента, в его шаблоне доступны не обязательные файлы
- style.css, который определяет стили, необходимые данному шаблону
- script.js, который определяет и подключает яваскрипты, необходимые данному шаблону.
Не всегда их хватает. Для подключения внешних css/js можно было пойти разными путями
- В шаблоне "подключить жестко" инлайном, что совсем не спортивно
<li nk href="/local/styles.css" type="text/css" rel="stylesheet" /> |
$APPLICATION->SetAdditionalCss("/local/styles.css"); |
создать component_epilog.php:
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
global $APPLICATION;
$APPLICATION->SetAdditionalCss("/local/styles.css");
|
- И теперь простой и самый правильный способ
в template.php:
$this->addExternalCss("/local/styles.css");
$this->addExternalJS("/local/liba.js"); |
Не зависимо от кеша, файлы всегда будут с шаблоном! Ура!
Новая в курсе разработчика. Поделитесь с коллегами
$this->addExternalCss("/local/styles.css"); $this->addExternalJS("/local/liba.js");Да и зачем?
Это же не аналог метода.
Тут главная фича в том, что можно вызывать в кешируемой области.
Нужно использовать не
$this->addExternalCss("/local/addcss.css");$this->__template->addExternalCss("/local/addcss.css");Но не уверен что это правильный подход, методы же для шаблона разработаны
$this->getTemplate()->addExternalCss("/local/addcss.css");за эти функцию спасибо
очень полезны
и более того, эти функции уже активно используются в составе ядра bxready (мы еще напишем про этот продукт, сейчас активно работаем над ним, веб-мастерам рекомендую следить за нами
Но когда только мы эти функции встретили,
из ядра нашего продукта мы выбросили целый вагон кода. В общем, эти функции для нас оказались настоящей находкой
за последние несколько лет, это был действительно подарок от Битрикс
Как сделать так, чтобы, например, при ajax-запросе компонента штатные style.css и script.js подключились тут же инлайново?
P.S. Создание отдельного шаблона сайта для ajax запросов компонентов - не наш метод
спасибо большое...
Потому, что там могут лежать файлы, которые не нужно подключать сразу.
Потому, что там могут лежать подпапки и как определить что нужно брать из подпапок?
Но если у вас есть слайдер, для которого используется и только для него определенный js, то логичке положить все это вместе с компонентом.
Плохо на всех страницах сайта подключать все, что может понадобиться, а использоваться половина кода может только на одной определенной странице...
Ну и плюс, если через маркетплейс реализуете некоторые компоненты, то у вас внутри этих компонентов должен быть законченный функционал.
Это возможность, а уже разработчик или кто-то из команды разработчиков принимает решение о целесообразности. 90% сайтов делаемых на заказ на битриксе используют общие стили и скрипты, а не разнесенные по компонентам.
В продукте есть готовая функция по объединению сжатию css и js
Если работают несколько разработчиков, то могут вообще подключить одинаковые файлы одни и тех же плагинов из разных шаблонов, что может вызвать непредвиденное поведение.
Если необходимо обновить плагин, то потенциально придется лезть во все шаблоны, где используется плагин и менять пути вызова ресурсов.
Лаконичнее по-моему выносить вызов ресурсов плагина в CJSCore::RegisterExt, а затем в component_epilog.php одной функцией вызвать все необходимые плагины CJSCore::Init.
async="async"
defer="defer"
Всегда нужна возможность для CSS и JS скриптов передавать массив доп.атрибутов, как перечисленных выше, так и своих.
Некоторые делают так:
Я и раньше константы с осторожностью использовал, всегда делал так:
$APPLICATION->AddHeadScript($APPLICATION->GetTemplatePath("js/script.js"));я использую константы в данном случае. значение просчитано заранее. а в случае с
$APPLICATION->GetTemplatePath("js/script.js
вычисляется какждый раз + вызов метода объекта
бывают случаи есть main.css и есть product-list.css получаеться так что main.css подключаеться в хедере а product-list.css в шаблоне компонента, в итоге main.css подключаеться после product-list.css и перекрывает все стили а нужно чтоб сначала шел main.css а потом product-list.css
из за этого приходиться подключать инлайном стили шаблона а остальное подключать динамически
Мне например нужно подгружать стили страницы/компонента между header.css и footer.css , и чтобы media.css ВСЕГДА был в конце, приходится выдумывать костыли, а иногда обходиться без битриксных методов подключения, что совсем расстраивает
ошибка выделена красным
у самого был затык с этим...
$APPLICATION->ShowAjaxHead();
вставить после пролога перед компонентом...
$APPLICATION->SetAdditionalCSS($templateFolder . '/styles.css');
То есть если я подключаю библиотеку в $this->addExternalJS(), то в script.js я не могу использовать ее. Как быть?