Miesiąc: luty 2017

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.

W magento 2 tak jak w przypadku magento 1, ważnym elementem jest znajomość stryktury layoutu opartego o XML, która daje możliwość kontroli i rozbudowy naszego serwisu. Pracując z magento za pomocą XMLa, poszczególne elementy sklepu możemy wyłączać, przemieszczać czy też tworzyć nowe. W tym poście chciałem chce przestawić jak przemieścić block newsletter z footera do własnego kontenera, który będzie tuż nad nim, zaczynamy. Poniżej gotowy kod do umieszczenia w naszym szablonie w pliku default.xml

<referenceContainer name="page.wrapper">
    <container name="newsletter-section" htmlTag="div" before="footer-container" htmlClass="newsletter-section">
    
    </container>
</referenceContainer>
    
<move element="form.subscribe" destination="newsletter-section" />

Nasz nowy blok ma być widoczny zawsze nad stopką dlatego najpierw wpisujemy:

 <referenceContainer name="page.wrapper">
    
 </referenceContainer>

Nowy blok ma być elementem div, ma zawierać class i być umiejscowiony na footerem

<container name="newsletter-section" htmlTag="div" before="footer-container" htmlClass="newsletter-section">

</container>

Na koniec pozostaje tylko, przemieścić blok newslettera do nowego elementu.

<move element="form.subscribe" destination="newsletter-section" />