Создание компонента Битрикс на примере слайдера

bitrix_comp-9065100

3 октября 2019 1С-Битрикс

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

Спустя некоторое время, когда я разобрался, всё оказалось довольно таки просто и создавать компоненты прям с нуля тоже не обязательно. Сегодня я расскажу, как просто научиться создавать компоненты для CMS 1С-Битрикс на примере слайдера изображений.

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

Итак для начала создаем новый тип инфоблока и сам инфоблок в админ-панели битрикса. Тип инфоблока это своего рода папка для самих инфоблоков. А инфоблок — таблица, где будет храниться список с элементами, в данном случае это слайды. Тип инфоблока cлайдер и его ID slider.

bitrix_comp1-1024x681-6619706

Далее во вновь созданном типе создаем сам инфоблок. Назову его так же слайдер. Ставим галочку с сайтом по умолчанию.

bitrix_comp2-4920257

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

comp_slider-6666689

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

bitrix_comp4-1-5143644

Теперь можно сразу его наполнить. Для этого идем в Рабочий стол → Контент → Слайдер → Слайдер и добавляем новый элемент.

bitrix_comp5-1024x488-1739844

Название обязательно. И картинку будем загружать в картинку для анонса во вкладке Анонс.

bitrix_comp6-8633880

Создание компонента битрикс

Компоненты не обязательно создавать с нуля. В большинстве случаев подходит кастомизация компонентов news.list или news. В нашем случае подойдет компонент news.list.

Идем в /bitrix/components/bitrix/news.list/templates/ и копируем папку .default в /bitrix/templates/ваш_шаблон/components/bitrix/news.list/ Если папки components и news.list в вашем шаблоне отсутствуют, то создаём их. И переименовываем папку из .default например в slider. Так мы создали новый кастомный шаблон slider.

Сам шаблон находится в файле template.php Открываем его и на данный момент можно все из него удалить. В будущем, когда вы уже будете знать что к чему, то просто будете оставлять из стандартного кода то, что необходимо — так быстрее.

Итак разберем все по порядку.

В самом начале оставляем строчку. Она необходима для защиты от прямого доступа к файлу.

Все наши элементы будут находиться в массиве $arResult["ITEMS"] Затем он перебирается с помощью foreach и выводится по элементно в массиве $arItem. Оставляем цикл foreach .


Давайте сейчас посмотрим что у нас находится в массиве. Для этого в цикл добавляем var_dump($arItem)

    

Чтобы увидеть данные необходимо вывести компонент на странице сайта. Создайте новую пустую страницу и добавьте туда компонент news.list. Выбираем шаблон slider и указываем тип инфоблока и инфоблок со слайдами.

bitrix_comp7-4419458

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

bitrix_comp8-1-2483126

Здесь нам понадобятся только картинки анонсов. Ссылка на картинку будет находится в элементе $arItem["PREVIEW_PICTURE"]["SRC"]

Добавление слайдера в компонент

Теперь нам осталось прикрутить любой плагин со слайдером в наш компонент. Я добавлю Owl Carousel 2. Скачать можно отсюда.

Сохраняем стили и скрипты в папках css и js текущего шаблона: owl.carousel.css, owl.theme.default.min.css, owl.carousel.min.js. Так же нам понадобится jQuery.

Добавляем скрипты между тегами . Это можно сделать в шаблоне в файле header.php. Получить ссылку на текущий шаблон можно с помощью функции Получаем примерно следующий код: