Как создать компонент битрикс
Перейти к содержимому

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

  • автор:

Простой пример создания компонента

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

Предварительные действия

Готовим php-код компонента

Первым делом сразу напишем php-код, который выполняет, то, что нам нужно.

Правда код просто выводит дату и нельзя выбрать другой формат. Лучше поместить в переменную формат вывода даты:

И последний штрих — нужно разделить логику и представление:

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

Теперь нужно создать свое пространство имен, например: dv. Для этого надо создать папку /local/components/dv . В ней делаем папку компонента — date.current. И в ней, в свою очередь, создаем два обязательных файла и папку для хранения шаблонов templates. В этой папке должна быть создана папка .default и в ней файл template.php.

Получаем такую структуру в папке /local/components/dv/date.current :

  • component.php
  • .description.php
  • templates/.default/template.php

Реализуем компонент без входных параметров

Пока сделаем компонент без возможности задания входного параметра — формата даты.

IncludeComponentTemplate(); ?>
 GetMessage("Текущая дата"), "DESCRIPTION" => GetMessage("Выводим текущую дату"), ); ?>

Как вы могли заметить в каждом из файлов компонента в начале пишется строка if (!defined(“B_PROLOG_INCLUDED”) || B_PROLOG_INCLUDED!==true) die(); . Она нужна для того, чтобы данные файлы нельзя было вызвать напрямую из окна браузера.

В простейшем виде компонент готов — его можно вызвать в коде страниц при помощи конструкции:

IncludeComponent( "dv:date.current", ".default", Array( ), false );?>

Реализуем компонент с входными параметрами

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

Чтобы наш компонент появился в визуальном редакторе нужно дополнить файл описания компонента.

.description.php:

 GetMessage("Текущая дата"), "DESCRIPTION" => GetMessage("Выводим текущую дату"), "PATH" => array( "ID" => "dv_components", "CHILD" => array( "ID" => "curdate", "NAME" => "Текущая дата" ) ), "ICON" => "/images/icon.gif", ); ?>

Для размещения компонента в дереве компонентов мы добавили элемент массива описания PATH. Таким образом, наш компонент будет показан в отдельной папке. Опционально, можно задать иконку компонента — она будет показываться в дереве и в визуальном редакторе.

Разберемся с настройками компонента. Будем считать, что опцию шаблон даты мы будем задавать строкой. Создаем файл .parameters.php с таким содержанием:

 array(), "PARAMETERS" => array( "TEMPLATE_FOR_DATE" => array( "PARENT" => "BASE", "NAME" => "Шаблон для даты", "TYPE" => "STRING", "MULTIPLE" => "N", "DEFAULT" => "Y-m-d", ), ), ); ?>

И изменяем файл с логикой компонента, чтобы он мог использовать параметр, который мы задаем component.php:

IncludeComponentTemplate(); ?>
Что же мы сделали?

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

Большая часть заказных компонентов для Bitrix Framework создается путем изменения компонентов, идущих в поставке продуктов. Поэтому очень нужно хорошо изучить стандартные компоненты, перед тем как программировать новые. Скорее всего, задачу, которую вы хотите решить — уже решили разработчики компании 1С-Битрикс.

Урок 9. Создание собственного компонента слайдера для интернет-магазина на Битрикс на CMS-Foundation

Приветствую моих читателей! Мы продолжаем строить наш собственный интернет-магазин на Битрикс редакции Старт. В прошлых уроках мы уже реализовали адаптивный каталог товаров и сделали карточку товара. Теперь пришло время немного подкрасить наш магазин и внести такую модную штуку, как слайдер. Если бы мы не пользовались никаким CSS-фреймворками, то нам потребовалось бы изучать Java Script и JQuery. Или по крайней мере искать в интернете готовые скрипты и как-то их прикручивать к сайту. Но как вы помните наш интернет магазин строится полностью на CSS-фреймворке Foundation, а в нём уже есть готовый класс для слайдера Orbit.

Но внедрять PHP код и API Битрикс непосредственно в шаблон не очень правильное решение, не bitrix-way, так сказать. Поэтому для вывода слайдера мы создадим собственный компонент. Ну и конечно при этом научимся создавать свои собственные компоненты Битрикс.

План создания компонента Битрикс

Логику работы мы заложим следующую. Слайдер будет строится на том же инфоблоке Товары, что и каталог. Но попадать в слайдер будут только те товары, у которых задано свойство Слайдер (SLIDER). Входными параметрами для нашего компонента будет Тип инфоблока, Инфоблок и свойство указывающее, что необходимо выводить слайдер.

Если у вас нет свойства Слайдер в инфоблоке добавьте его.

Свойство слайдер инфоблока

Тип у свойство должен быть список.

Настройка свойств инфоблока

Программно конечно со списками сложнее работать, чем со строкой или числом, зато удобнее указывать при редактировании карточки товара.

Установка свойства в инфоблоке

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

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

В Битрикс существует понятие пространство имен. Все стандартные компоненты Битрикс находятся в пространстве имен Bitrix в папочке /bitrix/components/bitrix/ . Свои компоненты нужно располагать в своем пространстве имен, т.е. в папочке /bitrix/components/my/ или ещё лучше в папке /local/components/my/ . my — это наше пространство имен.
В своем примере я буду располагать компоненты в пространстве имен startshop по пути /local/components/startshop/ . Компонент так и назову slider.
Минимальная структура файлов компонента должна быть следующая:

component.php — основной фал компонента, реализация логики работы компонента на API Bitrix.
.description.php — файл описания компонента.

templates/.default/template.php — файл шаблона по умолчанию для компонента.
.description.php

if (!defined(«B_PROLOG_INCLUDED») || B_PROLOG_INCLUDED!==true) die();

$arComponentDescription = array(
«NAME» => «Слайдер»,
«DESCRIPTION» => «Слайдер на фреймворке CSS Foundation»,
«ICON» => «/images/icon.gif»,
«SORT» => 100,
«CACHE_PATH» => «Y»,
«PATH» => array(
«ID» => «startshop»,
«NAME» => ‘Компоненты StartShop’
),
);
?>

В этом фале задается наименование и описание компонента. А так же иконка для отображения в палитре компонентов и параметр PATH указывает на то, в какой папочке будет находится компонент в палитре компонентов.

Собственный компонент Битрикс

.parameters.php

if (!defined(«B_PROLOG_INCLUDED») || B_PROLOG_INCLUDED!==true) die();

$arIBlocks=array();
$db_iblock = CIBlock::GetList(array(«SORT»=>»ASC»), array(«TYPE» => ($arCurrentValues[«IBLOCK_TYPE»]!=»-«?$arCurrentValues[«IBLOCK_TYPE»]:»»)));
while($arRes = $db_iblock->Fetch())
$arIBlocks[$arRes[«ID»]] = «[«.$arRes[«ID»].»] «.$arRes[«NAME»];

$arProperty_LNS = array();
$rsProp = CIBlockProperty::GetList(array(«sort»=>»asc», «name»=>»asc»), array(«ACTIVE»=>»Y», «IBLOCK_ID»=>($arCurrentValues[«IBLOCK_ID»])));
while ($arr=$rsProp->Fetch())
$arProperty[$arr[«CODE»]] = «[«.$arr[«CODE»].»] «.$arr[«NAME»];
if (in_array($arr[«PROPERTY_TYPE»], array(«L», «N», «S»)))
$arProperty_LNS[$arr[«CODE»]] = «[«.$arr[«CODE»].»] «.$arr[«NAME»];
>
>

$arComponentParameters = array(
«PARAMETERS» => array(
«IBLOCK_TYPE» => array(
«PARENT» => «BASE»,
«NAME» => «Тип инфоблока»,
«TYPE» => «LIST»,
«VALUES» => $arTypesEx,
«DEFAULT» => «news»,
«REFRESH» => «Y»,
),
«IBLOCK_ID» => array(
«PARENT» => «BASE»,
«NAME» => «Инфобок»,
«TYPE» => «LIST»,
«VALUES» => $arIBlocks,
«DEFAULT» => ‘=’,
«ADDITIONAL_VALUES» => «Y»,
«REFRESH» => «Y»,
),
«PROPERTY_CODE» => array(
«PARENT» => «DATA_SOURCE»,
«NAME» => «Укажите свойство по которому будет фильтроваться товары для слайдера»,
«TYPE» => «LIST»,
«MULTIPLE» => «N»,
«VALUES» => $arProperty_LNS,
«ADDITIONAL_VALUES» => «Y»,
),
),
);

  1. $arTypesEx — массив с типами доступных инфоблоков.
  2. $arIBlocks — массив со списком инфоблоков отфильтрованному по данному типу.
  3. $arProperty_LNS — массив всех свойств выбранного инфоблока.

Параметры Слайдера

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

component.php

if(!defined(«B_PROLOG_INCLUDED») || B_PROLOG_INCLUDED!==true)die();
use Bitrix\Main\Loader;

$arSelect = Array(«ID», «NAME», «PREVIEW_PICTURE», «DETAIL_PAGE_URL», «PROPERTY_».$arParams[«PROPERTY_CODE»]);
$arFilter = Array(«IBLOCK_ID» => IntVal($arParams[«IBLOCK_ID»]), «ACTIVE»=>»Y», «PROPERTY_».$arParams[«PROPERTY_CODE»].»_VALUE» => ‘Да’);
$res = CIBlockElement::GetList(Array(), $arFilter, false, false, $arSelect);
while($arFields = $res->GetNext())
$arResult[] = $arFields;
>

Код компонента получился очень короткий в отличие от стандартного кода вывода списка новостей. Тут нет ничего лишнего. Вначале мы объявили пространство имен для загрузчика Loader, далее с его помощью подгрузили модуль инфоблоков iblock. И с помощью самой распространенной конструкции API Bitrix CIBlockElement::GetList() выполнили запрос к базе данных отобрав записи инфоблока Товары, в котором свойство Слайдер установлено в занчение «Да«. Далее результатом выборки заполнили предопределенный массив $arResult и последней строкой подключили файл шаблона.

templates/.default/template.php

$file = CFile::ResizeImageGet($item[«PREVIEW_PICTURE»], array(‘width’ => 1100,’height’ => 500), BX_RESIZE_IMAGE_EXACT, true);
?>

Space

Шаблон даже получился более громоздкий, чем компонент. Но если посмотрите тут все просто. Код верстки слайдера взять целиком из CSS-фреймворка Foundation. Далее я уже приводил принцип работы с массивом $arResult в уроке когда мы выводили каталог товаров. Делаем выполняем цикл по массиву и выводим нужные нам значения. Тут пришлось правда два цикла сделать — не очень оптимально, но это не обращение к базе данных и цикл по массиву из 3-5 записей не нагрузит ваш сайт. По этому усложнять код и избегать второго цикла я счел не нужным.
Строкой $file = CFile::ResizeImageGet($item[«PREVIEW_PICTURE»], array(‘width’ => 1100,’height’ => 500), BX_RESIZE_IMAGE_EXACT, true); я снова подгоняю картинки под требуемый размер. Подробнее все в том же уроке про вывод каталога.
Вот что в итоге получилось.

Наш Слайдер

Тут конечно надо заметить, что не очень красиво получилось. По хорошему нужно подобрать пропорциональные картинки и разместить их в отдельном инфоблоке. Вы попробуйте так и сделать, код компонента при этом обсалютно не изменится, даже упростится, не потребуется условие отбора по свойству Слайдер. Вобщем пример при этом не страдает, по этому переделывать я не стану, а лучше напишу побыстрее следующий урок.
И как всегда выкладываю исходный код урока:
компонент slider
шаблон этого урока

От автора:
А на этом пока все. Собственно, что касается вывода информации почти все готово, остаются мелочи. Т.е. витрина у нас уже готова и работает. Дальше нужно делать функционал магазина, а это значит карнизу и заказы. Подписывайтесь и ждите новых статей, дальше будет интереснее.

Практика Bitrix — Создание компонента

1. Cоздаем свое пространство имен, например: jet.

Для этого надо создать папку jet в папке components

  • /local/components/jet — новый способ.
  • /bitrix/components/jet — старый способ (не рекоммендуется).

2. Далее в созданном пространстве имен создаем папку с названием нашего компонента, например:date.current.

3. Теперь в папке компонента создаем создаем два обязательных файла и папку для хранения шаблонов templates. В этой папке должна быть создана папка .default и в ней файл template.php.

Получаем такую структуру в папке /local/components/jet/date.current:

  • component.php
  • .description.php
  • templates/.default/template.php

Инструкция по работе с компонентами в CMS 1С-Битрикс

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

Как вставить компонент на страницу

Включите режим правки в публичной части сайта.

1.jpg

Наведите мышь на нужную область сайта и вызовите визуальный редактор, нажав на кнопку «Изменить область».

2.jpg

Либо нажмите «Изменить страницу» — «В визуальном редакторе» для редактирования всей страницы.

2.1.jpg

Разверните боковую панель редактора, если она скрыта, кликнув по ней.

3.jpg

Компоненты разделены на группы по назначению (например, контент, сервисы, служебные), либо по автору (если вы установили компонент из Маркетплейса).

Если нужный компонент не отображается в списке, то нажмите на стрелку справа от кнопки «Компоненты» (1), и нажмите «Обновить» во всплывающей подсказке (2).

4.jpg

Внимание! Панель компонентов выводится только для страниц со статической информацией. Если вы ее не видите, значит, вы редактируете информационный блок.

Переместите нужный компонент мышкой в рабочую область слева от списка.

5.jpg

Как настроить компонент?

Существует несколько способов изменить настройки компонента.

  • Способ 1. Дважды кликните по компоненту левой кнопкой мыши.
  • Способ 2. Кликните по компоненту правой кнопкой мыши и выберите «Параметры компонента» во всплывающей подсказке. 6.jpg
  • Способ 3. В режиме правки наведите мышь на компонент и кликните по значку в форме шестеренки. 7.jpg

После этого появится всплывающее окно с параметрами данного компонента.

8.jpg

* Набор настроек для каждого компонента индивидуален.

Теперь можно выполнить необходимые настройки и нажать «Сохранить».

Похожие публикации:
  1. Как перезагрузка айфон 12 про макс
  2. Как сделать был недавно
  3. Почему телевизор самсунг сам выключается и включается что делать
  4. Почему установленная тема на miui слетает

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *