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). Definicja znajdująca się w tym pliku, jest o jeden poziom abstrakcji wyżej niż standardowa inicjalizacja modułów JS:

checkout magento 2 - Grupa Unity

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:

checkout magento 2 - Grupa Unity

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

checkout magento 2 - Grupa Unity

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:

checkout magento 2 - Grupa Unity

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:

checkout magento 2 - Grupa Unity

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:

checkout magento 2 - Grupa Unity

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