Вкратце, что такое представления элементов, вы можете прочитать в про списки элементов и представления.
В данной же статье мы опишем процесс создания представления по шагам.
Рекомендуем при прочтении статьи использовать для веб-разработчика.
За основу возьмем реальное представление, которое входит в состав решения .
Мы хотим создать следующее представление:
Шаг 1
Заготовка
Пусть код нашего представления будет следующим
ecommerce.v3.lite.color
В соответствие с документацией мы создаем папку с нашим новым представлением, в том пространстве имен, которому будет принадлежать наше представление.
/bxready/library/elements/ecommerce.v3.lite.color/
Мы - в системной папке /bitrix/tools/
Разработчикам, т.е. вам, нужно создать в нужном шаблоне сайта(или шаблоне .default)
В папке создайте файл element.php – это основной файл, в котором вы будете собирать верстку для своего представления.
Начнем файл с проверки, подключен ли у нас пролог.
На вход этот файл всегда получает два массива:
Шаг 2
Языковые фразы(не обязательный)
В нашем представлении нам могут понадобиться какие-то тексты.
Так как мы создаем представление для коробки и просто обязаны обеспечить поддержку разных кодировок, то нам не обойтись без языковых фраз.
Поэтому создаем в папке нашего представления папку /lang/ru/ в ней файл element.php, в котором обозначаем те языковые фразы, что нам понадобятся.
Подключим в element.php lang-файл, в котором хранятся используемые в представлении фразы.
Обратите внимание, для создания своих представлений мы используем стандартные технологии многоязыковой поддержки Битрикс.
Но на практике, при работе над конкретной задачей или проектом, которому данные стандарты не требуются, этим можно пренебрегать.
Более подробную информацию по использованию языковых фраз вы можете получить в .
Шаг 3
Включаем ядро BXReady
Для того, чтобы все работало - не забываем подключить ядро
Шаг 4
Интеграция с HTML
Перейдем непосредственно к верстке.
Вообще, можно весь HTML прописать в файле element.php.
Но карточка элемента e-commerce является сложным объектом и для упрощения работы над ней мы разбили код на составляеющие, которые потом просто собираем директивами include в нашем представлении в файле element.php.
К примеру, у нас есть такие составляющие как:
Получившуюся верстку и состав файлов вы можете посмотреть в приложенном архиве.
Шаг 5
Подключение внешних файлов
Для того, чтобы все было хорошо нам не хватает всего нескольких мелочей.
Для их подключения используются специальные конструкции
Шаг 6
Маркеры
Есть такой интересный момент, как маркеры.
Можно их жестко прописать в нашем HTML, а можно использовать сущности нашей библиотеки, так как маркеры мы выделили в отдельные сущности, чтобы можно было на любом проекте централизованно их менять.
Чтобы маркеры знали откуда они вызываются используем метод getInstance, передав им объект $this, это техническая деталь, необходимая для передачи информации о шаблоне (таким образом мы поддерживаем кеширование на уровне шаблонов компонентов).
Затем определим какой тип маркеров нужно выводить и на основе данных об элементе составим массив $marketGroup для вывода нужных маркеров.
Если вы не планируете использовать маркеры писать этот код вовсе необязательно. Вы вообще можете создать представление, которое будет выводить лишь название элемента.
Шаг 7
Особые случаи
Некоторые компоненты, такие как BigData, работают по ajax и для подключения в них внешних (см. шаг 5) скриптов и стилей потребуется создать еще один файл в корне представления, epilog.php.
Его содержимое должно быть одинаковым для всех представлений, отличаясь только путем до файлов.
Этот файл будет подключаться в ряде компонентов, которые работают под управлением ajax или в которых стандартное подключение внешних файлов (шаг 5) не срабатывает.
Итак, все готово!
Создание вашего представления закончено. Осталось включить его отображение на сайте(перед этим убедитесь, что у вас установлено обновление версии 2.0.0).
Перейдем в настройки модуля BXReady Market(1->2->3->4->5).
На вкладке Настройка представлений(6) включите галочку Использовать единые представления элементов по всему сайту(7), затем выберите текущий шаблон сайта(8 ).
В блоке Настройка каталога(9) выберите какие представления использовать для различных режимов отображения каталога. Вы можете выбрать как из имеющихся, так и ввести название своего представления в поля с отметкой свой вариант. Также для каталога вы можете настроить настройки адаптивности(10) в соответствующем блоке.
В блоке настройка других блоков(11) устанавливается вариант представления для блоков товаров, находящихся вне раздела каталог. На данный момент поддерживается изменения в блоках Бестселлеры и Концентратор на главной странице. Установив нужные настройки, нажмите применить(12).
Готово, теперь вы можете наблюдать созданные вами карточке на всем сайте.
Полный код представления вы сможете найти в приложении.
В данной же статье мы опишем процесс создания представления по шагам.
Рекомендуем при прочтении статьи использовать для веб-разработчика.
За основу возьмем реальное представление, которое входит в состав решения .
Мы хотим создать следующее представление:
Шаг 1
Заготовка
Пусть код нашего представления будет следующим
ecommerce.v3.lite.color
В соответствие с документацией мы создаем папку с нашим новым представлением, в том пространстве имен, которому будет принадлежать наше представление.
/bxready/library/elements/ecommerce.v3.lite.color/
Мы - в системной папке /bitrix/tools/
Разработчикам, т.е. вам, нужно создать в нужном шаблоне сайта(или шаблоне .default)
В папке создайте файл element.php – это основной файл, в котором вы будете собирать верстку для своего представления.
Начнем файл с проверки, подключен ли у нас пролог.
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?> |
На вход этот файл всегда получает два массива:
- $arElement - с данными об элементе(товаре, новости и тд), можно сравнить с $arResult компонента catalog.element;
- $arElementParams - с параметрами, переданными компонентом, вызвавшим отрисовку представления(например, параметры catalog.section), соответственно, аналогичен массиву $arParams
Шаг 2
Языковые фразы(не обязательный)
В нашем представлении нам могут понадобиться какие-то тексты.
Так как мы создаем представление для коробки и просто обязаны обеспечить поддержку разных кодировок, то нам не обойтись без языковых фраз.
Поэтому создаем в папке нашего представления папку /lang/ru/ в ней файл element.php, в котором обозначаем те языковые фразы, что нам понадобятся.
<? $MESS["REQUEST_BTN"] = "оставить заявку"; $MESS["REQUEST_TRADE"] = "Заказать товар"; $MESS["OFFER_REQUEST_MSG"] = "Я хочу приобрести товар #TRADE_NAME# с параметрами: #PARAMS#"; $MESS["TRADE_REQUEST_MSG"] = "Я хочу приобрести товар #TRADE_NAME#"; $MESS["MORE_INFO_TITLE"] = "Подробнее"; $MESS["FROM"] = "от "; ?> |
Подключим в element.php lang-файл, в котором хранятся используемые в представлении фразы.
<?IncludeModuleLangFile(__FILE__);?> |
Обратите внимание, для создания своих представлений мы используем стандартные технологии многоязыковой поддержки Битрикс.
Но на практике, при работе над конкретной задачей или проектом, которому данные стандарты не требуются, этим можно пренебрегать.
Более подробную информацию по использованию языковых фраз вы можете получить в .
Шаг 3
Включаем ядро BXReady
Для того, чтобы все работало - не забываем подключить ядро
<?use Alexkova\Bxready\Draw;?> |
Шаг 4
Интеграция с HTML
Перейдем непосредственно к верстке.
Вообще, можно весь HTML прописать в файле element.php.
Но карточка элемента e-commerce является сложным объектом и для упрощения работы над ней мы разбили код на составляеющие, которые потом просто собираем директивами include в нашем представлении в файле element.php.
К примеру, у нас есть такие составляющие как:
- basket_btn.php - область с кнопками действий;
- avail.php - область с информацией о доступности товара;
- price.php - область для вывода цен или матрицы цен;
- другие
Получившуюся верстку и состав файлов вы можете посмотреть в приложенном архиве.
Шаг 5
Подключение внешних файлов
Для того, чтобы все было хорошо нам не хватает всего нескольких мелочей.
- CSS, необходимого для нашей верстки
- JS (если требуется), в нашем примере JS отвечает исключительно за сервисные механизмы - выравнивание карточке товаров
Для их подключения используются специальные конструкции
<?
$elementDraw->setAdditionalFile("JS", "/bitrix/tools/bxready/library/elements/ecommerce.v3.lite.color/include/script.js", true);
$elementDraw->setAdditionalFile("CSS", "/bitrix/tools/bxready/library/elements/ecommerce.v3.lite.color/include/style.css", false);
?> |
Шаг 6
Маркеры
Есть такой интересный момент, как маркеры.
Можно их жестко прописать в нашем HTML, а можно использовать сущности нашей библиотеки, так как маркеры мы выделили в отдельные сущности, чтобы можно было на любом проекте централизованно их менять.
Чтобы маркеры знали откуда они вызываются используем метод getInstance, передав им объект $this, это техническая деталь, необходимая для передачи информации о шаблоне (таким образом мы поддерживаем кеширование на уровне шаблонов компонентов).
Затем определим какой тип маркеров нужно выводить и на основе данных об элементе составим массив $marketGroup для вывода нужных маркеров.
<? $elementDraw = \Alexkova\Bxready\Draw::getInstance($this); if (isset($arElementParams["BXREADY_LIST_MARKER_TYPE"]) && strlen($arElementParams["BXREADY_LIST_MARKER_TYPE"])>0) $elementDraw->setMarkerCollection($arElementParams["BXREADY_LIST_MARKER_TYPE"]); $markerGroup = array( "NEW" => ($arElement["PROPERTIES"]["NEWPRODUCT"]["VALUE"]) ? true : false, "SALE" => ($arElement["PROPERTIES"]["SPECIALOFFER"]["VALUE"]) ? true : false, "DISCOUNT" => $arElement["MIN_PRICE"]["DISCOUNT_DIFF_PERCENT"], "HIT" => ($arElement["PROPERTIES"]["SALELEADER"]["VALUE"]) ? true : false, "REC" => ($arElement["PROPERTIES"]["RECOMMENDED"]["VALUE"]) ? true : false, ); ?> |
Если вы не планируете использовать маркеры писать этот код вовсе необязательно. Вы вообще можете создать представление, которое будет выводить лишь название элемента.
Шаг 7
Особые случаи
Некоторые компоненты, такие как BigData, работают по ajax и для подключения в них внешних (см. шаг 5) скриптов и стилей потребуется создать еще один файл в корне представления, epilog.php.
Его содержимое должно быть одинаковым для всех представлений, отличаясь только путем до файлов.
<?
global $APPLICATION;
$APPLICATION->SetAdditionalCSS("/bitrix/tools/bxready/library/elements/ecommerce.v3.lite.color/include/style.css");
$APPLICATION->AddHeadScript("/bitrix/tools/bxready/library/elements/ecommerce.v3.lite.color/include/script.js");
?> |
Этот файл будет подключаться в ряде компонентов, которые работают под управлением ajax или в которых стандартное подключение внешних файлов (шаг 5) не срабатывает.
Итак, все готово!
Создание вашего представления закончено. Осталось включить его отображение на сайте(перед этим убедитесь, что у вас установлено обновление версии 2.0.0).
Перейдем в настройки модуля BXReady Market(1->2->3->4->5).
На вкладке Настройка представлений(6) включите галочку Использовать единые представления элементов по всему сайту(7), затем выберите текущий шаблон сайта(8 ).
В блоке Настройка каталога(9) выберите какие представления использовать для различных режимов отображения каталога. Вы можете выбрать как из имеющихся, так и ввести название своего представления в поля с отметкой свой вариант. Также для каталога вы можете настроить настройки адаптивности(10) в соответствующем блоке.
В блоке настройка других блоков(11) устанавливается вариант представления для блоков товаров, находящихся вне раздела каталог. На данный момент поддерживается изменения в блоках Бестселлеры и Концентратор на главной странице. Установив нужные настройки, нажмите применить(12).
Готово, теперь вы можете наблюдать созданные вами карточке на всем сайте.
Полный код представления вы сможете найти в приложении.
Группы на сайте создаются не только сотрудниками «1С-Битрикс», но и партнерами компании. Поэтому мнения участников групп могут не совпадать с позицией компании «1С-Битрикс».
