W szablonie graficznym Seller istnieje możliwość tworzenia własnych wysuwanych paneli.

Co to jest offcanvas?

Offcanvas to wysuwany panel z góry, z lewej, z dołu lub z prawej strony. Na przykład: mobilne menu witryny i panel zarządzania szablonem graficznym są zbudowane przy użyciu offcanvas.

Szczegóły dotyczące komponentu

Przykład tworzenia wysuwanego panelu.

Poniżej przykład panelu, który będzie otwierany po kliknięciu w link.

HTML znacznik okna modalnego

Aby umieścić okno na witrynie, utworzymy blok w aplikacji "Witryna -> Bloki" site.seller_html i wstawimy tam kod:

<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>

Zwróć uwagę na id="myCustomOffcanvas" – to właśnie z tym id będziemy dalej pracować.

Kod JS do aktywacji okna.

Aby okno otwierało się po kliknięciu wg linku w tagu a lub klasę dowolnego elementu, np. button, należy dodać kod do bloku 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}

Teraz w dowolnym miejscu szablonu możesz wywołać okno modalne poprzez link #myCustomOffcanvasShow lub klasę myCustomOffcanvasShow

Jeśli chcesz aktywować kilka okien, dodaj je jako elementy tablicy do zmiennej modals: 

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