3 октября 2019 1С-Битрикс
Когда я создавал свою первую компоненту на битриксе для меня это показалось довольно сложным процессом. Вроде бы написано полно статей, русскоязычная документация, форум. Что ещё надо?! А то, что нет простой для понимания информации для новичка, который только начинает практиковаться в разработке для битрикса.
Спустя некоторое время, когда я разобрался, всё оказалось довольно таки просто и создавать компоненты прям с нуля тоже не обязательно. Сегодня я расскажу, как просто научиться создавать компоненты для CMS 1С-Битрикс на примере слайдера изображений.
Создание инфоблока
Итак для начала создаем новый тип инфоблока и сам инфоблок в админ-панели битрикса. Тип инфоблока это своего рода папка для самих инфоблоков. А инфоблок — таблица, где будет храниться список с элементами, в данном случае это слайды. Тип инфоблока cлайдер и его ID slider.
Далее во вновь созданном типе создаем сам инфоблок. Назову его так же слайдер. Ставим галочку с сайтом по умолчанию.
Так же для удобства во вкладке Поля устанавливаем начало активности в текущие дату и время. Это необходимо, чтобы у вновь созданных элементов дата активности заполнялась автоматически и они сразу же становились доступны.
На вкладке Доступ разрешаем чтение для всех пользователей, иначе инфоблок будет недоступен к просмотру.
Теперь можно сразу его наполнить. Для этого идем в Рабочий стол → Контент → Слайдер → Слайдер и добавляем новый элемент.
Название обязательно. И картинку будем загружать в картинку для анонса во вкладке Анонс.
Создание компонента битрикс
Компоненты не обязательно создавать с нуля. В большинстве случаев подходит кастомизация компонентов 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 и указываем тип инфоблока и инфоблок со слайдами.
Видим, что в массиве содержатся наши элементы слайдера. При создании компонент вам часто придется пользоваться функциями var_dump() или print_r() чтобы узнать как называются элементы содержащиеся в массиве и вывести их.
Здесь нам понадобятся только картинки анонсов. Ссылка на картинку будет находится в элементе $arItem["PREVIEW_PICTURE"]["SRC"]
Добавление слайдера в компонент
Теперь нам осталось прикрутить любой плагин со слайдером в наш компонент. Я добавлю Owl Carousel 2. Скачать можно отсюда.
Сохраняем стили и скрипты в папках css и js текущего шаблона: owl.carousel.css, owl.theme.default.min.css, owl.carousel.min.js. Так же нам понадобится jQuery.
Добавляем скрипты между тегами . Это можно сделать в шаблоне в файле header.php. Получить ссылку на текущий шаблон можно с помощью функции Получаем примерно следующий код: