Flexible Checkout Fields z nowym panelem administracyjnym

Wtyczka Flexible Checkout Fields przekroczyła magiczną granicę 50.000 aktywnych instalacji w repozytorium WordPress. Zgodnie z zapowiedzią prezentujemy z tej okazji wersję 3.0. Aktualizacje zazwyczaj nie są ciekawe a wszelkie zmiany przechodzą niezauważone. Nie tym razem. Nowa wersja to faktycznie nowa wersja a zmiany są widoczne zaraz po otworzeniu zakładki z ustawieniami.

Wersja 3.0 to przede wszystkim zupełnie nowa szata graficzna. Panel z ustawieniami FCF to teraz nowoczesne i wygodne w użytkowaniu centrum dowodzenia oparte o ReactJS. Jest to deklaratywna i bardzo wydajna biblioteka JavaScript do tworzenia złożonego interfejsu użytkownika.

ReactJS pozwala na tworzenie UI stosując niewielkie i odizolowane od siebie kawałki kodu – tzw. komponenty. To duże ułatwienie dla Developera. Od teraz dodawanie nowych nowych funkcji i opcji nie będzie wymagało żmudnego przepisywania istniejącego kodu. Sam kod staje się jeszcze bardziej przewidywalny i prostszy w debugowaniu.

Prostsze zarządzanie formularzem zakupu

Sensem wprowadzenia tych wszystkich zmian jest jednak ułatwienie obsługi po stronie użytkownika interfejsu.

Pełen ekran i więcej przestrzeni

Poprzedni design zajmował mniej więcej połowę ekranu. W efekcie pola i wszelkie informacje były mocno stłoczone. Panel Flexible Checkout Fields 3.0 zajmuje cały dostępny obszar. Dodatkowo zniknęły wszelkie zbędne elementy – np. niedostępne opcje jak zakładka Cena w bazowych polach WooCommerce. Pojawiły się za to ikony zastępujące tekst np. podpowiedzi lub usunięcie pola.

Ustawienia pola są teraz lepiej rozłożone w zakładkach np. opcje charakterystyczne dla danego pola znajdują się obecnie w zakładce Zaawansowane. Zarządzanie polami jest łatwiejsze niż kiedykolwiek.

Ikona z podpowiedzią (tooltip)

Użytkownik ma do dyspozycji dodatkowe informacje opisujące działanie danego ustawienia. Informacje dostępne są po kliknięciu w tzw. tooltip i mają formę zwięzłego komunikatu. Takie podpowiedzi nie zastąpią całej dokumentacji – ale pozwalają na przeniesienie najważniejszych informacji do panelu wtyczki.

Dodatkowo  Logika warunkowa zyskała nowy wygląd i funkcjonalność.

Dodatkowa walidacja

Wersja PRO zawiera pola z opcjami takie jak Select lub Radio. W poprzednim panelu ustawienie opcji takiego pola wiązało się z ręcznym wpisaniem danych w poprawnym formacie. Wpisanie innego formatu powodowało nieprawidłowe działanie pola lub logiki warunkowej na jego podstawie. Obecna wersja uniemożliwia wpisanie błędnego formatu.

Podobne udogodnienia i komunikaty o błędnej walidacji pojawią się także przy edycji innych opcji – np. logiki warunkowej.

To nie koniec zmian we Flexible Checkout Fields

Poprzedni design mocno się postarzał przez ostatnie lata. Mimo to jego zmiana nie była łatwą decyzją i została poprzedzona wieloma godzinami analiz wewnątrz Zespołu odpowiedzialnego za Flexible Checkout Fields. Całkowita przebudowa interfejsu to fundament pod dodanie kolejnych funkcji – ten argument ostatecznie przeważył szalę zwycięstwa na rzecz wdrożenia nowego panelu.

Spiritus movens zmian był nasz Developer. Najlepszym narzędziem do realizacji celu okazała się biblioteka ReactJS.