Как сделать сайдбар битрикс

Добавил пользователь Morpheus
Обновлено: 04.10.2024

Для того чтоб ее создать переходим в режим правки -> Редактировать страницу в визуальном редакторе:

Идем в Компоненты -> Служебные -> Включаемые области -> Вставка включаемой области:

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

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

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

После создания включаемой области в корне сайта появится файлик в котором лежит содержимое нашей области. В названии будет фигурировать префикс который мы указали создавая область. То есть, если вы в поле префикса вписали например test, то файл вашей области будет называться sect_test.php.

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

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

Если в Битрикс вы хотите вставить дополнительные области, это можно сделать через редактор, но нужно знать и код. специально для любознательных. давайте разбираться.

Вставка включаемой области (это они так назвали), то есть дополнительная какая-либо включаемая область текста например.

Вставка дополнительного файла на странице:

IncludeComponent(
"bitrix:main.include",
"",
Array(
"AREA_FILE_SHOW" => "file",
"PATH" => SITE_TEMPLATE_PATH."/include/company.php"
)
);?>

Тут мы видим, что подключается файл из папки include прямо на страницу. Вот такой вот незамысловатый код.

Функция подключения компонента

$APPLICATION->IncludeComponent(
componentName, // тут имя компонента
componentTemplate, // шаблон компонента, если "" то это означает пустая строка и шаблона подставляется с названием .default
arParams=array(), // параметры компонента
parentComponent=null,
arFunctionParams=array()
);

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

IncludeComponent(
"bitrix:main.include",
"",
Array(
"AREA_FILE_SHOW" => "sect",
"AREA_FILE_SUFFIX" => "inc",
"AREA_FILE_RECURSIVE" => "Y",
"EDIT_MODE" => "html",
"EDIT_TEMPLATE" => "" //
),
false
);?>

AREA_FILE_RECURSIVE — рекурсивное подключение (Y,N)
EDIT_MODE — режим редактирования (html, php)
EDIT_TEMPLATE — шаблон области по умолчанию, должен лежать в директории page_templates шаблона сайта

Включаемая область для страницы

IncludeComponent(
"bitrix:main.include",
"",
Array(
"AREA_FILE_SHOW" => "page",
"AREA_FILE_SUFFIX" => "inc",
"EDIT_MODE" => "html",
"EDIT_TEMPLATE" => ""
),
false
);?>

Включаемый файл шаблона

Подключается file.php из шаблона

Цепочка навигации

IncludeComponent(
"bitrix:menu",
"horizontal_multilevel",
array(
"ROOT_MENU_TYPE" => "left",
"MENU_CACHE_TYPE" => "N",
"MENU_CACHE_TIME" => "3600",
"MENU_CACHE_USE_GROUPS" => "Y",
"MENU_CACHE_GET_VARS" => array(),
"MAX_LEVEL" => "1",
"CHILD_MENU_TYPE" => "left",
"USE_EXT" => "N",
"ALLOW_MULTI_SELECT" => "N"
),
false
);?>

ROOT_MENU_TYPE — тип меню верхнего уровня
CHILD_MENU_TYPE — тип меню остальных уровней
MAX_LEVEL — максимальный уровень вложенности

Вертикальное меню

IncludeComponent(
"bitrix:menu",
"vertical_multilevel",
array(
"ROOT_MENU_TYPE" => "left",
"MENU_CACHE_TYPE" => "N",
"MENU_CACHE_TIME" => "3600",
"MENU_CACHE_USE_GROUPS" => "Y",
"MENU_CACHE_GET_VARS" => array(),
"MAX_LEVEL" => "1",
"CHILD_MENU_TYPE" => "left",
"USE_EXT" => "N",
"ALLOW_MULTI_SELECT" => "N"
),
false
);?>

IncludeComponent(
"bitrix:system.auth.form",
"",
Array(
"REGISTER_URL" => "",
"PROFILE_URL" => "",
"SHOW_ERRORS" => "N"
),
false
);?>

REGISTER_URL — путь к странице регистрации
PROFILE_URL — путь к странице профиля пользователя

Форма поиска

PAGE — путь к странице поиска

Список новостей

DISPLAY_DATE — показывать дату (Y,N)
DISPLAY_NAME — показывать название (Y,N)
DISPLAY_PICTURE — показывать картинку анонса (Y,N)
DISPLAY_PREVIEW_TEXT — показывать анонс (Y,N)
NEWS_COUNT — количество выводимых новостей

Новостная лента

IncludeComponent(
"bitrix:news.line",
"",
Array(
"IBLOCK_TYPE" => "news",
"IBLOCKS" => "",
"NEWS_COUNT" => "20",
"FIELD_CODE" => "",
"SORT_BY1" => "ACTIVE_FROM",
"SORT_ORDER1" => "DESC",
"SORT_BY2" => "SORT",
"SORT_ORDER2" => "ASC",
"DETAIL_URL" => "",
"ACTIVE_DATE_FORMAT" => "d.m.Y",
"CACHE_TYPE" => "A",
"CACHE_TIME" => "300"
),
false
);?>

DETAIL_URL — путь к странице детального просмотра, по умолчанию берется из настроек инфоблока
NEWS_COUNT — количество выводимых новостей

Включаемая область - это специально выделенная область на странице сайта, которую можно редактировать отдельно от основного содержания страницы. Реализуется с помощью специального программного компонента.

Зачем нужна включаемая область

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

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

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

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

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

Управление включаемыми областями

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

Появилась форма с параметрами компонента, и давайте пробежимся по ее настройкам:

Вернем наши настройки в исходные параметры страницы и сохранимся.

Для того что бы отобразилась у нас включаемая область включим режим правки.

Появилась такая иконка символизирующая что тут она присутствует.

Для примера вставим компонент Случайно фото, и настроим на вывод из инфоблока новостей. Сохранимся, в разделе test появился файл index_inc.php с компонентом случайное фото.

Установка включаемой области в шаблон сайта

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

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

Подключение включаемой области для раздела

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

Как видите, включаемая область отображается только в разделе Контакты.

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

В предыдущей части Хабраюзер Mirantus сверстал шаблон Corporate Blue от студии Pcklaboratory с помощью Bootstrap 3.

Для данной статьи мы воспользуемся одним из форков репозитория на GitHub, приведённого в конце предыдущей статьи, поскольку в нём были исправлены некоторые баги.

Создание каркаса шаблона

Шаблон сайта с точки зрения 1С-Битрикс – это папка с набором определённых файлов внутри, поэтому шаблон может быть создан как через файловую структуру (инструментами 1С-Битрикс, по FTP или SSH), так и с помощью раздела.

Первым делом создадим в папке /bitrix/templates/ раздел, название которого в дальнейшем будет использоваться в качестве ID нашего шаблона, например whitesquare-bootstrap (в дальнейшем в рамках статьи мы будем всегда по умолчанию подставлять именно это значение в качестве ID шаблона).
Перенесём в папку шаблона общие ресурсы (JS, CSS, изображения, шрифты) из шаблона страницы:

/bitrix/templates/whitesquare-bootstrap/header.php
/bitrix/templates/whitesquare-bootstrap/footer.php

(это будет пример рабочей страницы на котором мы будем проверять работоспособность нашей рабочей области) в котором помимо Html разметки мы добавим вызов header’а и footer’а (они создадутся автоматически, если создавать страницу средствами 1С-Битрикс):

Элементы 1С-Битрикс

Фактически мы создали статичный HTML каркас с минимальным набором элементов 1С-Битрикс, который уже работает.
Дальнейшая наша задача – перевод отдельных функциональных блоков на работу с компонентами 1С-Битрикс.

Компоненты 1С-Битрикс

В рамках данной статьи мы остановимся только на процессе интеграции вёрстки со стандартными компонентами 1С-Битрикс. Мы не будем создавать свои компоненты и не будем кастомизировать типовые.

Мы создадим отдельную страницу (например, 1.php) на которой будем размещать по 1 компоненту для упрощения работы средствами 1С-Битрикс.

Разместим компонента (например, форму поиска — bitrix:search.form) с помощью визуального редактора:

Используя включенный режим правки скопируем шаблон компонента в шаблон сайта. Для этого наведём курсор мыши на область с компонентом, дождёмся пока появится контекстное меню с шестерёнкой и нажмём на стрелку выпадающего списка:

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

В результате наших действий в Шаблоне компонента /bitrix/templates/whitesquare-bootstrap/ появилась ещё одна папка – components – в ней будут находиться шаблоны всех компонентов, используемых в рамках шаблона сайта.
Первый появившийся шаблон компонента будет расположен по адресу /bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/
Опытные разработчики могут сразу создавать шаблон компонента, копируя его в шаблон сайта из компонента.

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

Включаемые области (лого, копирайт, соц сети)

Компонент включаемой области позволяет вложить внутрь себя любой текст, HTML или php код, а так же другие компоненты и вывести этот контент для определённой страницы, раздела или везде, где вызывается включаемая область.
Для всех указанных выше объектов мы считаем рациональным использование включаемой области с целью вынести эти блоки из шаблона. Т.е. для их редактирования по прежнему необходимо будет владеть минимумом познаний в HTML.
Профессионалы могут возразить, что для блока с кнопками соц сетей следовало бы сделать свой компонент, однако нам это кажется не рациональным. Проще загнать этот блок за 10 минут во включаемую область и отредактировать при необходимости, ведь адрес сообщества Facebook не меняется каждый день!

/bitrix/templates/whitesquare-bootstrap/include/bottom-logo.php
/bitrix/templates/whitesquare-bootstrap/include/copyright.php
/bitrix/templates/whitesquare-bootstrap/include/social-networks.php
/bitrix/templates/whitesquare-bootstrap/include/top_logo.php

Внутри файла включаемой области просто помещаем кусок HTML кода:

Мы не будем в данной статье рассматривать вопрос интеграции Twitter Ленты, поскольку самое простое решение – положить виджет твиттера во включаемую область, аналогично описанным выше решениям.
Так же в Marketplace 1С-Битрикс хватает компонентов, выводящих твиттер ленту, которыми вы так же можете воспользоваться.

Форма поиска

Мы воспользовались компонентом bitrix:search.form и скопировали suggest шаблон компонента в шаблон сайта.
HTML код шаблона компонента находится в файле /bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/template.php

Как видим, у нас не простой, а комплексный компонент (т.е. компонент в состав которого входят другие компоненты). В данном случае это сама форма в которую производится ввод поискового запроса.
Скопируем её шаблон в шаблон сайта.
К сожалению, это не очень красиво – в публичке мы используем 1 компонент, а шаблонов у нас 2. Воспользуемся обычной схемой для комплексных компонентов:

Комплексный компонент

Создадим в папке /bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/ папку bitrix
Переместим шаблон компонента /bitrix/templates/whitesquare-bootstrap/components/bitrix/search.suggest.input/ в /bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/bitrix/. Таким образом получив:
/bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/bitrix/search.suggest.input/top/
В параметрах компонента bitrix:search.suggest.input укажем шаблон top:

Вернёмся к форме поиска

/bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/template.php
/bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/bitrix/search.suggest.input/top/template.php
Как вы можете видеть, мы заменили фразы “GO” и “Search” в компонентах на вызов GetMessage – таким образом, мы вынесли фразы в языковые файлы и можем задать разные значения для русского и английского сайтов, использующих общий шаблон и общий компонент.

/bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/bitrix/search.suggest.input/top/lang/ru/template.php
/bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/bitrix/search.suggest.input/top/lang/en/template.php
/bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/lang/ru/template.php
/bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/lang/en/template.php

Верхнее меню

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

Для создания верхнего меню воспользуемся компонентом bitrix:menu. Скопируем шаблон .default этого компонента в шаблон нашего сайта под именем top. Он практически не содержит ничего лишнего, поэтому мы легко адаптируем его под нашу вёрстку:

Теперь заменим блок верхнего меню в шаблоне на вызов компонента меню:

Левое меню

Аналогично верхнему меню возьмём за основу компонент компонентом bitrix:menu. Скопируем шаблон .default этого компонента в шаблон нашего сайта под именем left.
После правки шаблона получим:

Заменим блок левого меню в шаблоне вызовом компонента:

Пользуясь тем, что в 1С-Битрикс меню наследуется мы можем положить файлы левого меню .left.menu.php во все разделы, где они нужны с разным содержимым, а в корне, например, вовсе убрать. Вёрстка не пострадает, а меню будет отображаться лишь там, где это необходимо.

Нижнее меню

Нижнее меню (в разделе SiteMap) отображается в 2 колонки. Можно конечно сделать универсальный компонент меню в шаблоне которого пункты будут делиться по столбцам (автоматически, либо по наличию какого-либо параметра, установленного для пунктов в режиме расширенного редактирования меню).
Однако, мы понимаем, что подвал – не самая часто редактируемая часть и нет смысла тратить значительные усилия на его разработку.
Поэтому мы пойдём по простому пути (за который любители идеального кода, вероятно, нас проклянут) – мы создадим 2 меню: bottomL и bottomR.
Несмотря на то, что меню будет 2 шаблон мы для них будем использовать 1.

Вновь возьмём за основу компонент компонентом bitrix:menu. Скопируем шаблон .default этого компонента в шаблон нашего сайта под именем bottom.
Шаблон:

Сайдбар – наши офисы

Честно говоря без демо контента не понятно какую функцию оный сайдбар выполняет. Рискнём предположить, что всё-таки в нём показывается не картинка (уж больно несовременно), а полноценная карта Google. Наверное она маловата, чтобы располагать на ней элементы управления, так что она будет манималистичной.
Если же я не прав, то пожалуй один из самых простых способов реализации сайдбара – включаемая область, о которых мы уже говорили.
Возьмём компонент bitrix:map.google.view и скопируем шаблон .default в шаблон сайта, переименовав в sidebar-map.
Мы весь сайдбар сделаем частью компонента, включая заголовок. А значит, чтобы упростить работу редакторов необходимо вынести текст заголовка в параметры компонента.
Создадим в шаблоне компонента файл .parameters.php следующего содержания:

RU (/bitrix/templates/whitesquare-bootstrap/components/bitrix/map.google.view/sidebar-map/lang/ru/.parameters.php):
EN (/bitrix/templates/whitesquare-bootstrap/components/bitrix/map.google.view/sidebar-map/lang/en/.parameters.php):

Шаблон компонента в таком случае модифицируется совсем незначительно (поместим карту внутрь сайдбара и добавим заголовок):
'; $APPLICATION->IncludeComponent('bitrix:map.google.system', '.default', $arTransParams, false, array('HIDE_ICONS' => 'Y')); ?>

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

Теперь пришла пора взяться за рабочую область!

Список членов команды

Может показаться, что на этом этапе нам подойдёт компонент catalog.section с шаблоном board (этот шаблон генерирует таблицу с заданным количеством столбцов), однако в процессе эксплуатации такое решение весьма вероятно окажется сложнее. Поэтому мы всё же воспользуемся bitrix:news.list (скопировав шаблон .default в шаблон сайта под именем team-list) и допишем немного собственного кода.
Добавим в .parameters.php нашего шаблона новое значение:

Не забудем добавить значения в языковые файлы!

Теперь возьмёмся за шаблон компонента. Тут нам понадобится простенький счётчик, который будет закрывать строчные блоки row и ставить отступ для 2,3,4 и 5 блоков в одной строке.

Сам шаблон тогда будет выглядеть так:

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

Не забудьте удалить ненужную более папку /bitrix/templates/whitesquare-bootstrap/images/team/ с картинками в шаблоне после перевода блока с персонами на инфоблок!

Текст страницы ABOUT

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

Наводим марафет

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

/bitrix/templates/whitesquare-bootstrap/lang/ru/page_templates/.content.php
/bitrix/templates/whitesquare-bootstrap/lang/ru/page_templates/.content.php

Описание — description.php в корне шаблона
Скриншот — screen.jpg в корне шаблона

Вот собственно и всё!

Мы натянули готовую HTML вёрстку Bootstrap на 1С-Битрикс, сверстали страницу и получили полноценный шаблон!

Читайте также: