Modal Popup – gotowe rozwiązanie na popupa w Magento 2

Popup element, który występuję praktycznie na każdej witrynie internetowej 🙂 Magento 2 w standardzie ma załączoną całą masę przydatnych wtyczek za pomocą, których możemy upiększać UX w naszym e-commerce. Jedną z takich natywnych wtyczek jest modal, służący do tworzenia popupów czy to od strony frontu czy od strony admina jako dodatkowe elementy modułu. Ale do rzeczy, poniższy kod służy do zainicjowania popupu po kliknięciu w dany element.

<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function(
            $,
            modal
        ) {
            var options = {
                type: 'popup',
                responsive: false,
                innerScroll: true,
                title: 'tytuł naszego popupa',
               
            };

            $(".element-klikany").click(function() {

                $(".element-otwierany").modal(options).modal('openModal');

            });
        }
    );
</script>

Na zakończenie wystarczy wystylizować naszego popupa za pomocą styli css. Modal jest dość uniwersalnym elementem, który można wykorzystać do tworzenia customowych komunikatów na naszej witrynie lub włożyć do niego np. formularz logowania itp.