1с битрикс как добавить компонент на страницу

Обновлено: 07.07.2024

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

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

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

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

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

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

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

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

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

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

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

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

Комплексный компонент осуществляет вывод списка элементов указанного инфоблока, добавление/редактирование элементов и их удаление в зависимости от прав пользователя. Компонент стандартный и входит в дистрибутив модуля.

В визуальном редакторе компонент расположен по пути: Контент > Добавление элементов > Добавление элементов инфоблока.

Компонент относится к модулю Информационные блоки.

Параметры

создателю (CREATED_BY) - привязка по создателю: пользователю будут показаны только созданные им элементы.
по свойству инфоблока --> (PROPERTY_ID) - привязка по свойству инфоблока. В этом случае доступен параметр ELEMENT_ASSOC_PROPERTY.

NAME - наименование;
TAGS - теги;
DATE_ACTIVE_FROM - дата начала;
DATE_ACTIVE_TO - дата завершения;
IBLOCK_SECTION - раздел инфоблока;
PREVIEW_TEXT - текст анонса;
PREVIEW_PICTURE - картинка анонса;
DETAIL_TEXT - подробный текст;
DETAIL_PICTURE - подробная картинка.

Пример вызова

Пользовательские комментарии

Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.

Для этого нужно всего лишь авторизоваться на сайте

Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.

Задача: Пользователь задает вопрос, а администратор сайта отвечает и публикует данную (статью\вопрос).

Решение:
Вы можете воспользоваться компонентов "Добавлением элемента в инфобок" (iblock.element.add), чтобы организовать добавление вопросов для обычных пользователей.
А выводить их по средствам компонента (Список Новостей) (news.list)
В итоге картина получится следующая:
1) Пользователь заполняет форму и отправляет ее.
2) Создается новый неактивный элемент инфоблока.
3) Администратор проверяет его и отвечает. Затем публикует его.
4) Опубликованный элемент выводится в списке.

Вы можете создать новую группу пользователей и наделить ее правами доступа(на запись) в определенный инфоблок, где будут храниться данные вопросы. Затем определить ряд пользователей в данную группу.
После чего данные пользователи смогут опубликовывать добавленные вопросы, удалять, изменять итд.

В данном уроке рассмотрим, где компоненты размещаются внутри 1С-битрикс.

Фактически компоненты можно разделить на два вида - это системные и пользовательские компоненты. Каждый из видов размещаются в своей директории.

Системные компоненты расположены в директории /bitrix/components/bitrix/ . Cодержимое этой папки изменять нельзя. Здесь находятся файлы, которые обновляются разработчиками, а внесенные изменения в них будут стерты. Проект может быть и снят с поддержки, в таком случае усложняется в целом его обновления.

В тоже время все пользовательские компоненты могут лежать прям в этой же паке components или для системного хранения под них можно создать отдельную директорию, которая в терминологии битрикс называться « Пространством имен компонентов ».

/bitrix/components/имя_компонента/
или в папке с нашим пространством имен
/bitrix/components/наше_пространство_имен/имя_компонента/

Разработчики битрикс рекомендуют создавать отдельную папку в дереве сайта с названием local. В этой папке, как в директории bitrix, нужно разместить папку под компоненты " components" . В папку components мы копируем системные компоненты или же создаем в ней свои. Такая папка local имеет приоритет перед папкой Битрикс, и все ее компоненты загружаются в первую очередь. Как работать в данной директории я покажу в одном из уроков на практическом примере.

Для общего понимания, давайте скопируем системный компонент в свое пространство имен.

Наименование компонентов

Теперь мы знаем, что в папке bitrix располагаются системные компоненты, названием ее является пространством имен. Это же пространство имен мы видим в компоненте, когда открываем его на редактирование, или в режиме кода. Если компонент находится в нашем пространстве имен, то в режиме кода мы увидим в место bitrix название папки, в которой он расположен.

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

Сами имена компонентов имеют следующий вид, идентификатор1.идентификатор2… Например, news, news.list, news.detail и т.д. Имена рекомендуется строить иерархически с общего понятия и заканчивать конкретным названием компонента.

Вообще считается полное имя компонента – это имя компонента с указыванием пространства имен. Оно имеет вид: пространство_имен:имя_компонента. Например, bitrix:news.list или bitrix:news - это все имена компонентов. Если компонент лежит не в пространстве имен, то пространство имен не указывается, а пишется просто: имя_компонента.

Подключение компонента

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

Если включить режим кода, мы увидим, как он вызывается.

Каждый компонент подключается при помощи функции IncludeComponent() , объекта $APPLICATION , в который передаются параметры его настроек.

Первый параметр - это название компонента, которое с вами разбирали " bitrix:news.list ". Видим, что оно состоит из двух частей: bitrix: пространство имен компонента и его название news.list .

Второй параметр - это наименование шаблона. Если пустые кавычки, тогда устанавливается шаблон по умолчанию, с именем .default , если установлен шаблон в настройках, тогда увидим в кавычках его наименование.

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

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

Запомните главную вещь: любой из компонентов состоит из обязательного набора папок и файлов. Разницы не имеет, какой бы вы из них рассматриваете структура их будет едина. То есть, что компонент Google Maps, что фотогалерея, компонент "каталог" - у них одна структура. Отличие сможете найти только между простым и комплексным компонентами. Это означает то, что не нужно изучать громаду документации. На самом деле все достаточно просто устроено! Вам нужно только понять, как это все работает, и сможете реализовать любую идею, которая у вас появится.

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

Итак приступим:

Создание инфоблока

1. Кликаем в структуре на "Типы инфоблоков" и нажимаем на зеленую кнопку "+ Добавить новый тип"

2. Откроется окно мастера создания инфоблока:

3. Далее в дереве "Типы инфоблоков" находим наш свежесозданный инфоблок и кликаем по нему. Далее на зеленую кнопку "+ Добавить инфоблок".

4. Откроется мастер создания инфоблока. Заполняем примерно следующим образом:

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

Далее два раза кликаем по иконке компонента на странице, откроется мастер настройки компонента.

Итак пишу сверху вниз как заполнить поля:

Еще раз нажимаем сохранить снизу слева. Все инфоблок новостей Битрикс создан, настроен и выведен на сайт.

Надеюсь все понятно и доступно.

Читайте также: