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

Как этим воспользоваться? Покажу на примере: мне на сайте (на этом сайте, на котором вы находитесь) нужно было сделать боковую панель с формой обратной связи, которая должна открываться при клике по кнопке или ссылке. При этом, эта же форма доступна на отдельной странице сайта.
Пример использования:
Показать

Чтобы не плодить одинаковую форму и просто вызывать ее при клике на кнопке, пригодится метод 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 внутри боковой панели отображается только указанный компонент, а остальная часть сайта — скрыта.