Для примера выполним следующую задачу: в детальной карточке товара перенести картинку с брендом из блока с изображением под блок анонса характеристик.
Обратимся к разделу с описанием типов элементарных областей элемента каталога и выделим необходимые нам элементарные области:
- область Slider;
- область Preview_props.
Для решения данной задачи нам необходимо будет заменить элементарную область Slider и добавить новую элементарную область под областью Preview_props.
Создадим файлы данных областей:
![Создание файлов собственных элементарных областей Создание файлов собственных элементарных областей](/upload/medialibrary/d0a/d0a761ad7ce84b465d6640c38a80dc6d.png)
Перенесем в код области element.slider.php оригинальный код области Slider из нашего компонента. Путь до области Slider:
/bitrix/components/bxready.market2/catalog/templates/.default/bitrix/catalog.element/.default/include/slider.php
Теперь вырежем код, отображающий изображение нашего бренда, из кода области element.slider.php и вставим в код области element.preview_props.epilog.php
![Перенос кода отображения бренда Перенос кода отображения бренда](/upload/medialibrary/b26/b269fff73cb5b75464464d4c79fff33c.png)
И изменим название родительского класса у нового блока с брендом:
![Смена класса у нового блока отображения бренда Смена класса у нового блока отображения бренда](/upload/medialibrary/a48/a4859b2c1560d86fd4d69838d7d5f72a.png)
Создадим файл со стилями для нового блока с отображением бренда:
![Файл со стилями Файл со стилями](/upload/medialibrary/978/9781b4ac502fa0370f5f8b532aa81ad7.png)
Подключаем эти стили в нашей области element.preview_props.epilog.php:
![Подключение стилей Подключение стилей](/upload/medialibrary/9a6/9a639f3fa6cfa3f9b9066de34b26e121.png)
Осталось только включить работу собственных элементарных областей в административной части сайта:
![Включение поддержки элементарных областей Включение поддержки элементарных областей](/upload/medialibrary/537/537c99ab6ae34c5a553ca70587aa7354.png)
После выполненных работы получим следующий результат:
![Результат выполненных работ Результат выполненных работ](/upload/medialibrary/7ea/7ea596db91caef814301bb76b853fe9e.png)
Настройка и подключение элементарных областей |
Описание курса
| Видео-кейс
|