Если вы хотите сделать подгрузку любой страницы сайта в боковой слайдер, для этого в битриксе есть метод BX.SidePanel.Instance.open.
Метод открывает в слайдере страницу с указанным адресом в параметре url. Возвращает true, если слайдер успешно открылся, иначе false.
Как им воспользоваться покажу на примере: мне на сайте (на этом сайте, на котором вы находитесь) нужно было сделать боковую панель с формой обратной связи. Которая должна открываться при клике по кнопке или ссылке. При этом, эта же форма доступна на отдельной странице сайта. Пример использования: Кликните сюда
Что бы не плодить форму а просто вызывать ее, при клике на кнопку, с этой самой страницы и пригодился метод BX.SidePanel.Instance.open
Настройка шаблона сайта для боковой панели
Итак: если мы просто воспользуемся методом, в нашу бокувую панель подгрузится страница целиком- вместе с шапкой и футером сайта. Мы же хотим, показать только контент страницы, выкинув из нее не нужные данные.
Самый простой способ: добавить в шаблон сайта проверку: не открыта ли страница в боковой панели (по факту, в IFRAM-е). Добавляем вот такой код в header.php (до начала верстки шапки):
if (isset($_REQUEST["IFRAME"]) && $_REQUEST["IFRAME"] === "Y") {
$isInFrame = true;
}
И дальше, просто обворачиваем верстку шапки и футера (и всего, что не нужно показывать в боковой панели) в условие:
<? if (!isset($isInFrame)) {?>
...
Верстка шапки
...
<?}?>
WORKAREA
<? if (!isset($isInFrame)) {?>
...
Верстка футера
...
<?}?>
Таким образом, переменная $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- но для страниц с не большим количеством контента.
- width: ширина панели, если помещается
- cacheable: true или false. Если true то панель не "умирает" после закрытия и вызывается сразу. Но с тем же контентом.
- mobileFriendly: если не помещается по ширине то сжимается так, что бы поместиться.
- allowChangeHistory: true или false. Если true то панель меняет адрес страницы.
- allowChangeTitle: true или false. Если true то панель меняет заголовок страницы.
- loader: можно указать url на svg файл со своим спиннером (показывается во время подгузки панели)
- label: управление кнопкой/этикеткой закрытия: название, цвет, прозрачность. Можно не указывать, будет синий с крестиком.
- animationDuration: скорость выезда панели в миллисекундах
