Телеграм: @bazarow_ru Почта: mihail@bazarow.ru

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

Просмотров: 3204

Если вы хотите сделать подгрузку любой страницы сайта в боковой слайдер, для этого в битриксе есть метод 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: скорость выезда панели в миллисекундах
Vlad 25.05.2022
Этим методом можно сделать быстрый просмотр карточки товара из catalog.section?
Михаил Базаров 26.05.2022
Цитата
Vlad написал:
Этим методом можно сделать быстрый просмотр карточки товара из catalog.section?

В принципе да. Использовать ID товара в качестве связки с детальной карточкой.
Гость 26.05.2022
В документации Битрикс написано:
"Слайдер выезжает справа налево, занимая все пространство сверху донизу".
Так только, без вариантов? Например по центру всплывать никак?
Михаил Базаров 28.05.2022
Цитата
Гость написал:
В документации Битрикс написано:
"Слайдер выезжает справа налево, занимая все пространство сверху донизу".
Так только, без вариантов? Например по центру всплывать никак?

Не ковырял его в эту сторону. Но, если потратить время думаю можно унаследоваться от этого модуля и кастомизировать css ки
Гость 27.11.2022
Пробовал подключить, но на редакции Старт не работает.

В header: <?
if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true)
{
   die();
}
CJSCore::Init("sidepanel");
?>
Шапку и подвал обернул.
В подвале в самом низу скрипт  : <script>$('.show_panel').click(function () {

   BX.SidePanel.Instance.open("/test2/", {
       requestMethod: "post",
       width: 500,
       cacheable: true,
       mobileFriendly: true,
       allowChangeHistory: false,
       label: {
           text: "Закрыть панель",
           color: "#FFFFFF",
           bgColor: "#E2AE00",
           opacity: 80
       },
   });

});
</script>
На тестовой странице вывел кнопку: <button class="show_panel">Показать панель</button>

Жму на кнопку и ничего не присходит. Может из-за редакции Старт не работает?
Михаил Базаров 27.11.2022
Да, наверное в этой редакции нет этого расширения. Не знаю с какой появляется.

Записная книжка разработчика

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

Постраничная навигация в списке разделов Битрикс- catalog.section.lis... Просмотров: 9935 Если в магазине очень много разделов и хочется вывести их с постраничной навигацией: можно... Как вывести картинки к разделам на базе _ext меню Просмотров: 7642 Просто для эстетической красоты, нужно вывести в меню разделов сайта картинки или иконки. ... Автоматически помечаем новинки лейблом в каталоге битрикс Просмотров: 6019 Если вы хотите помечать новинки каталога, вашего магазина на Битрикс, лейблом "Новинка". И... Добавить все свойства инфоблока в умный фильтр одним разом Просмотров: 11239 Если у вас достаточно много свойств, в инфоблоке с товарами, например: больше 1000-чи, пос... Показать только один тип цены в каталоге Битрикс Просмотров: 14955 Достаточно часто, при создании сайта на битрикс, можно столкнуться с такой проблемой: на с... FTP доступ на Виртуальной машине Битрикс Просмотров: 17248 Бывает что нужно открыть FTP доступ к заранее известной папке на сайте под управлением 1С ... XML в формате Commerce ML-2, города России и Мира, для выгрузки в инф... Просмотров: 6961 Подвернулась задачка, создать инфоблок для Битрикс, в котором будут просто города России и... Фиксированная корзина с обновлением, без перезагрузки страницы. Просмотров: 18455 Иногда нужно сделать так, чтобы корзина в интернет магазине, созданном на Битрикс, была по... Добавить свойство в административную форму заказа Просмотров: 3759 Задача, кастомизировать административную форму заказа: добавить свойство заказа в шапку фо... Индивидуальные цены в 1С-Битрикс: в каталоге и при оформлении заказа Просмотров: 6057 В этой заметке постараюсь описать процесс реализации индивидуальных цен, для пользователей... Вывести разделы инфоблока в которых находится элемент Битрикс Просмотров: 17017 Если нужно в карточке товара или новости, вывести структуру разделов в котором находится э... Правильное подключение стилей и скриптов в Битрикс Просмотров: 85231 Есть несколько способов подключения файлов стилей и скриптов, при верстке шаблонов в систе... Быстрая отписка от всех рассылок модуля "E-mail маркетинг", в кабинет... Просмотров: 277 Задача: дать пользователям возможность отписаться от всех рассылок "E-mail маркетинга", не... Оптимизация jpeg и png картинок на cron, с помощью jpegoptim и optipn... Просмотров: 2278 Задача: на сайт каждый день проходит выгрузка из 1С с обновлением картинок. Нужно оптимиз... Удалить товары из корзины, если есть определенные товары. Просмотров: 1915 Задача: если в корзину добавлены товары с определенным свойством, нужно удалить из корзины... Установить остатки товара на складе из доступных остатков. Просмотров: 6229 Задача, заполнить остатки товаров, в 1С-Битрикс, из параметра "Доступное количество". Показ страницы сайта в боковом слайдере, на примере всплывающей формы... Просмотров: 3205 Если вы хотите сделать подгрузку любой страницы сайта в боковой слайдер, для этого в битри... Вывести новости из конкретного раздела инфоблока Битрикс Просмотров: 55238 Бывает что требуется вывести конкретные новости или статьи из одного раздела инфоблока в Б... Сгенерировать скидочные купоны, при заказе и отправить на почту Просмотров: 1698 Задача: после того как пользователь сделал заказ, нужно сгенерировать одноразовые купоны д... Привязка к разделам в компоненте "Добавления элементов пользователем" Просмотров: 12804 В системе управления 1С Битрикс есть компонент "Форма добавления / редактирования" - котор...