Checkout Woocommerce

Wstęp

Bardzo często podczas tworzenia dedykowanego modułu dla klienta, dochodzi do momentu kiedy musimy pozmieniać - dodać lub usunąć pewne nowe pola na podstronie Checkout. Zatem jak to zrobić? W tym artykule przedstawię wam jak dodać nowe pola poprzez plik function.php.

Jest to najbezpieczniejsza metoda dodawania pól, ponieważ nie jesteśmy zależni od jakiś dziwnych wtyczek, które z dnia na dzień mogą przestać działać z powodu np. wprowadzenia nowej aktualizacja wordpressa.

W tym artykule dodamy 3 nowe pola textowe (Nazwa firmy, Nip, Adres), które po wypełnieniu trafią do kliena w podsumowaniu na maila i do naszego panelu administracyjnego → woocommerce → zamowienia

Zatem zabierajmy się do pracy :)

Otwieramy Filezille lub Total commandera (lub inny program, który pozwoli nam się połączyć zdalnie z serwerem FTP). Wpisuje nasze dane do logowania z serwerem FTP: (Serwer, nazwa użytkownika, hasło), po czym znajdujemy katalog w którym znajduje się nasza strona, następnie wchodzimy w wp-content → themes → nazwa naszego motywu child.

(Child motyw Większość współczesnych motywów posiada child motyw czyli miejsce gdzie możemy modyfikować pliki oryginalnego motywu bez konieczności nadpisywania orginału w jego katalogu.) następnie otwieramy nasz plik function.php (Jako edytor bardzo polecam notepad++, jest to darmowe narzędzie, które obsługuje bardzo dużą ilość języków przy czym mało waży w porównaniu do innych).


Uwaga ! Każdy plik function.php może wyglądać inaczej, zależy od motywu :)
co ważne scrollujemy dokument na sam dół i dodajemy komentaż /* Nasz Kod */ żebyśmy widzieli gdzie my zaczeliśmy dokonywać zmian i w razie czego w prostu sposób naprawić błędy.

Dodajemy kod, który doda nam 3 opcjonalne pola w zakładce checkout. Najważniejsze
elementy kodu omówie poniżej:

// Wyswietlamy pola

add_action( 'woocommerce_after_order_notes', 'my_custom_checkout_field' );

function my_custom_checkout_field( $checkout ) {

/* Pierwsze pole */

woocommerce_form_field( 'firma', array(
'type' => 'text',
'class' => array('my-field-class form-row-wide'),
'label' => __('Pełna nazwa Firmy:'),
'placeholder' => __('Wpisz nazwę firmy'),
), $checkout->get_value( 'firma' ));


/* Drugie pole */

woocommerce_form_field( 'nip', array(
'type' => 'number',
'class' => array('my-field-class form-row-wide'),
'label' => __('NIP'),
'placeholder' => __('Wpisz NIP'),
), $checkout->get_value( 'nip' ));


/* Trzecie pole */

woocommerce_form_field( 'miejsce', array(
'type' => 'text',
'class' => array('my-field-class form-row-wide'),
'label' => __('Ulica, kod, miejscowość:'),
'placeholder' => __('Wpisz Ulica, kod, miejscowość:'),
), $checkout->get_value( 'miejsce' ));
}

Omówienie Kodu

Zacznijmy od funkcji czyli od momentu function my_custom_checkout_field( $checkout )

woocommerce_form_field( 'miejsce', array(
'type' => 'text',
'class' => array('my-field-class form-row-wide'),
'label' => __('Ulica, kod, miejscowość:'),
'placeholder' => __('Wpisz Ulica, kod, miejscowość:'),
), $checkout->get_value( 'miejsce' ));

woocommerce_form_field jest to wewnętrzna funkcja woocommerca która określa nam nowe pole wraz z jego parametrami:

'type' → typ pola np. text,checkbox,number
'class' → dodane klasy do nadrzędnego akapitu, które pozwolą oscylować pole
'label' → jest to etykieta, która występuje nad nowym polem
'placeholder' → tekst wyświetlany wewnątrz pola

na samym końcu jest taki ciekawy fragment jak $checkout->get_value( 'miejsce' ), ten fragment kodu przekazuje dane wpisane przez użytkownika na stronie do dalszej części zamówienia. Uwaga ! Bez tego fragmentu kodu nie ma możliwości przekazania dalej informacji od użytkownika.


Pozostał jeszcze jeden element kodu znajdujący się na samym początku:

add_action( 'woocommerce_after_order_notes', 'my_custom_checkout_field' );

jest to wewnętrzna funkcja wordpressa, która pozwala wkleić kod który napisaliśmy w postaci funkcji w dane miejsce strony.

To teraz z polskiego na nasze ;D

utworzyliśmy funkcje my_custom_checkout_field, która posiada jakiś element kodu w naszym wypadku dodawanie pól. Skoro utworzyliśmy funkcje to musi ona wiedzieć gdzie się ma wywołać i do tego służy funkcja add_action. Pobiera ona miejsce gdzie ma być dodana, w tym przypadku to woocommerce_after_order_notes i dodaje tam naszą funkcje my_custom_checkout_field.

Całkiem proste nie? W dodatku bardzo praktyczne.

W tym momencie zadacie sobie pytanie skąd jest to miejsce: woocommerce_after_order_notes
A odurz nasi kochani projektanci woocommerca wiedzieli, że nastąpi kiedyś taki moment w której web developrzy zaczną grzebać i kombinować w plikach woocommerca. Co nie jest do końca dobrym rozwiązaniem, ponieważ każda aktualizacja spowoduje przywrócenie kodu do stanu pierwotnego. I dlatego powstały Woocommerce Hooks (załączam link do strony z przydatnymi hookami Woocommerce Hooks), które pozwalają nam wszczepić nasz kod w miejsce gdzie chcemy :).

Tak więc pierwszy etap pracy mamy za sobą, dodaliśmy nasze pola co wygląda następująco:

Ustawiamy wstępną konfiguracje przesyłania danych z pól, które utworzyliśmy

Wszystko fajnie tylko co się okazuje: po wprowadzeniu danych nic się z nimi nie dzieje. Dlaczego?

Odpowiedź jest dosyć prosta, ponieważ żadna funkcja nie wie co z nimi jeszcze zrobic. Zaraz to zmienimy :) wklejamy nasz kod:


// Dodajemy pola do zamowienia

add_action( 'woocommerce_checkout_update_order_meta', 'dodaj_firma2' );
function dodaj_firma2( $order_id ) {
if ( !empty( $_POST['firma'] ) ) {
update_post_meta( $order_id, 'My firma', sanitize_text_field( $_POST['firma'] ) );
}

if ( ! empty( $_POST['wydzial'] ) ) {
update_post_meta( $order_id, 'My wydzial', sanitize_text_field( $_POST['wydzial'] ) );
}

if ( ! empty( $_POST['email'] ) ) {
update_post_meta( $order_id, 'My email', sanitize_text_field( $_POST['email'] ) );
}
}

Omówienie Kodu

Tworzymy nową funkcję dodaj_firma2( $order_id ), która będzie odpowiadała za walidacje danych, które poźniej trafią do panelu administratora

if ( !empty( $_POST['firma'] ) ) {
update_post_meta( $order_id, 'My firma', sanitize_text_field( $_POST['firma'] ) );
}

Na samym początku dajemy instrukcje warunkową, która sprawdza czy pole zostało wypełnione jeżeli tak to przekazuje dane dalej, jeżeli nie to nic z nią nie robi. Jednak ciekawszym fragmentem jest:

update_post_meta( $order_id, 'My firma', sanitize_text_field( $_POST['firma'] ) );

,który sprawia że dane z naszych pól są dodane do podsumowania. Opis co krok po kroku sie dzieje:

$order_id wskazuje id aktualnego zamówienia

'My firma' jest to dodatkowa zmienna, która będzie nam potrzebna do wyświetlenia danych w panelu administracyjnym

sanitize_text_field( $_POST['firma'] ) odpowiada za przesłanie danych z formularza.

['firma'] pamiętacie? Jest to wartość która przesyłamy poprzez get_value( 'firma' ));
Na tym etapie mamy wprowadzoną walidację danych która będzie przesyłana do naszego panelu.

Dodajemy nasze pola do panelu administracyjnego

Aby dodać te dane do panelu administracyjnego i wyświetlić w podsumowaniu wklejamy kod:


// Dodajemy pola do panelu admina

add_action( 'woocommerce_admin_order_data_after_billing_address', 'pokaz_firma2', 10, 1 );

function pokaz_firma2($order){

echo __( 'Firma').'' . get_post_meta( $order->id, 'My firma', true ) ;
echo __( ' Wydział').''. get_post_meta( $order->id, 'My wydzial', true );
echo __( ' Email').''. get_post_meta( $order->id, 'My email', true );
}

Omówienie Kodu

Tworzymy nową funkcje pokaz_firma2($order), która będzie odpowiadać za wyświetlenie danych w podsumowaniu i panelu administracyjnym.

echo ' '.__( 'Firma').': ' . get_post_meta( $order->id, 'My firma', true ) .' ';

Najważniejszym elementem jest get_post_meta( $order->id, 'My firma', true ) .' '; , które pobiera nam dane przefiltrowane w poprzednich krokach i dodaje do panelu administracyjnego :)

Po wypełnieniu wszystkich pól widzimy że dane mamy dodane w panelu:

Dodajemy dane z naszych pól do maila podsumowywującego

Wszystko super tylko dalej klient tego nie ma w podsumowaniu w mailem, aby dodać nasze dane do maila wpisujemy następujący kod:


function new_woocommerce_email_after_order_table ($order, $sent_to_admin, $plain_text, $email) {
global $woocommerce;
echo pokaz_firma2($order);
}

add_filter('woocommerce_email_after_order_table', 'new_woocommerce_email_after_order_table', 1, 2);

Omówienie Kodu

Tworzymy nową funkcję, która będzie dodawała dane od użytkownika do maila:

Najważniejsze jest dodane wywołania funkcji: echo pokaz_firma2($order); ponieważ tam znajdują się wszystkie dane które wpisał użytkownik

Po wykonaniu wszystkich powyższych kroków z całą pewnością uda ci się dodawać tyle pól ile jest potrzebne w danym projekcie. Bardzo dziękuję za przeczytanie artykułu i zapraszam do komentowania :)

2 Comments

  1. Mateusz pisze:

    Rozumiem, że to tylko przykład ale również w “tutorialach” powinniście używać angielskiego nazewnictwa. Np. “pokaż_firma2”, “$_POST[‘wydział’]”… proszę, nie 😉

  2. Cymes pisze:

    Dobry artykuł. Krok po kroku pokazane, co i jak 🙂 Tak trzymać.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *