Data publikacji: 19 listopada 2018
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 tekstowe (Nazwa firmy, Nip, Adres), które po wypełnieniu trafią do klienta w podsumowaniu na maila i do naszego panelu administracyjnego → woocommerce → zamowienia.
A w wolnej chwili przeczytaj jeszcze artykuł pod tytułem: Content marketing w branży e-commerce.
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:
Dodajemy kod, który doda nam 3 opcjonalne pola w zakładce checkout. Najważniejsze
// Wyswietlamy pola
'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 */
'type’ => 'number’,
'class’ => array(’my-field-class form-row-wide’),
'label’ => __(’NIP’),
'placeholder’ => __(’Wpisz NIP’),
), $checkout->get_value( 'nip’ ));
/* Trzecie pole */
'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
Ustawiamy wstępną konfiguracje przesyłania danych z pól, które utworzyliśmyWszystko 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
update_post_meta( $order_id, 'My firma’, sanitize_text_field( $_POST[’firma’] ) );
update_post_meta( $order_id, 'My wydzial’, sanitize_text_field( $_POST[’wydzial’] ) );
}
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
Dodajemy nasze pola do panelu administracyjnegoAby dodać te dane do panelu administracyjnego i wyświetlić w podsumowaniu wklejamy kod:
// Dodajemy pola do panelu admina
echo __( 'Firma’).” . get_post_meta( $order->id, 'My firma’, true ) ;
echo __( ’ Wydział’).”. get_post_meta( $order->id, 'My wydzial’, 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
Dodajemy dane z naszych pól do maila podsumowywującegoWszystko 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 🙂
Rozumiem, że to tylko przykład ale również w „tutorialach” powinniście używać angielskiego nazewnictwa. Np. „pokaż_firma2”, „$_POST[’wydział’]”… proszę, nie 😉
Dobry artykuł. Krok po kroku pokazane, co i jak 🙂 Tak trzymać.