Podczas developmentu sklepów Magento często przytrafia się taka sytuacja, że trzeba dodać drobną zmianę w logice działania uiComponentu np. zmienić jedną metodę.

Przykład z życia

Chcę na pierwszym kroku checkoutu (shipping) zobaczyć podsumowanie kosztów a głupie Magento pokazuje je dopiero na drugim kroku (payment). Co ciekawe na koszyku, który jest jakby krokiem „zero” – jest przed checkoutem takie podsumowanie kosztów widoczne.

Jeśli masz jakieś wytłumaczenie dlaczego na koszyku jest, na pierwszym kroku checkoutu nie ma, a na drugim znów jest to napisz w komentarzu!

Magento 2: Brak podsumowania kosztów
Jak widzisz w sekcji „Order summary” podsumowanie kosztów jest niewidoczne.

Diagnoza

Zajrzyj do pliku vendor/magento/module-checkout/view/frontend/web/js/view/summary/abstract-total.js. Jest tam metoda isFullMode, która prezentuje się tak:

Co robi ten kodzik?

  1. Jeśli nie zwrócisz mi Totals to ja zwracam false
  2. Jeśli zwrócisz mi totalsy to ja sprawdze, czy krok shipping był już procesowany i i zwrócę true jeśli tak

Teraz zobacz na plik vendor/magento/module-checkout/view/frontend/web/js/view/summary/totals.js

Ten komponent dziedziczy po abstract-total  i ma w sobie metodę isDisplayed, która prezentuje się tak:

Czyli ta metoda zwraca wynik AbstractTotal.isFullMode. Dlaczego to jest tak zrobione? Nie wiem i myślę, że ten kto to pisał też nie wie.

Finalne roztrzygnięcie

Teraz zajrzyj do templatki vendor/magento/module-checkout/view/frontend/web/template/summary/totals.html 

Jak to działa?

  1. Wywołuję isDisplayed()
  2. Metoda isDisplayed wywołuje metodę isFullMode z komponentu-rodzica
  3. Jeśli z jakiegoś powodu totals jest undefinded to metoda zwraca false i podsumowanie kosztów się nie pokaże
  4. Jeśli jesteśmy na kroku dalszym niż shipping to metoda zwróci true i podsumownie się pokaże

Recepta na sukces

Tak sobie myślę, ze jakby zmienić ta metode isFullMode tak aby nie sprawdzała na którym kroku checkoutu jesteśmy to może to podsumowanie się pokaże? Sprawdziłem i… to działa!

Zmieniona metoda wyglądałaby tak:

albo jeszcze prościej:

Jak nadpisać tą metodę?

Teraz zastanawiasz się się jak to nadpisać. Jeśli znasz trochę Magento to pewnie wiesz, że najłatwiejszym sposobem jest nadpisanie tego pliku abstract-total.js w szablonie, czyli wrzucenie go całego i zmianę tej metody, ale to jest badzo kiepski pomysł. Staraj się unikać nadpisywania całych plików. Magento ma mechanizmy żeby robić to w elegancji sposób, a tymi mechanizmami są: Mixiny

Mixinów można używać w różny spósób. Dzisiaj pokazuję na tym konkretnym przykładzie.

Deklaracja mixinu

Pierwsze co musisz zrobić to zadeklarować mixin w pliku requirejs-config

Kod mixinu

Teraz podsumowanie kosztów powinno się pokazać na pierwszym kroku checkoutu:

Po dodaniu mixina podsumowanie kosztów jest widoczne w sekcji „Order Summary”

Podsumowanie

Na tym prostym przykładzie pokazałem jak za pomoca mixinów można rozszerzać uiComponenty. Z tego artykułu zapamiętaj szczególnie to, że jak chcesz rozszerzyć jakiś komponent to musisz wystrzegać się nadpisywania całych plików. Zaoszczędzi Ci to wielu problemów np. przy aktualizacji Magento do nowszej wersji. Poza tym Twój kod będzie bardziej czytelny dla innych.

Żródła

https://alanstorm.com/the-curious-case-of-magento-2-mixins/

https://devdocs.magento.com/guides/v2.3/javascript-dev-guide/javascript/js_mixins.html