Checkout Magento 2 – jak wprowadzić zmiany?

Checkout w Magento 2 jest jednym z bardziej skomplikowanych pod względem kodu i ewentualnych modyfikacji elementem systemu. Każdy, kto zaczyna pracę z Magento 2 prędzej czy później spotka się z koniecznością modyfikacji tej części sklepu. Do pełnego zrozumienia jak działa Checkout, konieczne będzie wcześniejsze zaznajomienie się z Knockout.js (w szczególności z przetwarzaniem szablonów HTML) oraz ze sposobem inicjalizacji modułów JS w Magento 2.


Sposób renderowania Checkout Magento 2

Strona procesu zakupowego w Magento 2 złożona jest z szeregu komponentów Knockout.js, których konfiguracja i sposób ładowania został zdefiniowany w jednym pliku XML (plik ten zależy od sposobu instalacji naszej instancji Magento 2 w /app/code/Magento/Checkout/view/frontend/layout/checkout_index_index.xml lub /vendor/magento/module-checkout/view/frontend/layout/checkout_index_index.xml). Definicja znajdująca się w tym pliku, jest o jeden poziom abstrakcji wyżej niż standardowa inicjalizacja modułów JS:

<script type="text/x-magento-init">
(...)
</script>

Wspomniany XML jest konwertowany do JSONa, a następnie przekazywany do corowego modułu JS, który odpowiada za załadowanie wszystkich zdefiniowanych przez nas w pliku XML komponentów.

Budowa pliku checkout_index_index.xml

Plik konfiguracji Checkout na pierwszy rzut oka może wydawać się dosyć skomplikowany (ma blisko 500 linii), jednak po rozpoznaniu elementów z jakich jest budowany, jego czytanie staje się znacznie łatwiejsze. Najważniejszym węzłem jest węzeł, w którym znajduje się konfiguracja dla wszystkich komponentów:

<item name="components" xsi:type="array">
(...)
</item>

Sekcja ta składa się z szeregu zagnieżdżonych definicji pojedynczych komponentów. Definicja pojedynczego komponentu wygląda następująco:

<item name="(...)" xsi:type="array">
  <item name="sortOrder" xsi:type="string">(...)</item>
  <item name="component" xsi:type="string">(...)</item>
  <item name="displayArea" xsi:type="string">(...)</item>
  <item name="children" xsi:type="array">
    (...)
  </item>
  <item name="config" xsi:type="array">
    (...)
  </item>  
</item>

W bloku obejmującym, w atrybucie name znajduje się nazwa sekcji dla danego komponentu. Wewnątrz mamy następujące elementy:

  • sortOrder: parametr określający kolejność renderowania,
  • component: alias lub ścieżka do modułu z Require.js,
  • displayArea: miejsce gdzie komponent zostanie wyrenderowany,
  • children: lista zagnieżdżonych komponentów,
  • config: parametry konfiguracyjne.

Dodanie nowego elementu na stronie procesu zakupowego

Checkout podobnie jak większość elementów w Magento 2 jest modułem. Zgodnie z zasadą stosowaną w Magento 2, dowolny moduł możemy rozszerzać na dwa sposoby – w katalogu z szablonem lub w katalogu z innym modułem. Na przykładzie modułu integracji Poczty Polskiej z Magento 2 pokażę jak dodać mapę z wyborem punktów odbioru w sekcji metod wysyłki procesu zakupowego.

Najpierw musimy zlokalizować w oryginalnym pliku checkout_index_index.xml miejsce, w którym znajduje się komponent odpowiedzialny za wyświetlanie metod dostawy. Miejsce to w drzewie zdefiniowane jest w następującej ścieżce: components > checkout > steps > shipping-step > shippingAddress. Po zlokalizowaniu stosownego miejsca, musimy w sekcji children dodać nasz nowy komponent, który będzie dziedziczył właściwości z domyślnego uiComponent:

<item name="poczta-polska-in-point" xsi:type="array">
  <item name="component" xsi:type="string">uiComponent</item>
  <item name="displayArea" xsi:type="string">shippingAdditional</item>
  <item name="children" xsi:type="array">
    <item name="poczta-polska-in-point-block" xsi:type="array">
      <item name="component" xsi:type="string">Unity_PocztaPolskaInPoint/js/view/poczta-polska-in-point</item>
    </item>
  </item>
</item>

Oprócz samej mapy, potrzebujemy również dodać miejsce, w którym wyświetlany będzie wybrany punkt odbioru, umiejscowimy go w: components > checkout > sidebar > shipping-information:

<item name="sidebar" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shipping-information" xsi:type="array">
<item name="component"
xsi:type="string">Unity_PocztaPolskaInPoint/js/view/shipping-information</item>
</item>
</item>
</item>

Dodając dowolny element w drzewie, musimy niestety zachować domyślny schemat zagnieżdżenia, przez co nasz rozszerzający plik checkout_index_index.xml staje się dosyć obszerny. Poniżej cały plik znajdujący się w katalogu z naszym modułem:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">                
            <referenceBlock name="checkout.root">
                <arguments>
                    <argument name="jsLayout" xsi:type="array">
                        <item name="components" xsi:type="array">
                            <item name="checkout" xsi:type="array">
                                <item name="children" xsi:type="array">
                                    <item name="steps" xsi:type="array">
                                        <item name="children" xsi:type="array">
                                            <item name="shipping-step" xsi:type="array">
                                                <item name="children" xsi:type="array">
                                                    <item name="shippingAddress" xsi:type="array">
                                                        <item name="component" xsi:type="string">Unity_PocztaPolskaInPoint/js/view/shipping</item>
                                                        <item name="children" xsi:type="array">
                                                            <item name="poczta-polska-in-point" xsi:type="array">
                                                                <item name="component" xsi:type="string">uiComponent</item>
                                                                <item name="displayArea" xsi:type="string">shippingAdditional</item>
                                                                <item name="children" xsi:type="array">
                                                                    <item name="poczta-polska-in-point-block" xsi:type="array">
                                                                        <item name="component" xsi:type="string">Unity_PocztaPolskaInPoint/js/view/poczta-polska-in-point</item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                    <item name="sidebar" xsi:type="array">
                                        <item name="children" xsi:type="array">
                                            <item name="shipping-information" xsi:type="array">
                                                <item name="component" xsi:type="string">Unity_PocztaPolskaInPoint/js/view/shipping-information</item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </argument>                
                </arguments>        
            </referenceBlock>             
        </referenceContainer>
    </body>
</page>

Efektem naszych zmian jest wyświetlenie mapy z punktami odbioru na stronie procesu zakupowego:

 checkout magento 2 - Grupa Unity

Podsumowanie

Zrozumienie sposobu działania strony procesu zakupowego może zająć komuś, kto nie jest zaznajomiony z Magento 2 sporo czasu, jednak wiedza ta jest konieczna do codziennej pracy nad rozbudową poszczególnych funkcjonalności. W porównaniu z Magento 1, Checkout mimo swojego skomplikowania jest wykonany znacznie lepiej. Z technicznego punktu widzenia, podział tej sekcji na komponenty przynosi dużo korzyści i pozwala na modyfikację bez łamania stosowanych powszechnie wzorców.

Napisz do nas

Potrzebujesz więcej informacji lub jesteś zainteresowany współpracą z nami? Chętnie odpowiemy na każde pytanie. Zapraszamy do kontaktu!
Pola oznaczone * są wymagane.

Więcej na naszym blogu...

Zobacz wszystkie posty