Найти тему

Учимся добавлять включаемую область в Битриксе

Включаемая область в 1С-Битрикс
Включаемая область в 1С-Битрикс

Представим что Вы являетесь разработчиком какого-нибудь сайта на Битриксе и заказчик ставит перед Вами задачу:

сделать так чтобы контент-менеджер смог редактировать номер телефона в хедере и футере не залезая в исходный код.

Как это сделать? Ответ кроется в т.н. включаемых областях, с их помощью можно редактировать практически любой элемент на сайте.

Разберем данную ситуацию на конкретном примере.

Допустим у нас есть сайт по продаже мебели, сначала мы возьмемся за номер, который находится в хедере:

Номер в хедере шаблона
Номер в хедере шаблона

Для этого создаем тестовую страницу и открываем визуальный редактор:

Визуальный редактор в Битрикс (старая версия)
Визуальный редактор в Битрикс (старая версия)

В этом редакторе мы выбираем включаемую область:

Выбор включаемой области в редакторе Битрикс
Выбор включаемой области в редакторе Битрикс

В параметрах компонента выбираем где необходимо показывать включаемую область (в нашем случае выбираем из файла):

Параметры компонента Вставка включаемой области
Параметры компонента Вставка включаемой области

В специальном поле прописываем путь к файлу где будет храниться html-код нашего телефона:

Путь к файлу
Путь к файлу

Обращаю Ваше внимание на то, что физически данный путь еще не существует, давайте его создадим. Для этого в папке local создаем папку include, а в папке include файл phone.php:

Файл phone.php
Файл phone.php

Открываем этот файл и помещаем в него необходимую верстку:

Верстка внутри файла phone.php
Верстка внутри файла phone.php

Теперь возвращаемся к нашему визуальному редактору и переходим на соседнюю вкладку:

Код вызова шаблона компонента
Код вызова шаблона компонента

Весь находящийся в ней код мы копируем и вставляем на место верстки в хедере между тегами div:

Замена ссылки на код вызова компонента
Замена ссылки на код вызова компонента

Сохраняем изменения и обновляем страницу в публичной части сайта.

Вот что в итоге должно получиться:

Включаемая область в хедере сайта
Включаемая область в хедере сайта

При нажатии на кнопку "Изменить область" контент-менеджер сможет без труда отредактировать контактный номер телефона в случае если он когда-нибудь изменится:

Возможность редактирования номера в визуальном редакторе
Возможность редактирования номера в визуальном редакторе

Аналогичная процедура проделывается и с номером, который находится в футере.

Также Вас могут заинтересовать:

#включаемая_область, #сайт_на_битрикс

Спасибо за внимание!

Остались вопросы? Что-то не получилось? Пишите в комментариях. Вместе мы сможем со всем разобраться)

Если статья оказалась полезной предлагаю подписаться на канал.