Заказать
Заказать

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5

Как разбить шаблон на компоненты редактируемой области? В чем основная задача и ценность этой функции Битрикс? Подробно и наглядно рассмотрим в статье. Ранее я уже останавливался на этой теме в одном из видео. Рекомендую посмотреть для большего понимания.

Компонент редактируемой области позволяет править любую часть страницы отдельно: телефон, «наши партнеры», логотип и т.д. Не нужно обращаться к админке.

Где взять код для подключения компонента редактируемой области?

Заходим на страничку new-page.php, которую мы создавали ранее, нажимаем «изменить страницу». Разделяем страницу на 2 части (текстовую и кодовую). Выбираем в меню справа «включаемые области», «вставка включаемой области» – кликнуть дважды мышкой, чтобы появилось окно.

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Вставка включаемой области

Остановимся на параметрах компонента.

«Показывать включаемую область:» выбираем «из файла». Так как править будем из файла. Разобьем на блоки по отдельным файлам, где будут совершаться все изменения. Для удобства пользователей предусмотрены подсказки (значок «і»). Хотя на практике, документация как Битрикса, так и админки, далеки от совершенства. В выпадающем меню есть «из раздела», «для страницы» – об этом можно почитать в информационном окне.

«Путь к файлу области» – обычно называют папку include, начнем с логотипа logo.php. Сохранить. Появится код.

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Параметры компонента

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

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Код редактируемой облати

 Копируем и выходим БЕЗ СОХРАНЕНИЯ.

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Подключение элемента
<?$APPLICATION->IncludeComponent(
    "bitrix:main.include",
    "",
    Array(
        "AREA_FILE_SHOW" => "file",
        "AREA_FILE_SUFFIX" => "inc",
        "EDIT_TEMPLATE" => "",
        "PATH" => "/include/logo.php"
    )
);?>

В папке header.php при помощи скопированной области включаем компонент логотипа. Фрагмент, отвечавший за вывод лого, закомментируем (отключим) – обозначено серым кругом и зеленым маркером. После обновления на главной не будет отображаться логотип, так как logo.php еще предстоит создать.

Как в Битрикс распределить элементы страницы по папкам?

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Создание каталога
Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Создание include

Следующий шаг – создание соответствующей документации. В папке httpdocs создаем папку include, в которой создаем файл logo.php.

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Документация Битрикс
Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Создание документов для элементов

В logo.php вставляем из папки header.php закомментированный ранее компонент. На слайде выше обозначен зеленым маркером или воспользуйтесь подсказкой ниже. Из хедера код можно удалить.

<a href="index.html" class="header-logo header-logo_white d-block">
                <img src="<?=SITE_TEMPLATE_PATH;?>/img/head-logo.svg" alt="мс-тех">
            </a>
            <a href="index.html" class="header-logo header-logo_dark d-block">
                <img src="<?=SITE_TEMPLATE_PATH;?>/img/logo.svg" alt="мс-тех">
            </a>
Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Подключение логотипа
Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Редактирование логотипа

Сохраним, появится логотип и возможность его править

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Визуальный редактор элемента логотипа

Важно! Редактируемая область будет видна только в режиме правки. Компонент появится после создания документации.

В окне редактора пользователь может видоизменять компонент. В Битриксе предусмотрен набор опций в визуальном редакторе – можно залить другое изображение, менять размер и местоположения. Но в идеале, конечно, использовать код.

Как определить какой фрагмент кода отвечает за компонент?

Вопрос рассмотрим на примере телефонного номера. Очень важна внимательность в работе, чтобы не удалить лишнюю строчку.

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Определение кода области

Чтобы найти нужную область кода, кликаем на телефонный номер в выпадающем меню выбираем «проверить объект».

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Проверить объект

Появится код страницы и, наводя курсор мышки на соответствующую строку, под номером телефона появится отметка.

Далее повторяем тот же алгоритм, как описано выше при работе с логотипом. Для включения редактируемой области в каталоге header.php можно не повторять действия с компонентами. Просто копируем код, которым мы включили логотип и дублируем ниже. Обязательно меняем название документа, к которому будет обращаться программа.

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Разбивка шаблона на редактируемые элементы

Мы уже определили код номера телефона – копируем фрагмент (строка 88-107).

В дальнейшем он будет удален из header.php. Будьте крайне внимательны при удалении в Битрикс. Ниже подсказка для копирования и самоконтроля.

<a href="tel:+74996854947" class="header-phone d-block">
                <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                     viewBox="0 0 578.106 578.106" style="enable-background:new 0 0 578.106 578.106;" xml:space="preserve">
                    <g>
                        <path d="M577.83,456.128c1.225,9.385-1.635,17.545-8.568,24.48l-81.396,80.781
                            c-3.672,4.08-8.465,7.551-14.381,10.404c-5.916,2.857-11.729,4.693-17.439,5.508c-0.408,0-1.635,0.105-3.676,0.309
                            c-2.037,0.203-4.689,0.307-7.953,0.307c-7.754,0-20.301-1.326-37.641-3.979s-38.555-9.182-63.645-19.584
                            c-25.096-10.404-53.553-26.012-85.376-46.818c-31.823-20.805-65.688-49.367-101.592-85.68
                            c-28.56-28.152-52.224-55.08-70.992-80.783c-18.768-25.705-33.864-49.471-45.288-71.299
                            c-11.425-21.828-19.993-41.616-25.705-59.364S4.59,177.362,2.55,164.51s-2.856-22.95-2.448-30.294
                            c0.408-7.344,0.612-11.424,0.612-12.24c0.816-5.712,2.652-11.526,5.508-17.442s6.324-10.71,10.404-14.382L98.022,8.756
                            c5.712-5.712,12.24-8.568,19.584-8.568c5.304,0,9.996,1.53,14.076,4.59s7.548,6.834,10.404,11.322l65.484,124.236
                            c3.672,6.528,4.692,13.668,3.06,21.42c-1.632,7.752-5.1,14.28-10.404,19.584l-29.988,29.988c-0.816,0.816-1.53,2.142-2.142,3.978
                            s-0.918,3.366-0.918,4.59c1.632,8.568,5.304,18.36,11.016,29.376c4.896,9.792,12.444,21.726,22.644,35.802
                            s24.684,30.293,43.452,48.653c18.36,18.77,34.68,33.354,48.96,43.76c14.277,10.4,26.215,18.053,35.803,22.949
                            c9.588,4.896,16.932,7.854,22.031,8.871l7.648,1.531c0.816,0,2.145-0.307,3.979-0.918c1.836-0.613,3.162-1.326,3.979-2.143
                            l34.883-35.496c7.348-6.527,15.912-9.791,25.705-9.791c6.938,0,12.443,1.223,16.523,3.672h0.611l118.115,69.768
                            C571.098,441.238,576.197,447.968,577.83,456.128z"/>
                    </g>
                </svg>
                <span>+7 (499) 685-49-47</span>
            </a>
     
Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Разбивка шаблона по документам Битрикс

В папке include создаем файл number.php и переносим код компонента из хедера.

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Редактирование шаблона

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

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Визуальный редактор кода

Для закрепления материала включим меню. Что понадобится нам в будущих уроках

Закрепление материала. Итоги

Компонент редактируемой области подключается через соответствующий файл элемента шаблона страницы. В данном случае это хедер. Мы переносим фрагмент кода, который в будущем собираемся редактировать в отдельную папку.

Такая система Битрикс позволяет видоизменять компоненты без риска испортить весь шаблона.

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Разбивка страницы на отдельные папки

Копируем код меню из хедера (строка. 33—61) и переносим в созданный документ.

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Создание элемента меню

Или воспользуйтесь подсказкой.

   
    <?$APPLICATION->IncludeComponent(
    "bitrix:main.include",
    "",
    Array(
        "AREA_FILE_SHOW" => "file",
        "AREA_FILE_SUFFIX" => "inc",
        "EDIT_TEMPLATE" => "",
        "PATH" => "/include/menu.php"
    )
);?>
Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Подключение меню

Подключаем компонент. Указываем правильный путь.

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Хедер: редактируемые элементы

Так будет выглядеть хедер после подключения всех компонентов.

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Редактирование включаемой области меню

После сохранения меню также можно корректировать. Таким же способом в Битрикс можно выделить любую область страницы, которая предположительно будет часто меняться. Например, «наши партнеры», «адреса отделений» и т.д.

Помним, что редактируемые элементы в Битрикс видны только в режиме правки.

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Режим правки Битрикс

Хотелось бы обратить внимание читателей, что с активной функцией редактирования страница имеет такой вид. При выключении режима правки все станет на свои места.

Надеюсь, материал статьи будет полезен. Буду очень благодарен за комментарии и вопросы.

Назад