Offcanvas - выезжающие панели

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

Что такое offcanvas?

Offcanvas - это выезжающая панель сверху, слева, снизу или справа. Например: мобильное меню сайта и панель управления темой дизайна сделаны на offcanvas.

Подробное о компоненте

Пример

Приведем пример панели, которая будет открывать при нажатии на ссылку.

HTML разметка модального окна

Для размещения окна на сайте мы создадим блок в приложении Сайт-Блоки site.seller_html и разместим там код:

<div class="offcanvas offcanvas-end" tabindex="-1" id="myCustomOffcanvas" aria-labelledby="myCustomOffcanvasLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="myCustomOffcanvasLabel">Hello world</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        Offcanvas content
    </div>
</div>

Стоит обратить внимание на id="myCustomOffcanvas" - именно с этим id элемента мы будем работать и дальше.

JS код для активации окна

Для того, чтобы окно открывалось по ссылке у элемента a или по классу у любого элемента, например, button, нам необходимо добавить код в блок site.seller_js:

{literal}
<script>

    //
    // CUSTOM MODALS
    //

    $(document).ready(function() {
        var modals = ["myCustomOffcanvas"];
        for (const modal of modals) {
            var $modal = $(`#${modal}`);
            if ($modal.length) {
                new window.waTheme.init.site.BootstrapOffcanvas({
                    $wrapper: $modal,
                    modal_id: modal
                });
            }
        }
    });

    //
    // END CUSTOM MODALS
    //

</script>
{/literal}

Теперь в любом месте шаблона вы можете вызвать модально окно по ссылке #myCustomOffcanvasShow или классу myCustomOffcanvasShow.

Если вы хотите активировать несколько окон, то в переменную modals добавьте элементы массива:

var modals = ["myCustomOffcanvas", "myDeliveryOffcanvas", "myPaymentOffcanvas"];