Как этим воспользоваться? Покажу на примере: мне на сайте (на этом сайте, на котором вы находитесь) нужно было сделать боковую панель с формой обратной связи, которая должна открываться при клике по кнопке или ссылке. При этом, эта же форма доступна на отдельной странице сайта.
Пример использования:
Чтобы не плодить одинаковую форму и просто вызывать ее при клике на кнопке, пригодится метод BX.SidePanel.Instance.open.
У заметки есть аналог: Показ контента любой страницы сайта во всплывающем окне
Настройка шаблона сайта для боковой панели
Итак: если мы просто воспользуемся этим методом, в нашу боковую панель будет подгружена страница целиком — вместе с шапкой и футером сайта. А нам нужно показывать только контент страницы, исключая ненужные части.
Самый простой способ — добавить в шаблон сайта проверку: не открыта ли страница в боковой панели (по сути, в iframe). Для этого вставьте следующий код в header.php (до начала верстки шапки):
if (isset($_REQUEST["IFRAME"]) && $_REQUEST["IFRAME"] === "Y") {
$isInFrame = true;
}
Затем оберните верстку шапки и футера (и всё, что не нужно показывать в боковой панели) в условие:
<?php if (!isset($isInFrame)) { ?>
...
Верстка шапки
...
<?php } ?>
WORKAREA
<?php if (!isset($isInFrame)) { ?>
...
Верстка футера
...
<?php } ?>
Таким образом, переменная $isInFrame будет создаваться только при открытии в боковой панели, и мы не будем добавлять ненужные участки верстки, если эта переменная установлена.
PS: Есть ещё один способ реализовать подобный функционал без внесения изменений в шаблон сайта. Он требует создания собственного компонента и вывода его на соответствующих страницах, что кажется избыточным, если таких страниц много. Об этом расскажу позже, в следующих заметках.
Работа с методом BX.SidePanel.Instance.open
Теперь выведем боковую панель, которая будет открываться по клику на кнопку. Для этого создадим кнопку в нужном месте:
<button class="show_panel">Показать панель</button>
Подключите сценарии боковой панели в header.php:
CJSCore::init("sidepanel");Затем добавьте скрипт, который при клике по кнопке откроет боковую панель и подгрузит в нее нужную страницу сайта:
$('.show_panel').click(function () {
BX.SidePanel.Instance.open("/ССЫЛКА_НА_СТРАНИЦУ_ДЛЯ_ПАНЕЛИ/", {
requestMethod: "post",
width: 500,
cacheable: true,
mobileFriendly: true,
allowChangeHistory: false,
label: {
text: "Закрыть панель",
color: "#FFFFFF",
bgColor: "#E2AE00",
opacity: 80
},
});
});
На этом всё: панель заработает с заданными настройками. Ниже приведены некоторые параметры её кастомизации:
- requestMethod: метод передачи данных (например, GET или POST). Чтобы страницы не занимали много места, советую использовать POST.
- width: ширина панели, если она помещается на экране.
- cacheable: true или false. Если true, панель не исчезает после закрытия и вызовается заново с тем же контентом.
- mobileFriendly: если контент не помещается по ширине, сжимается так, чтобы полностью поместиться.
- allowChangeHistory: true или false. Если true, панель меняет URL-адрес страницы в адресной строке.
- allowChangeTitle: true или false. Если true, меняется заголовок панели.
- loader: можно указать URL на SVG-спиннер (показывается во время загрузки).
- label: управление кнопкой или окном закрытия: название, цвет, прозрачность. По умолчанию — синий с крестиком.
- animationDuration: скорость анимации появления панели в миллисекундах.
Вызов боковой панели с помощью wrapper-компонента
Можно избежать внесения изменений в шаблон сайта, используя компонент-обертку.
Для этого на странице, которую планируем открыть в боковой панели, добавьте следующий вызов компонента:
$APPLICATION->IncludeComponent(
'bitrix:ui.sidepanel.wrapper',
'',
[
'POPUP_COMPONENT_NAME' => 'bitrix:имя_компонента_обратной_связи',
'POPUP_COMPONENT_TEMPLATE_NAME' => 'шаблон_компонента',
'POPUP_COMPONENT_PARAMS' => [
// Передавайте параметры компонента (например, формы обратной связи)
...
],
// 'NOTIFICATION' => 'Успешно сохранено!', (по желанию)
]
);Смысл в том, что при вызове страницы через этот компонент в iframe внутри боковой панели отображается только указанный компонент, а остальная часть сайта — скрыта.